Shopify-Entwickler in Karlsruhe

#Was bedeutet Headless bei Shopify, und was bleibt bei Shopify?

Ich bin Mariusz Szatkowski, selbstständiger Entwickler aus Gdynia. Ich arbeite persönlich an Ihrem Shop, per E-Mail und in Dokumenten, ohne Termine. Auf dieser Seite geht es um eine Entscheidung, die in Shop-Projekten oft zu früh fällt: ein eigenes Frontend statt eines Themes.

Nach der Shopify-Dokumentation zu Headless Commerce trennt Headless das Frontend vom Backend. Sie bauen das Frontend, Shopifys APIs liefern darunter Produkte, Sammlungen, Kunden, Warenkorb, Checkout und internationale Preise. Wo es läuft, wählen Sie: auf einer Website, in einer App oder hinter einem Kaufen-Button auf einer bestehenden Seite.

Zwei APIs tragen das Modell. Die Storefront API liefert Produkte, Sammlungen, Suche und Warenkorb und übergibt Kundinnen und Kunden an den Checkout. Die Customer Account API deckt Anmeldung, Bestellungen und Adressen ab. Der Checkout bleibt bei Shopify. Das gilt auch beim Livegang: Die Shopify-Anleitung sieht vor, dass die Hauptdomain den Storefront ausliefert und eine Subdomain wie checkout.beispiel.de den Checkout, und dass der Online-Shop danach aktiv bleibt.

#Was die Storefront API ohne Token liefert und was nicht

Die Storefront API kennt zwei Zugriffsarten. Tokenlos erreichen Sie Produkte, Sammlungen, Abo-Pläne, Suche, Seiten, Blogs, Artikel und den Warenkorb, mit einer Komplexitätsgrenze von 1.000 je Abfrage. Produkt-Tags, Metafelder und Metaobjekte, das Navigationsmenü und Kundendaten verlangen einen Token.

Es gibt einen öffentlichen Token für Abfragen aus dem Browser und einen privaten für Abfragen vom Server. Der private Token ist ein Geheimnis. Er gehört in keinen Browsercode und trägt kein Präfix wie NEXT_PUBLIC_. Das klingt selbstverständlich, ist aber eine Stelle, an der Zugangsdaten in einem Repository landen.

Die API ist versioniert, mit vier Veröffentlichungen im Jahr. Shopify empfiehlt, jedes Quartal auf die neueste stabile Version zu wechseln. Für Sie heißt das: Ein Headless-Storefront hat einen festen Wartungsrhythmus, den ein Theme in dieser Form nicht kennt. Ich plane ihn von Anfang an in die Wartung ein.

#Hydrogen: Toolkit für den Storefront, kein fertiger Shop

Hydrogen ist laut Shopify das Headless-Toolkit. Es übernimmt die Teile, die an Shopify hängen und leicht falsch gehen: Warenkorb, Variantenauswahl, Filter, Analytics und die Routen, auf die Apps und Checkout angewiesen sind. Routing, Rendering und Oberfläche bleiben beim Framework. Die aktuelle Dokumentation nennt Next.js, React Router, Nuxt, Astro und SvelteKit. Zwei Vorlagen gibt es: React Router für Oxygen und ein Next.js-Template von Vercel für Vercel.

Die Dokumentation behandelt inzwischen Hydrogen in der Version 2026-10 und verweist für Version 2026-04 und älter auf eine eigene Seite zu Legacy Hydrogen mit Migrationsanleitung. Wer ein älteres Hydrogen-Projekt betreibt, hat also eine Migration vor sich. Das ist ein Grund, vor einer Entscheidung auf das Alter der Technik zu schauen und nicht nur auf die Funktion.

Auf dem Server laufen Hydrogens Request-Handler vor Ihrem Router. Sie beantworten Routen wie /api/cart und /checkout. Findet der Router keine Seite, prüft Hydrogen die URL-Weiterleitungen des Shops, bevor ein 404 erscheint. Der Warenkorb funktioniert auch ohne JavaScript, weil Änderungen über native HTML-Formulare laufen.

#Oxygen oder anderes Hosting?

