Headless Commerce: Was es ist, wie es funktioniert und ob sich der Umstieg lohnt

Headless Commerce trennt das sichtbare Frontend deines Shops vom Backend. Produktdaten, Bestelllogik und Checkout laufen im Hintergrund. Das Frontend, also alles was dein Kunde sieht, wird separat gebaut und kommuniziert über APIs mit dem Backend. Das Ergebnis: volle Design-Freiheit, schnellere Ladezeiten und die Möglichkeit, auf mehreren Kanälen gleichzeitig zu verkaufen.

Klingt verlockend. Aber für die meisten Shopify-Händler ist Headless Commerce der falsche nächste Schritt. In diesem Artikel erkläre ich dir, wann sich der Umstieg wirklich lohnt, was er kostet und wie du in 7 Punkten prüfst, ob dein Store bereit dafür ist. Ohne Agentur-Verkaufspitch, ohne Hype.

Was ist Headless Commerce?

Headless Commerce ist eine E-Commerce-Architektur, bei der das Frontend (was dein Kunde sieht) vom Backend (Produktdaten, Bestellungen, Zahlungen) getrennt wird. Beide Teile kommunizieren über eine API. Du kannst das Frontend komplett frei gestalten, ohne an ein Theme-System gebunden zu sein.

Stell dir ein Restaurant vor. In einem klassischen Shopify-Setup sind Koch und Kellner eine Person. Der Koch bestimmt, wie das Essen serviert wird. Bei einem Headless-Setup hast du einen Koch (Backend) und einen separaten Kellner (Frontend). Der Koch bereitet alles vor, der Kellner entscheidet frei, wie er es dem Gast präsentiert.

Der Name kommt daher, dass du dem System den "Kopf" abnimmst. Der Kopf ist das Frontend, die Darstellungsschicht. Was übrig bleibt, ist ein Backend, das seine Daten über eine Schnittstelle bereitstellt. Egal ob Website, App, Smartwatch oder digitales Display im Laden.

Bei einem klassischen Shopify-Store (Monolith) sind Frontend und Backend fest verbunden. Du wählst ein Theme, passt es an, und Shopify kümmert sich um alles. Das funktioniert für die meisten Shops gut. Beim Headless-Ansatz baust du dein eigenes Frontend von Grund auf und holst dir nur die Daten aus Shopify, die du brauchst.

Wie funktioniert Headless Commerce technisch?

Technisch besteht ein Headless-Setup aus drei Schichten: dem Frontend-Framework, einer API-Schicht und dem Backend. Das Frontend wird mit einem JavaScript-Framework wie React gebaut, die API verbindet beide Seiten, und Shopify bleibt als Backend bestehen.

Die Shopify Storefront API ist das Verbindungsstück. Sie nutzt GraphQL als Abfragesprache. GraphQL ist eine von Facebook entwickelte Technologie, mit der du gezielt nur die Daten abfragst, die du brauchst. Statt kompletter Produktseiten holst du dir nur Preis, Titel und Verfügbarkeit.

Für das Frontend hast du zwei populäre Optionen:

• Shopify Hydrogen: Shopifys eigenes React-Framework, basierend auf Remix. Wird auf Shopify Oxygen gehostet, Shopifys eigener Hosting-Infrastruktur für Headless-Storefronts.
• Next.js: Ein React-Meta-Framework von Vercel. Flexibler als Hydrogen, aber du kümmerst dich selbst um Hosting (etwa bei Vercel oder Netlify).

Der Ablauf bei einem Seitenaufruf: Ein Kunde öffnet deinen Store. Das Frontend rendert die Seite, fragt dabei über die Storefront API die aktuellen Produktdaten ab und zeigt sie an. Der Checkout läuft weiterhin über Shopify. Du tauschst also die Darstellungsschicht aus, nicht die gesamte Shop-Infrastruktur.

Vorteile von Headless Commerce

Die drei größten Vorteile eines Headless-Setups sind schnellere Ladezeiten, komplette Design-Freiheit und die Möglichkeit, über mehrere Kanäle aus einem Backend zu verkaufen. Ob diese Vorteile deine Investition rechtfertigen, hängt von deiner konkreten Situation ab.

Performance und Conversion: Mit Static Site Generation (SSG) werden Seiten zur Build-Zeit vorgerendert. Das Ergebnis sind extrem schnelle Ladezeiten. Laut Google verbessern gute Core Web Vitals die Nutzererfahrung messbar. Shopify selbst hat Daten veröffentlicht, die zeigen, dass eine Sekunde schnellere Ladezeit bis zu 7.000 $ mehr Tagesumsatz bedeuten kann. Bei einem Store mit 500 € Tagesumsatz relativiert sich das allerdings schnell.

Design-Freiheit: Kein Theme-System schränkt dich ein. Du kannst jede erdenkliche Interaktion bauen, jedes Layout umsetzen, jede Animation einbauen. Produktkonfiguratoren, 3D-Ansichten, interaktive Lookbooks. Alles was du dir vorstellen kannst, ist technisch machbar.

