Headless Commerce: Der definitive Entscheidungsleitfaden für Shopify-Händler
Headless Commerce entkoppelt deinen Storefront vom Shopify-Backend und erschließt Geschwindigkeit sowie Omnichannel-Power.
Headless Commerce trennt deinen Storefront (den "Head") vom Commerce-Engine, die Katalog, Warenkorb, Checkout und Bestellungen verwaltet. Bei Shopify bedeutet das: Dein Frontend ist eine benutzerdefinierte React-Anwendung, die über die Storefront API mit Shopify kommuniziert, während Shopify alle Commerce-Funktionen im Hintergrund verwaltet. Es ist kein Upgrade. Es ist eine andere Architektur mit unterschiedlichen Kompromissen, und die falsche Wahl kostet sechsstellige Beträge und Monate Entwicklungszeit ohne sinnvollen Nutzen.
Wichtigste Erkenntnisse
- Headless Commerce trennt das Frontend vom Backend; die beiden kommunizieren über GraphQL-APIs.
- Shopifys offizieller Headless-Stack ist Hydrogen (React Router v7) plus Oxygen Edge Hosting, kostenlos auf allen bezahlten Plänen.
- Das neueste Release,
@shopify/hydrogen@2026.4.0, wurde am 9. April 2026 veröffentlicht und entwickelt sich zu einem Framework-agnostischen Toolkit, das Next.js, SvelteKit, Astro und mehr unterstützt. - Echte LCP-Gewinne von Headless gegenüber einem gut abgestimmten Liquid-Theme sind typischerweise 0,4 bis 1,2 Sekunden, nicht "10x schneller".
- Headless macht wirtschaftlich Sinn für Marken mit etwa 3 Millionen Euro+ Jahresumsatz, einem dedizierten Entwickler und konkreten UX-Anforderungen, die Liquid nicht erfüllen kann.
Was Headless Commerce wirklich bedeutet
Headless Commerce trennt den Storefront (das, was Käufer sehen) vom Commerce-Backend (Katalog, Warenkorb, Checkout, Bestellungen). Das Frontend ist eine separate App, gebaut mit Hydrogen, Next.js, Nuxt, Remix oder benutzerdefiniertem React, die Daten von Shopify über die Storefront API abruft.
Das häufigste Missverständnis: Headless bedeutet nicht "kein Checkout". Shopifys Checkout wird weiterhin von Shopify gehostet, und für die meisten Händler ist das eine Funktion, keine Einschränkung.
In einem traditionellen Shopify-Store sind Frontend und Backend eng in einem Liquid-Theme gekoppelt. Auf monolithischen Plattformen erfordern Frontend-Änderungen oft eine Abstimmung mit Backend-Deployments. Dies verlangsamt Iterationszyklen und erhöht das Risiko. Headless-Architekturen ermöglichen es Teams, den Storefront unabhängig zu aktualisieren, neue Landingpages zu starten, verschiedene Checkout-Flows zu testen oder Produktseiten neu zu gestalten, ohne das Backend anzufassen.
Der Shopify Headless-Stack in 2026
Shopify stellt mehrere Tools zur Unterstützung der Headless-Storefront-Entwicklung bereit: das Shopify-Backend für Produkte, Warenkorb, Checkout, Bestellungen und Preisgestaltung; die Storefront API zur Verbindung von Frontend-Erfahrungen mit Commerce-Funktionalität; Hydrogen, ein React-basiertes Framework für benutzerdefinierte Storefront-Entwicklung; und Oxygen, eine für Hydrogen-Storefronts optimierte Hosting- und Deployment-Umgebung.
Hydrogen
Hydrogen ist Shopifys fundierter Stack für Headless Commerce, gebaut auf React Router. Es bietet eine Reihe von Tools, Utilities und Best-Practice-Beispielen für die Erstellung dynamischer und performanter Commerce-Anwendungen.
Hydrogen ist Shopifys Open-Source-React-Framework zum Aufbau benutzerdefinierter Headless-Storefronts gegen die Storefront API, verteilt als @shopify/hydrogen npm-Paket, aktuell in Version v2026.4.0 (veröffentlicht 9. April 2026). Es läuft auf React Router v7 (die Weiterentwicklung von Remix, das Shopify 2022 erworben hat), nutzt Vite für den Build und wird mit Server-Side-Rendering, Streaming SSR, granularen Caching-Utilities und Shopify-spezifischen Commerce-Primitives ausgeliefert.
Die große architektonische Verschiebung 2026 ist, dass sich Hydrogen von einem reinen React-Framework zu einem Framework-agnostischen Toolkit entwickelt. Das neue Hydrogen ist ein Toolkit, kein Framework: ein Framework-agnostischer Kern von Shopify-Storefront-Primitives, dünne Bindings für das Framework, das du verwendest, und Agent-Skills, die deinem Coding-Agent beibringen, wie man alles verdrahtet. Der Kern ist reines JavaScript, daher funktioniert es mit Next.js, React Router, SvelteKit, Astro, SolidStart oder Nuxt.
Shopify hat auch Proof-of-Concept-Portierungen veröffentlicht, um diese Richtung zu validieren. Das Unternehmen portierte denselben Storefront auf eine Reihe von Frameworks: Next.js, React Router, SvelteKit, Astro, SolidStart und Nuxt. Dies sind Proof-of-Concepts, keine Starter-Kits. Der Weg zu einem echten Storefront ist das eigene Scaffolding deines Frameworks plus Hydrogens Skills, die Code für deinen Stack generieren.
Oxygen
Oxygen ist Shopifys Edge-Hosting-Laufzeit für Hydrogen-Storefronts, gebaut auf Cloudflares Open-Source-Projekt workerd. Sie ist kostenlos in jedem bezahlten Shopify-Plan enthalten (vom Basic-Plan ab 39 Euro/Monat bis Plus ab 2.300 Euro/Monat), bietet unbegrenzte Bandbreite, autoscaling und wird mit GitHub-integriertem CI/CD und Preview-Deployments ausgeliefert.
Du kannst deinen Storefront überall dort bereitstellen, wo es für dein Team sinnvoll ist: Oxygen, Vercel, Cloudflare Workers, Node oder Deno, ohne Shopifys Commerce-Fähigkeiten zu verlieren. Das heißt aber, dass Oxygens kostenlos-und-ohne-Konfiguration-Hosting bedeutet, dass die meisten Production-Hydrogen-Builds darauf bleiben.
Storefront API und Cart API Updates
Shopifys GraphQL-Produkt-APIs unterstützen nun bis zu 2.000 Varianten pro Produkt, gegenüber der früheren Obergrenze von 100 Varianten. Für Kategorien mit echte Varianten-Komplexität (Kleidung mit Größe/Farbe/Schnitt-Kombinationen, konfigurierbare Hardware, personalisierte Waren) eliminiert dies das Workaround-Muster, ein konzeptionelles Produkt in mehrere Listings mit duplizierten Metadaten aufzuteilen.
Shopify hat auch die Cart API umstrukturiert, um Abonnements, Produkt-Bundles und kontextabhängige Preisgestaltung als First-Class-Konzepte zu behandeln, nicht als Add-On-Apps, die über ein einfacheres Warenkorb-Modell gestapelt werden. Für Headless-Builds reduziert dies direkt den benutzerdefinierten Code, den du warten musst. Leistungs-Benchmarks, die Shopify veröffentlicht hat, zeigen Warenkorb-Laden bis zu 50% schneller, mit proportionalen Verbesserungen zur Checkout-Button-Leistung.
Headless und agentic Commerce
Eine neue Dimension, die Headless-Builds 2026 gewinnen, ist KI-Agent-Bereitschaft. Headless-Shopify-Stores sind strukturell besser für die aufstrebende agentic Commerce Landschaft positioniert als Liquid-basierte Stores. API-First-Architektur bedeutet, dass KI-Agenten deine Produktdaten, Preisgestaltung und Verfügbarkeit in Echtzeit lesen können.
Shopifys Winter '26 Edition hat Storefront MCP-Unterstützung hinzugefügt, sodass Hydrogen-Storefronts auf Oxygen Live-Commerce-Daten für benutzerdefinierte KI-Agenten bereitstellen können. Dies ist neu ab Dezember 2025.
Headless vs. Liquid: der ehrliche Vergleich
Das ist die Frage, die mir am häufigsten gestellt wird. Hier ist die ehrliche Antwort für jede Dimension, die wirklich zählt.
Leistung
Die Marketing-Aussage lautet "10x schneller". Die reale Zahl ist bescheidener. Echte Builds sehen 0,4 bis 1,2 Sekunden LCP-Verbesserungen bei Headless gegenüber einem abgestimmten Liquid-Theme, bedeutsam, aber nicht "10x".
Bevor du diese Lücke der Headless-Architektur zuordnest, überprüfe zunächst deinen aktuellen Store. Eine Agentur stellte fest, dass ihr 300.000-Euro-Headless-Prospect massive unoptimierte Produktbilder, 14 nicht genutzte Apps, die JavaScript laden, und kein CDN hatte. Ein auf Hydrogen aufgebauter Headless-Storefront ist strukturell KI-Commerce-ready: API-first, schnell und strukturiert-Daten-reich. Aber bevor du dich vollständig für einen Headless-Build verpflichtest, optimiere dein aktuelles Liquid-Theme zuerst. Viele Marken schließen 70% der Performance-Lücke bei 10% der Kosten.
SEO
Die Frage, die in jedem Headless-Gespräch gestellt wird: wird es unsere Suchranking schaden? Es wird nicht, wenn die Migration richtig durchgeführt wird. Es wird helfen, wenn sich die Leistung deutlich verbessert.
Zwei Anforderungen sind nicht verhandelbar: Server-Side-Rendering ist obligatorisch. Sowohl Hydrogen als auch Next.js unterstützen SSR. Suchmaschinen erhalten vollständig gerendertes HTML, identisch mit einer traditionell server-gerenderten Seite. Client-Side-Only-Rendering ist ein SEO-Risiko, das keine kompetente Agentur 2026 ausliefern sollte.
Strukturierte Daten müssen explizit implementiert werden. Native Shopify-Themes generieren JSON-LD für Produkte und Sammlungen automatisch, aber in einem Headless-Build bist du dafür verantwortlich. Siehe den Shopify Schema Markup Leitfaden für Implementierungsdetails.
KI und redaktionelle Workflows
Wo Headless sich abheben: benutzerdefinierte KI. Ein großer Teil der interessantesten KI-Tools im Moment wird nicht als Shopify-App verpackt: benutzerdefinierte Agenten, KI-gestützte Suche, Personalisierungs-Engines, Content-Generierungs-Pipelines. Das Erstellen von etwas anderem als dem, was Shopify nativ bietet, erfordert API-Endpoints und Kontrolle über die Server-Umgebung. Headless hat diese Infrastruktur bereits.
Die Kehrseite ist redaktionelle Komplexität. Liquid bringt dich schneller und mit weniger Aufwand zu einer guten redaktionellen Erfahrung. Headless erreicht ein höheres Niveau, aber nur wenn die redaktionelle Komplexität eine Investition in ein vollständig benutzerdefiniertes CMS-Setup rechtfertigt.
App-Ökosystem
Dies ist das am meisten unterschätzte Risiko. Einige Shopify-Apps funktionieren sofort über die Storefront API. Viele andere erfordern benutzerdefinierte Integration, weil sie für Liquid-Themes gebaut wurden. Überprüfe die Dokumentation jeder App auf Headless-Kompatibilität, bevor du dich zu einer Hydrogen-Migration verpflichtest.
Wenn Headless wirklich Sinn macht
Drei separate Agenturen, die zusammen Hunderte von Shopify-Builds gebaut haben, sagen dasselbe: Die meisten Marken, die nach Headless fragen, brauchen es nicht.
Etwa 75% der Marken, die einen Headless-Wunsch äußern, werden besser von nativem Shopify Plus bedient. Headless ist kein Upgrade. Es ist eine andere Architektur mit unterschiedlichen Kompromissen, und die falsche Wahl kostet sechsstellige Beträge und Monate Runway ohne sinnvollen Nutzen.
Headless macht Sinn, wenn du konkrete Versionen dieser Probleme hast:
- Mehrere Kundentouchpoints: Du musst einheitliche Commerce-Erfahrungen über Web, Mobile Apps, In-Store-Kiosks, Social-Kanäle und aufstrebende Plattformen hinweg liefern.
- Internationale Expansion: Deine Marke expandiert in neue Märkte, die lokalisierte Storefronts, verschiedene Zahlungsmethoden oder regionsspezifische Compliance erfordern.
- Komplexe interaktive Erfahrungen: Konfiguratoren, AR Try-On, komplexe Personalisierungs-Engines, Multi-Brand-Portfolios unter einem Frontend. Alles, wo der Storefront 30%+ React-App ist, 70% Commerce.
- Dedizierte Entwicklungsressourcen: Du hast etablierte interne Technologie- und Produkt-Teams mit einer starken Vision und Appetit, komplexe Probleme zu lösen.
Echte Zahlen aus der Produktion: Denham migrierte von Salesforce Commerce Cloud zu Headless Shopify und erreichte 3x schneller. Velerottis Headless-Storefront erreicht einen Lighthouse-Score über 80, während ein Konfigurator mit über 100 Fahrrad-Kombinationen in vier Sprachen läuft. Diese Ergebnisse sind echt, erforderten aber den richtigen Use-Case und ernsthafte Engineering-Investitionen.
Wahl deines Frameworks: Hydrogen vs. Next.js
Hydrogen + Oxygen ist der Weg des geringsten Widerstands, wenn du dich auf lange Sicht an Shopify gebunden bleiben möchtest. Es bietet das beste Caching für Shopify-Daten, die wenigsten seltsamen Edge Cases und die geringsten Hosting-Kostüberraschungen.
Next.js + Vercel ist die richtige Wahl, wenn du ein bestehendes React-Team, eine komplexe Content/Marketing-Website hast oder Commerce mit einem schweren CMS wie Sanity oder Contentful kombinierst.
Wähle Hydrogen, wenn das Projekt Commerce-first ist und du die engste Shopify-Integration mit dem geringsten Wartungsaufwand möchtest. Wähle Next.js, wenn du umfangreiche redaktionelle Inhalte, komplexe Page-Routing oder tiefe Integration mit Non-Shopify-Systemen benötigst. 2026 deckt Hydrogen die Mehrheit der Use-Cases ab; standardmäßig daran festhalten und nur zu Next.js wechseln, wenn es einen konkreten technischen Grund gibt.
Für Teams, die mit Vue oder Svelte arbeiten, funktioniert der Framework-agnostische Kern des Hydrogen-Toolkits mit Next.js, React Router, SvelteKit, Astro, SolidStart oder Nuxt. React-Bindings werden heute ausgeliefert; andere Frameworks verwenden die Core-Primitives direkt. Es läuft überall dort, wo du fetch aufrufen kannst: Oxygen, Vercel, Cloudflare Workers, Node oder Deno.
| Dimension | Hydrogen + Oxygen | Next.js + Vercel | Liquid Theme (Shopify Plus) |
|---|---|---|---|
| Best geeignet für | Commerce-first Builds, die langfristig auf Shopify bleiben | Umfangreiche redaktionelle Inhalte oder bestehendes React-Team | Die meisten Marken unter 3 Millionen Euro/Jahr Umsatz |
| Hosting-Kosten | Kostenlos auf allen bezahlten Shopify-Plänen | Vercel-Preisgestaltung gilt (variiert je nach Nutzung) | Im Shopify-Plan enthalten |
| Shopify API Integration | Engste native Integration, bestes Caching | Gut, erfordert aber mehr manuelle Verdrahtung | Nativ, keine API-Schicht erforderlich |
| Anfängliche Build-Kosten (typisch) | 30.000 bis 100.000+ Euro | 40.000 bis 150.000+ Euro | 5.000 bis 30.000 Euro |
| Redaktioneller Workflow | Erfordert Headless CMS Setup | Stark mit Sanity, Contentful, etc. | Integrierter Theme-Editor, geringe Developer-Abhängigkeit |
Die echten Kosten für Headless
Budget-Erwartungen sind wichtig. Dies sind echte Bereiche von Praktikern, nicht von Agentur-Marketing-Seiten.
Anfängliche Build-Kosten liegen zwischen 30.000 und 100.000+ Euro für Hydrogen + Oxygen und 40.000 bis 150.000+ Euro für Next.js + Storefront API Ansätze. Laufende Entwicklungs-Retainer-Kosten 2.000 bis 8.000 Euro pro Monat. Frontend-Hosting über Oxygen ist kostenlos auf Shopify-Plänen außer Starter. Ein Headless CMS wie Sanity kostet 0 bis 500 Euro pro Monat je nach Nutzung. Die gesamten 12-Monats-Kosten für einen Hydrogen-basierten Headless-Storefront liegen typischerweise zwischen 80.000 und 200.000+ Euro.
Wann flippt die ROI? Wenn deine Marke 5 Millionen+ Euro pro Jahr online macht, bedeutet eine Steigerung der Konversionsrate um 25% 1,25 Millionen Euro mehr Umsatz, der sich selbst amortisiert. Aber wenn du 200.000 Euro pro Jahr machst, ergibt derselbe Anstieg 50.000 Euro, was nicht einmal die anfänglichen Build-Kosten deckt.
Die Migrations-Checkliste
Falls du entschieden hast, dass Headless richtig ist, sind dies die Schritte, die bestimmen, ob das Projekt erfolgreich ist oder scheitert:
- App-Kompatibilität auditieren. Liste jede Shopify-App auf, die du verwendest, und bestätige Headless-Unterstützung, bevor du eine Code-Zeile schreibst.
- Den Redirect-Plan vor dem Launch, nicht während, planen. Der Redirect-Plan ist das höchste Risiko-Item in jeder Migration. Jede URL von deiner alten Website braucht eine 301-Umleitung zu ihrem neuen Äquivalent. Dies ist der häufigste SEO-Fehlerpunkt, Headless oder nicht.
- Strukturierte Daten explizit implementieren. Es ist nicht automatisch in einem Headless-Build.
- SSR von Tag eins einrichten. Client-Side-Only-Rendering ist nicht akzeptabel für die Produktion.
- CMS vor Baubeginn wählen. Dein Marketing-Team braucht einen Content-Workflow. Headless ohne einen zu gehen schafft Developer-Abhängigkeit für jede Copy-Änderung.
- Upgrade auf die Storefront API 2026-04. Das April 2026 Hydrogen-Release enthält zwei Breaking Changes, wie Hydrogen die Storefront API Proxy und Consent Tracking verarbeitet. Der Storefront API Proxy ist nun immer aktiviert. Falls du eine ältere Hydrogen-Version verwendest, führe
npx shopify hydrogen upgradeaus, um aktuell zu bleiben.
Für einen tieferen Blick darauf, wie ein Shopify Headless Developer diese Builds angehen, werden die Entscheidungen sehr projektspezifisch. Die Framework-Wahl, CMS-Auswahl und App-Kompatibilität-Audit sind die drei Variablen, die Kosten und Timeline mehr als alles andere beeinflussen.
Das Fazit
Headless Commerce ist die richtige Architektur für eine spezifische Menge von Marken: diejenigen mit echter Multi-Channel-Komplexität, einem dedizierten Engineering-Team und Umsatz, der die Investition rechtfertigt. Für alle anderen schließt ein gut gebauter Liquid-Storefront auf Shopify Plus die meisten Performance- und Flexibilitätslücken bei einen Bruchteil der Kosten und Komplexität.
Die Entscheidung ist nicht "ist Headless besser?". Die Entscheidung ist "löst Headless ein Problem, das ich wirklich habe?"
Häufig gestellte Fragen
Was ist Headless Commerce und wie unterscheidet es sich von einem Standard-Shopify-Store?
Headless Commerce entkoppelt den Frontend-Storefront vom Backend-Commerce-Engine. In einem Standard-Shopify-Store sind die beiden eng in einem Liquid-Theme gekoppelt. In einem Headless-Setup ruft eine separate React-Anwendung (typischerweise mit Hydrogen gebaut) Shopify über die GraphQL Storefront API auf, um Katalog-, Warenkorb- und Checkout-Daten abzurufen.
Brauche ich Shopify Plus für Headless Commerce?
Die Storefront API ist technisch auf allen bezahlten Shopify-Plänen verfügbar. In der Praxis läuft fast jeder Headless-Build auf Shopify Plus, da Checkout-Anpassung, B2B-Funktionen und das Niveau der erforderlichen Engineering-Investition alle Plus-Gebiet sind. Oxygen-Hosting ist kostenlos auf jedem bezahlten Shopify-Plan enthalten, nicht nur Plus.
Schadet der Wechsel zu Headless der SEO?
Es wird nicht der SEO schaden, wenn der Build Server-Side-Rendering (SSR) verwendet und eine komplette 301-Redirect-Map vor dem Launch implementiert wird. Es kann die SEO verbessern, wenn die Performance-Gewinne bedeutsam sind. Das Hauptrisiko ist das Ausliefern eines Client-Side-Only-Rendering-Setups, das ein SEO-Problem ist, das keine kompetente Agentur 2026 durchlassen sollte.