Oxygen ist Shopifys Hosting für Hydrogen-Storefronts und läuft als Web Worker, nicht als Node-Server. Umgebungen und Variablen verwalten Sie im Shopify-Admin. Wer Next.js nutzt, deployt nach Shopifys Übersicht zum Deployment auf Vercel. Node, Cloudflare Workers und Deno sind ebenfalls möglich, wenn das Framework dort läuft.

Eine Einschränkung steht in der Doku zu Oxygen-Umgebungen: Umgebungen sind standardmäßig privat und nur nach Login im Shop sichtbar. Private URLs laden langsamer. Wie viele öffentliche Umgebungen ein Shop hat, hängt vom Tarif ab: laut Tabelle eine in Starter, Basic, Grow und Advanced, 25 in Shopify Plus und keine in Testtarifen. Wer Vorschau, Staging und Produktion öffentlich schalten will, stößt in den kleineren Tarifen an diese Grenze. Das sollten Sie vor dem Angebot wissen.

#Wann sich Headless lohnt und wann ein Theme genügt

Shopify nennt als Fälle für Headless: ein Storefront-Erlebnis, das Web- und Mobile-Werkzeuge nicht oder nur schwer abbilden, ein Frontend ohne Liquid, Shopify-Commerce in bestehender Infrastruktur, mehrere nicht unterstützte Kanäle und ein CMS, dessen Inhalte im Storefront stehen. Danach folgt ein Satz, den ich jedem Gespräch voranstelle: Ein Headless-Storefront kostet mehr in Aufbau und Betrieb als ein Theme. Prüfen Sie vorher, ob Sie die zusätzlichen Kosten und die Komplexität akzeptieren und ob Entwickler den Storefront nach dem Start pflegen.

Ein Online-Store-2.0-Theme arbeitet mit JSON-Templates. Sie halten eine Liste von Sections und deren Einstellungen. Händlerinnen und Händler fügen Sections im Theme-Editor hinzu, entfernen und ordnen sie um. Ein Template kann bis zu 25 Sections mit je bis zu 50 Blöcken rendern. Für viele Kataloge reicht das.

Meine Empfehlung folgt aus dieser Tabelle, nicht aus einer Vorliebe. Passt Ihr Vorhaben in ein Theme, bekommen Sie von mir ein Theme. Das spart Ihnen den Betriebsaufwand. Liegt eine der genannten Anforderungen vor, beschreibe ich in der schriftlichen Einschätzung, welchen Teil Sie headless brauchen und welchen nicht. Verwandte Fragen zu Frontend-Technik behandle ich auf der Seite Astro-Entwickler in Karlsruhe und der Seite zu Headless CMS.

#Was sich bei SEO ändert

Bei einem Theme nimmt Shopify Ihnen Arbeit ab. Laut Shopify-Hilfe zu SEO erzeugt es Canonical-Tags, sitemap.xml und robots.txt automatisch, die Titel-Tags der Themes enthalten den Shopnamen, und Themes bringen Schema-Markup für Produkte mit. Bei Headless liegt Rendering beim Framework, also auch alles, was Suchmaschinen davon sehen.

Die Shopify-Checkliste vor dem Start nennt Punkte, die für SEO direkt zählen:

• Der Server rendert Titel, Bilder, Preis, Variantenoptionen und das Formular zum Warenkorb.
• Ein Neuladen einer URL mit Optionsparametern wählt die erwartete Variante.
• Eine gefilterte Sammlungs-URL rendert dieselben Filter und dieselbe Sortierung serverseitig.
• Jeder Link in Kopfzeile und Fußzeile liefert 200. Die Sammlung /collections/all des Online-Shops gibt es in der Storefront API nicht und führt sonst zu einem 404.
• Der Warenkorb unter /cart funktioniert ohne JavaScript.