Omnichannel aus einem Backend: Du verkaufst über deine Website, eine native App, einen Kiosk im Laden und eine Apple Watch. Alle greifen auf dasselbe Shopify-Backend zu. Preis- oder Bestandsänderungen sind sofort überall sichtbar. Für Marken mit echtem Omnichannel-Bedarf ist das ein starkes Argument.

Unabhängige Releases: Dein Frontend-Team kann Updates veröffentlichen, ohne das Backend anzufassen. Das beschleunigt die Entwicklung und reduziert das Risiko, dass ein Frontend-Update die Bestellabwicklung stört.

Nachteile und reale Kosten

Ein Headless-Projekt kostet dich realistisch zwischen 15.000 und 80.000 € für die Erstimplementierung und verlangt dauerhaft ein technisches Team oder eine Agentur. Das ist der Teil, über den die meisten Artikel nicht ehrlich sprechen.

Entwicklungskosten: Ein einfacher Hydrogen-Store mit Standard-Features (Produktseiten, Kollektion, Warenkorb, Checkout) startet bei etwa 15.000 €. Ein individuelles Setup mit Produktkonfigurator, mehrsprachigem Content über ein Headless CMS wie Contentful und Custom-Checkout-Flow kann schnell 50.000-80.000 € erreichen. Diese Zahlen basieren auf aktuellen Agenturpreisen im DACH-Raum (Stand: März 2026).

Laufende Wartung: Dein Frontend ist jetzt Custom-Code. Updates, Bug-Fixes, neue Features, alles braucht Entwickler. Rechne mit 1.500-5.000 € monatlich für Wartung und Weiterentwicklung. Bei einem klassischen Shopify-Theme zahlst du dafür null.

Time-to-Market: Wo du ein Theme in einer Woche anpasst, brauchst du für eine Headless-Implementierung 2-6 Monate. Jedes neue Feature dauert länger, weil du es selbst bauen musst statt eine App zu installieren.

App-Kompatibilität: Viele Shopify-Apps funktionieren im Headless-Setup nicht oder nur eingeschränkt. Apps, die Theme-Code injizieren (Reviews, Upsells, Pop-ups), müssen als API-Integration neu eingebunden werden. Das kostet zusätzlich Zeit und Geld.

Komplexität: Statt einem System verwaltest du jetzt Frontend-Framework, Hosting, CMS, API-Layer und Backend separat. Mehr Systeme bedeuten mehr potenzielle Fehlerquellen.

Headless Commerce vs. klassisches Shopify: Was ist wann besser?

Für Shopify-Stores unter 1-2 Mio. € Jahresumsatz ist ein optimiertes klassisches Setup in den allermeisten Fällen die bessere Wahl. Der Headless-Ansatz lohnt sich erst, wenn du an konkrete Grenzen des Theme-Systems stößt und das Budget für eine professionelle Implementierung hast.

Ich sehe das regelmäßig: Händler mit 300.000 € Jahresumsatz wollen headless gehen, weil sie einen Vortrag auf einer Konferenz gehört haben. Dann investieren sie 40.000 € in eine Hydrogen-Storefront und merken nach sechs Monaten, dass ihr eigentliches Problem die Produktfotografie war. Oder die Anzeigenstrategie. Oder die E-Mail-Automation.

Wann klassisches Shopify die bessere Wahl ist:

• Dein Jahresumsatz liegt unter 1 Mio. €
• Du hast kein eigenes Entwickler-Team
• Dein Store hat ein Standard-Layout (Produkte, Kollektion, Warenkorb)
• Shopify 2.0 mit Custom Sections und Metafields reicht für deine Anforderungen

Wann der Headless-Ansatz sich lohnen kann:

• Dein Jahresumsatz liegt über 2 Mio. € und wächst
• Du hast spezifische UX-Anforderungen, die kein Theme abbilden kann
• Du verkaufst über mehr als zwei Kanäle (Web + App + POS)
• Du hast Budget für 15.000+ € Erstinvestition plus laufende Wartung
• Performance-Probleme trotz Theme-Optimierung limitieren deinen Umsatz

Shopify 2.0 hat den Graubereich dazwischen stark verkleinert. Mit Online Store 2.0, App Extensions und Metafields kannst du heute Dinge umsetzen, für die du vor drei Jahren headless hättest gehen müssen.

Shopify Hydrogen: Headless direkt von Shopify

Shopify Hydrogen ist Shopifys offizielles React-Framework für Headless-Storefronts. Es basiert auf Remix, wird aktiv weiterentwickelt und läuft auf Shopify Oxygen, Shopifys eigenem Hosting. Für Shopify-Händler ist Hydrogen der einfachste Einstieg in die Headless-Welt.

Was Hydrogen bietet:

