Headless ist nicht automatisch schneller
Eine Headless-Storefront entfernt die Theme-Grenzen und bringt eine Build-Pipeline, ein Hosting-Konzept, eine Preview-Umgebung und ein Team, das alle drei pflegen muss. Es zahlt sich aus, wenn das Frontend wirklich ein Produkt ist. Liegt das eigentliche Problem an einem langsamen Template oder einem überladenen App-Stack, ist dessen Behebung günstiger und schneller.
BEWIESENE
ERGEBNISSE
GESAMTUMSATZ GGÜ. VORPERIODE
Shopifys Headless-Stack in der Praxis
In einem Headless-Setup bleibt Shopify die Commerce-Engine, und das Frontend wird zu Ihrer eigenen Anwendung. Shopify liefert die Bausteine. Der Checkout bleibt bei Shopify und wird über Checkout Extensibility angepasst, statt neu gebaut zu werden. Das begrenzt das Risiko im Zahlungsablauf, bedeutet aber auch, dass ein Teil der Customer Journey außerhalb Ihres Frontend-Codes liegt.
Hydrogen: Shopifys Bibliothek für eigene Storefronts, nutzbar in React Router, Next.js, Nuxt, Astro oder SvelteKit (seit Version 2026-10)
Oxygen: Shopifys Hosting für Hydrogen, mit Preview-Deployments pro Änderung
Storefront API: Produkte, Kollektionen, Warenkorb, Suche und Marktkontext per GraphQL
Customer Account API: Login, Bestellhistorie und Kontodaten in Headless-Storefronts
Checkout: von Shopify gehostet, erweiterbar mit Checkout UI Extensions (in den Checkout-Schritten nur mit Plus) und Shopify Functions
Metaobjects oder ein Headless-CMS für redaktionelle Inhalte
Hydrogen ist nicht die einzige Option. Ein Framework wie Next.js auf Basis der Storefront API kann besser passen, etwa wenn Ihr Team bereits damit arbeitet oder andere Anwendungen dasselbe Frontend nutzen. Wir wählen den Stack nach Team, Content-Modell und Hosting-Anforderungen, nicht nach Vorliebe.
Was Sie mit Headless übernehmen
Ein Theme erledigt Dinge, die man erst bemerkt, wenn sie fehlen. In einem Headless-Build entfallen der Theme-Editor, viele Theme-basierte Apps und ein Teil des Standardverhaltens des Shopify-Shops. Für jedes davon braucht es eine Alternative, und jede Alternative ist Code oder ein Dienst, den jemand pflegen muss.
Apps auf Basis von Theme App Extensions brauchen eine API-Alternative oder Eigenentwicklung
Das Merchandising arbeitet in einem CMS oder mit Metaobjects statt im Theme-Editor
Hydrogen liefert Hilfsmittel für Sitemap, robots.txt und Redirects; Canonicals, strukturierte Daten und den Rest bauen und testen Sie selbst
Analytics, Consent und Tracking werden im Frontend umgesetzt und neu getestet
Märkte und Sprachen laufen über den Kontext der Storefront API und das Routing
Previews, Deployments und Monitoring werden Teil Ihres Release-Prozesses
Bevor die Entwicklung beginnt, prüfen wir jede App und jede Integration im aktuellen Shop gegen die Headless-Architektur. So stellt sich nicht erst mitten im Projekt heraus, dass Bewertungen, Suche, Personalisierung oder Loyalty nur im Theme funktionieren. Die Kosten für ihren Ersatz gehören in die Entscheidung, nicht in die Überraschungen danach.
Wann ein Theme besser passt
Moderne Shopify-Themes sind flexibler als ihr Ruf. Sections auf jeder Seite, Metafields und Metaobjects für strukturierte Inhalte sowie Theme App Extensions decken einen großen Teil dessen ab, was Marken mit Headless lösen wollen. Geschwindigkeitsprobleme entstehen häufiger durch Apps, Skripte und schwere Bilder als durch die Architektur des Themes selbst.
Geht es um ein eigenständiges Design, ist ein gut gebautes Custom Theme über Shopify Store Design meist schneller live und günstiger im Unterhalt. Geht es um Conversion, liefert CRO auf dem bestehenden Theme früher Antworten. Headless ist sinnvoll, wenn das Frontend selbst das Produkt ist und das Team für seine Pflege bereits da ist.
Auch Produktdaten können den Ausschlag geben. Müssen Inhalte aus einem PIM, einem CMS und Shopify auf einer Seite so zusammenkommen, wie es ein Theme nicht abbilden kann, wird Headless attraktiver. Wir wägen das gegen die zusätzliche Verantwortung ab und halten die Begründung schriftlich fest.
So läuft ein Headless-Projekt ab
Architektur-Review. Wir bewerten den aktuellen Shop, Apps, Content-Quellen und das Team und halten fest, ob Headless gerechtfertigt ist oder ein Theme das Problem mit weniger Risiko löst.
Stack und Content-Modell. Wir wählen Framework, Hosting und CMS und modellieren Inhalte in Metaobjects oder im CMS, damit die Redaktion Seiten pflegen kann, ohne für jede Änderung Entwickler zu brauchen.
Design und Komponenten. Wir gestalten eine Komponentenbibliothek entlang echter Templates, von Produkt- und Kollektionsseiten bis zu Content- und Kontoseiten, mit Performance-Budgets, die vor Beginn der Entwicklung feststehen.
Entwicklung und Integrationen. Wir bauen die Storefront auf Storefront API und Customer Account API, ersetzen Theme-abhängige Apps und binden Suche, Bewertungen, CMS und Tracking an.
SEO- und Paritätstests. Wir mappen jede URL, jeden Redirect und jeden Typ strukturierter Daten, testen Analytics und Consent und vergleichen das neue Frontend vor der Umstellung mit dem alten Shop.
Launch und Verantwortung. Wir launchen mit Monitoring und einem Rollback-Plan. Danach übergeben wir Dokumentation und Pipelines oder entwickeln und pflegen die Storefront gemeinsam mit Ihrem Team weiter.
Headless Shopify in Zahlen (Stand Oktober 2026)
Die Zahlen, die einen Headless-Shopify-Build bestimmen, so wie Shopify und Google sie veröffentlichen. Wir haben sie im Oktober 2026 geprüft. Limits ändern sich; maßgeblich ist die aktuelle Dokumentation auf shopify.dev.
Oxygen-Hosting ist ohne Aufpreis in den kostenpflichtigen Tarifen enthalten: Starter, Basic, Grow, Advanced, Plus sowie Pause and build. In Agentic-Tarifen ist es nicht verfügbar. Wenn Sie auf Oxygen hosten, ist Hosting kein eigener Posten im Budget.
Öffentliche Storefronts: 1 in Starter bis Advanced, 25 in Plus. Wenn Sie je Marke oder Land eine eigene Storefront wollen, spricht das für Shopify Plus.
Hydrogen 2026-10: Hydrogen ist jetzt eine Library, die Sie in Ihr eigenes Framework einbinden, etwa React Router, Next.js, Nuxt, Astro oder SvelteKit, mit Bindings für React und Vue. Versionen 2026-04 und älter gelten als Legacy, Shopify empfiehlt die Migration. Läuft Ihre Storefront bereits auf Hydrogen, gehört diese Migration auf die Roadmap.
Oxygen-Limits: 30 Sekunden CPU-Zeit und 128 MB Arbeitsspeicher pro Request, dazu ein Worker von höchstens 10 MB, der innerhalb von 400 ms startet. Oxygen unterstützt keinen Proxy vor den Deployments. Rechenintensive Aufgaben, etwa PIM-Daten synchronisieren oder Konfigurationen berechnen, gehören in einen separaten Service.
Storefront API: Echte Käufer haben kein festes Limit für Requests pro Minute. Bots und automatisierter Traffic werden begrenzt, das Anlegen von Checkouts wird pro Minute gedrosselt, und der Zugriff ohne Token hat ein Limit für die Query-Komplexität von 1.000. Spitzen im Sale werden nicht gedrosselt; Integrationen nutzen einen Token und die passende API.
API-Versionen: Shopify veröffentlicht alle drei Monate eine neue, jeweils am ersten Tag des Quartals. Jede stabile Version wird mindestens 12 Monate unterstützt. Planen Sie mindestens ein Versions-Upgrade pro Jahr ein.
Customer Account API: setzt Shopify-Kundenkonten, den Headless- oder Hydrogen-Kanal und HTTPS auf einem echten Hostnamen voraus. Der Login läuft über Shopify, damit Ihre Kunden von der Storefront bis zum Checkout angemeldet bleiben.
Checkout UI Extensions in den Schritten Information, Versand und Zahlung: nur in Plus. Ihr Headless-Frontend endet dort, wo der Checkout beginnt. Diese Schritte ändern Sie mit Plus und Extensions, nicht mit Frontend-Code.
Core Web Vitals (Google): LCP innerhalb von 2,5 Sekunden, INP höchstens 200 ms, CLS höchstens 0,1, gemessen am 75. Perzentil der Seitenaufrufe auf Mobilgeräten und Desktop. Wir nehmen diese Werte in die Abnahmekriterien auf, denn Headless erreicht sie nicht automatisch.
Ein Theme reicht, wenn das Frontend nicht das Produkt ist. Horizon, das eigene Theme von Shopify, basiert auf Theme Blocks: wiederverwendbaren Blöcken, die Sie verschachteln und in allen Sections einsetzen können. Zusammen mit Metafields und Metaobjects deckt das die meisten Anforderungen an Design und Content ab, ohne eigenes Hosting oder jährliche Upgrades. Dann beginnen Sie mit Shopify Store Design or CRO. Headless lohnt sich, wenn mehrere Content-Quellen, Storefronts oder Konfigurationen zusammenkommen müssen, wie bei Urban Arrow.
Headless-Projekte, die wir umgesetzt haben
Urban Arrow: Shopify, Storyblok und ein Vue.js-Frontend
Für Urban Arrow haben wir eine Headless-Plattform gebaut, in der Shopify den Commerce übernimmt und Storyblok die Inhalte verwaltet. Das Vue.js-Frontend unterstützt Produktkonfigurationen, intelligente SKU-Strukturen und lokalisierte Preise, mit Anbindungen an HubSpot und weitere APIs. Zur Urban-Arrow-Case
Headless Shopify im Blick?
Erzählen Sie uns, was Ihr aktueller Storefront nicht kann. Wir geben Ihnen eine ehrliche erste Einschätzung, ob sich Headless lohnt oder ob ein Theme es mit weniger Risiko löst.