Dazu kommt der Umzug. Der Standardpfad für Produkte ist /products/:handle. Nutzt Ihr Storefront eine andere Struktur, verlangt Shopify eine serverseitige Weiterleitung von diesem Pfad. Alte Online-Shop-URLs lassen sich mit einer Hydrogen-Weiterleitung auf den neuen Storefront bringen. Wer Meta oder Google als Vertriebskanal nutzt, muss laut Anleitung beachten, dass die Produkt-Feeds weiter auf Adressen des Online-Shops zeigen, bis sie umgeschrieben sind. Ich prüfe Statuscodes, Canonicals und die Indexabdeckung nach dem Umschalten in der Search Console.

Für die Ladezeit nenne ich ausschließlich die offiziellen Schwellen: LCP bis 2,5 s, INP bis 200 ms, CLS bis 0,1, beschrieben auf web.dev. Ob ein Theme sie verfehlt, messe ich vor jeder Headless-Empfehlung. Oft liegt es an Apps und Skripten, nicht am Theme.

#Analytics und Einwilligung: was Hydrogen mitbringt und was nicht

Hydrogen sendet laut Analytics-Anleitung dieselben Ereignisse wie Liquid-Themes und respektiert die Datenschutzwahl der Besucher. Drei Teile arbeiten zusammen: ShopifyScripts lädt die Customer Privacy API, das Banner und das Shopify-Analytics-Ziel. Ein Event-Bus hält Ereignisse zurück, bis die Einwilligung Zustellung erlaubt. Ziele wie Shopify Analytics empfangen die Ereignisse. Die App muss PAGE_VIEWED selbst bei jedem Laden und jeder Navigation senden. Der Bus läuft nur im Browser, es gibt keine serverseitige Auslieferung.

Für die Einwilligung gibt es drei Modi: default-banner zeigt Shopifys Banner, wenn die Region es verlangt. custom-banner bindet ein Banner eines Drittanbieters über eine setup()-Funktion ein. no-banner ist nur sinnvoll, wenn Sie die Einwilligung bereits anderswo einholen. In Regionen mit Einwilligungspflicht können Besucher dann nichts erteilen, und Ereignisse erreichen kein Ziel. Wenn das Skript der Customer Privacy API blockiert ist, bleibt die Auslieferung ebenfalls gesperrt.

Rechtlich verlangt § 25 TDDDG für das Speichern und Auslesen von Informationen auf dem Endgerät grundsätzlich eine Einwilligung, wenn der Zugriff nicht unbedingt erforderlich ist. Der LfDI Baden-Württemberg hat dazu eine FAQ zu Cookies und Tracking veröffentlicht. Sie trägt den Stand März 2022 und nennt noch das TTDSG, das inzwischen TDDDG heißt. Der LfDI kündigt dort eine ergänzte Fassung an.

Für Headless-Projekte ist ein Abschnitt dieser FAQ besonders nützlich: Serverseitiges Tracking umgeht weder TTDSG noch DS-GVO. Greift der Anbieter auf Informationen des Endgeräts zu oder gibt personenbezogene Daten an Dritte weiter, gelten beide Gesetze. Nach der FAQ ist das bloße Ersetzen von Kennungen durch User-IDs oder Hashes weder Pseudonymisierung noch Anonymisierung. Wer mit einem Headless-Frontend auf serverseitiges Tracking ausweicht, um das Banner zu sparen, sollte diesen Absatz zuerst lesen. Ich bin kein Rechtsberater. Ich zeige Ihnen, welche Skripte vor der Einwilligung laden und welche Daten wohin gehen. Die Bewertung treffen Sie mit Ihrer Rechtsberatung.

#Karlsruhe: wer betreibt den Storefront?

Die Frage nach Headless ist am Ende eine Frage nach Menschen. Shopify verlangt Entwickler, die den Storefront nach dem Start pflegen. Wenn Sie ein eigenes Team haben, kann es das übernehmen, und ich liefere Aufbau und Übergabe. Wenn nicht, ist ein Theme mit klarer Wartung meist die ruhigere Wahl. Wer in der Region Entwickler sucht oder sich vernetzen will, findet beim CyberForum ein Netzwerk, das sich als Hightech.Unternehmer.Netzwerk beschreibt und eine Jobbörse sowie Veranstaltungen führt. Ob das für Ihren Shop passt, müssen Sie beurteilen.