• Vorgefertigte Komponenten für Produkte, Warenkorb und Checkout
• Server-Side Rendering (SSR) und Streaming für schnelle Ladezeiten
• Direkte Integration mit der Shopify Storefront API
• Kostenloses Hosting über Oxygen (inklusive bei Shopify Plus)

Hydrogen vs. Next.js: Hydrogen hat den Vorteil, dass es speziell für Shopify gebaut ist. Die Storefront API-Anbindung funktioniert out-of-the-box. Next.js ist flexibler und hat eine größere Community, erfordert aber mehr Setup-Arbeit für die Shopify-Integration. Wenn du ausschließlich mit Shopify arbeitest, ist Hydrogen der logische Startpunkt. Wenn du Daten aus mehreren Quellen zusammenführst (verschiedene CMSe, externe Datenbanken), gibt dir Next.js mit Vercel oder Netlify mehr Spielraum.

Wichtig zu wissen: Hydrogen setzt Shopify Plus voraus, wenn du Oxygen nutzen willst. Shopify Plus kostet ab 2.300 $/Monat. Du kannst Hydrogen auch selbst hosten, aber dann entfällt der Oxygen-Vorteil.

Ist Headless Commerce gut für SEO?

Ein Headless-Setup kann dein SEO verbessern, wenn die Implementierung stimmt. Falsch umgesetzt, kann es deine Rankings zerstören. Der Schlüssel liegt im Server-Side Rendering. Ohne SSR sieht Google unter Umständen eine leere Seite.

Das Potenzial: Mit SSG oder SSR erreichst du extrem gute Core Web Vitals. Seiten laden in unter einer Sekunde. Google belohnt schnelle, stabile Seiten mit besseren Rankings. Für Shops mit tausenden Produktseiten kann das einen messbaren Unterschied machen.

Das Risiko: Wenn dein Frontend nur Client-Side Rendering (CSR) nutzt, rendert der Browser die Seite erst nach dem Laden des JavaScript. Google kann JavaScript zwar rendern, macht das aber verzögert und nicht immer vollständig. Das bedeutet: Seiten werden möglicherweise nicht oder falsch indexiert. Interne Links gehen verloren, Meta-Tags fehlen.

Praxis-Regel: Setze bei einem Headless-Projekt immer auf SSR oder SSG. Nie auf reines CSR. Hydrogen macht das standardmäßig richtig. Bei einem Custom-Next.js-Setup musst du aktiv darauf achten.

Ein weiterer Punkt, den viele übersehen: Deine bestehende URL-Struktur. Bei einer Migration auf Headless ändern sich häufig URLs. Ohne saubere 301-Redirects verlierst du deine aufgebaute SEO-Authority. Plane das in dein Migrationsprojekt ein.

7-Punkte Headless-Readiness-Check

Dieser Check hilft dir, objektiv zu bewerten, ob der Umstieg auf Headless für deinen Shopify-Store sinnvoll ist. Beantworte jede Frage ehrlich. Wenn du weniger als 5 von 7 Punkten mit Ja beantworten kannst, ist Headless wahrscheinlich nicht der richtige Schritt.

Ich habe diesen Check aus über 10 Jahren E-Commerce-Erfahrung und dutzenden Gesprächen mit Händlern entwickelt, die vor genau dieser Entscheidung standen. Einige davon haben headless umgestellt und es bereut. Andere haben zum richtigen Zeitpunkt gewechselt und massiv davon profitiert.

1. Umsatz-Schwelle: Liegt dein Jahresumsatz bei mindestens 1-2 Mio. €? Headless-Kosten (15.000-80.000 € initial, 1.500-5.000 €/Monat laufend) müssen sich refinanzieren.

2. Technisches Team: Hast du Zugang zu React-Entwicklern, sei es intern oder über eine Agentur? Ohne technische Ressourcen bist du nach dem Launch aufgeschmissen.

3. UX-Limitierung: Stößt du an konkrete Grenzen des Shopify-Theme-Systems? Wenn ja, welche genau? "Ich will was Besonderes" reicht nicht. Es muss ein spezifisches Problem geben, das Themes nicht lösen können.

4. Omnichannel-Bedarf: Verkaufst du über mehr als zwei Kanäle und brauchst ein einheitliches Backend? Web plus nativer App, POS, Marktplätze?

5. Performance-Problem: Hast du trotz Theme-Optimierung Performance-Probleme, die deine Conversion Rate messbar drücken?

6. Timeline-Bereitschaft: Kannst du 3-6 Monate Implementierungszeit einplanen, ohne dass dein laufendes Business darunter leidet?

7. Wartungsplan: Hast du ein Budget und einen Plan für die laufende Wartung nach dem Launch?

Auswertung: Bei 5-7 Ja-Antworten ist der Headless-Umstieg eine realistische Option. Bei 3-4 solltest du erst andere Hebel ausschöpfen (Theme-Optimierung, App Extensions, Metafields). Bei 0-2 ist Headless der falsche Fokus. Investiere das Geld lieber in Marketing, Produktfotografie oder Conversion-Optimierung.

Fazit