Zuständige Aufsicht für Datenschutz ist bei Sitz in Karlsruhe der LfDI Baden-Württemberg. Nach seiner Seite zu Aufgaben und Zuständigkeiten ist er seit dem 1. April 2011 Aufsichtsbehörde für den nicht-öffentlichen Bereich, kontrolliert dort ansässige Unternehmen und Vereine und berät auch deren betriebliche Datenschutzbeauftragte.

Foto: Carsten Steger, CC BY-SA 4.0, Wikimedia Commons.

#Checkliste vor der Entscheidung

Die Liste können Sie auch ohne mich nutzen.

#Wie ein Projekt mit mir abläuft

1. Schriftliche Anfrage. Sie schicken mir die Adresse Ihres Shops und Ihr Ziel. Rückfragen kläre ich per E-Mail.
2. Schriftliche Einschätzung. Sie enthält Umfang, Annahmen, Risiken und die Frage Theme oder Headless, mit Begründung.
3. Vorbereitung durch Sie. Die Vorlage für Layout und Wireframes kommt von Ihnen, als Tabelle oder Skizze. Entwerfen tue ich sie nicht. Dazu kommen Zugänge zum Shopify-Admin und zu Domain und DNS.
4. Umsetzung auf Entwicklungsinstanz. Sie prüfen den Stand dort und geben schriftlich frei.
5. Livegang mit Prüfung der Statuscodes, Weiterleitungen und Ereignisse.
6. Wartung auf Wunsch: Updates zuerst auf Staging, Backups außerhalb des Hostings, monatlicher schriftlicher Bericht. Wartungsstunden gelten je Monat und werden nicht übertragen.

#Häufige Fragen

#Ab wann lohnt sich ein Headless-Shop mit Hydrogen?

Wenn der Shop Anforderungen hat, die Theme, Apps und Vertriebskanäle nicht abdecken, etwa eine Storefront-Erfahrung ohne Liquid, ein eigenes CMS im Frontend oder mehrere Kanäle. Shopify selbst warnt, dass Headless teurer in Aufbau und Betrieb ist als ein Theme und dass Entwickler den Storefront nach dem Start pflegen müssen.

#Läuft der Checkout bei Headless woanders als bei Shopify?

Nein. Nach der Shopify-Dokumentation läuft der Checkout weiter bei Shopify. Üblich ist eine eigene Subdomain wie checkout.beispiel.de, die auf Shopify zeigt.

#Was ändert sich bei SEO, wenn ich von einem Theme auf Headless wechsle?

Bei einem Theme erzeugt Shopify Sitemap, robots.txt, Canonical-Tags und Produkt-Markup. Bei Headless liegen Rendering, Meta-Tags und Weiterleitungen beim Frontend. Ich prüfe vor dem Start, ob Produktseiten serverseitig gerendert werden, ob die Pfade stimmen und ob alte URLs weiterleiten.

#Brauche ich bei Hydrogen ein Cookie-Banner?

Das hängt davon ab, welche Skripte und Tracker laufen. Hydrogen liefert einen Consent-Modus mit Shopifys Banner oder die Anbindung eines eigenen Banners mit. Rechtlich maßgeblich ist § 25 TDDDG. Ob Ihr Fall einwilligungspflichtig ist, klären Sie mit Ihrer Rechtsberatung.

#Welche Datenschutzbehörde ist für einen Shop in Karlsruhe zuständig?

Für Unternehmen mit Sitz in Baden-Württemberg ist der Landesbeauftragte für den Datenschutz und die Informationsfreiheit Baden-Württemberg (LfDI BW) die Aufsichtsbehörde für den nicht-öffentlichen Bereich. Er berät auch betriebliche Datenschutzbeauftragte.

#Schreiben Sie mir

Schicken Sie mir über das Kontaktformular die Adresse Ihres Shops, Ihr Ziel, Ihren Wunschtermin und das System, auf dem er heute läuft. Meine erste schriftliche Einschätzung ist kostenlos. Ob Theme oder Headless besser passt, steht dann mit Begründung darin. Meine übrigen Shopify-Leistungen finden Sie unter Shopify-Entwickler.