Headless Commerce mit Shopify: Wann lohnt sich der Umstieg?

"Headless" ist eines der Wörter, die in E-Commerce-Beratungsgesprächen inzwischen fast automatisch fallen – oft ohne genau zu klären, ob es für den jeweiligen Shop überhaupt der richtige Schritt ist. Ein nüchterner Blick auf Vor- und Nachteile hilft mehr als der Trend allein.

Was Headless Commerce eigentlich bedeutet

Bei einem klassischen Shopify-Theme sind Frontend (das, was Kund:innen sehen) und Backend (Produktverwaltung, Bestellungen, Zahlungen) fest miteinander verbunden. Bei Headless Commerce wird das Frontend komplett von Shopify getrennt: Shopify bleibt als Backend über die Storefront API oder Hydrogen bestehen, das eigentliche Einkaufserlebnis wird als eigene Anwendung gebaut – typischerweise mit Next.js oder Remix.

Wichtig ist die Abgrenzung zu einem "normalen" Theme mit viel JavaScript: Auch moderne Shopify-Themes nutzen client-seitiges JavaScript für Interaktivität, bleiben aber serverseitig durch Shopifys eigenes Liquid-Rendering bestimmt. Bei echtem Headless Commerce übernimmt eine komplett eigene Anwendung das Rendering – Shopify liefert nur noch die Daten über eine API, hat aber keinen Einfluss mehr auf HTML, Layout oder Ladeverhalten der ausgelieferten Seite.

Hydrogen und Oxygen: Shopifys eigener Headless-Stack

Wer sich für Headless entscheidet, muss nicht zwangsläufig alles selbst zusammensetzen. Shopify bietet mit Hydrogen ein eigenes, auf React Server Components und Remix basierendes Framework speziell für Headless-Storefronts an, kombiniert mit Oxygen als dazugehöriger, global verteilter Hosting-Plattform. Der Vorteil: Hydrogen ist eng auf die Storefront API abgestimmt, bringt vorgefertigte Komponenten für Warenkorb, Produktseiten und Checkout-Übergabe mit und reduziert so einen Teil der Erstentwicklungsarbeit gegenüber einem komplett freien Next.js-Aufbau.

Der Kompromiss: Man bindet sich enger an Shopifys eigene Architekturentscheidungen und Release-Rhythmus, gewinnt dafür aber Support aus erster Hand und tendenziell schnellere Kompatibilität mit neuen Storefront-API-Funktionen. Für Teams, die volle Kontrolle über Hosting, Caching-Strategie und Frontend-Stack behalten wollen, bleibt ein freier Aufbau mit Next.js auf eigener Infrastruktur (z. B. Vercel oder einem eigenen Server) die Alternative – mit entsprechend mehr Eigenverantwortung für Themen, die Hydrogen sonst mitliefert.

Die echten Vorteile

• Volle Design-Freiheit: keine Theme-Grenzen, jede gewünschte Interaktion ist technisch machbar
• Performance-Potenzial: gezieltes Caching, Server-Side Rendering und minimaler JavaScript-Ballast sind einfacher zu erreichen als bei generischen Themes
• Omnichannel: dieselbe Produktdatenbank kann für Web-Shop, App und weitere Touchpoints genutzt werden
• Content-getriebene Erlebnisse: Storytelling, redaktionelle Inhalte und Shop nahtlos in einer Anwendung kombinierbar

Die Kosten, über die selten gesprochen wird

Headless bedeutet auch: Alles, was ein Theme bisher "kostenlos" mitgeliefert hat, muss selbst gebaut oder bewusst über eine App-Alternative gelöst werden. Dazu zählen Suche, Filterlogik, SEO-Metadaten, strukturierte Daten, Checkout-Anbindung und nicht zuletzt die laufende Wartung einer eigenständigen Anwendung neben dem Shopify-Backend.

• Suche & Filterung: Ein Theme bringt eine – wenn auch oft simple – Produktsuche direkt mit. Headless heißt entweder Eigenbau oder Integration eines dedizierten Suchdienstes (z. B. Algolia oder Elasticsearch), inklusive laufender Kosten und eigener Indexierungslogik.
• SEO-Grundlagen: Meta-Tags, strukturierte Daten (Schema.org), Sitemaps und Canonical-URLs, die ein Theme automatisch mitliefert, müssen in einer eigenen Anwendung bewusst nachgebaut werden – ein häufig unterschätzter Aufwand, der bei Fehlern direkt Sichtbarkeit in Suchmaschinen kostet.
• App-Kompatibilität: Viele Shopify-Apps setzen auf Theme-Erweiterungspunkte (App-Blöcke, Theme-App-Extensions) auf. Im Headless-Setup funktionieren diese nicht automatisch – jede gewünschte App-Integration muss einzeln geprüft und oft über die App-eigene API neu angebunden werden.
• Laufende Wartung: Eine eigenständige Frontend-Anwendung braucht eigene Dependency-Updates, eigenes Monitoring und eigene Deployment-Pipelines – Aufgaben, die bei einem Shopify-Theme schlicht nicht anfallen, weil Shopify die Plattform selbst wartet.

Typische Projektkosten und Zeitrahmen

Konkrete Zahlen sind naturgemäß projektabhängig, aber aus unseren eigenen Projekten und Beratungsgesprächen lassen sich grobe Richtwerte ableiten, die für eine erste Einordnung helfen:

• Kleines Headless-Projekt (eine Kampagnen-Landingpage oder ein Produktkonfigurator neben bestehendem Theme): einige Wochen Entwicklungszeit, meist im niedrigen bis mittleren fünfstelligen Bereich
• Vollständiger Headless-Storefront mit Hydrogen und Standardfunktionsumfang (Katalog, Warenkorb, Checkout-Übergabe, Suche): mehrere Monate, üblicherweise ein Team aus 2–4 Entwickler:innen über die Projektlaufzeit
• Komplexer Headless-Storefront mit individueller Suche, Multi-Market-Setup und umfangreicher App-Integration: sechs bis zwölf Monate, mit entsprechend höherem Budget und laufenden Betriebskosten für Hosting, Suchdienst und Monitoring

Diese Zahlen sind bewusst grob – die entscheidende Frage vor jeder Budgetplanung ist nicht "was kostet Headless generell", sondern "welcher Funktionsumfang ist für unseren Shop tatsächlich notwendig". Ein klar abgegrenzter Funktionsumfang zu Projektbeginn ist der zuverlässigste Hebel, um Zeit- und Budgetrahmen realistisch zu halten.

Eine ehrliche Entscheidungsmatrix

Ein pragmatischer Mittelweg

Nicht jeder Shop muss sich zwischen "ganz klassisch" und "voll headless" entscheiden. In vielen Projekten ist ein hybrider Ansatz sinnvoller: das bestehende Theme für Kernbereiche behalten und nur einzelne, besonders individuelle Seiten (z. B. eine Landingpage-Kampagne oder ein Konfigurator) als eigenständige Anwendung umsetzen. So lassen sich die Vorteile punktuell nutzen, ohne das gesamte Projekt in seiner Komplexität zu verdoppeln.

Ein konkretes Beispiel aus einem eigenen Projekt: Ein Kunde mit saisonalem Geschäft wollte für eine große Jahreskampagne ein aufwendiges, story-getriebenes Einkaufserlebnis – interaktive Produktauswahl, eingebettete Videos, dynamische Preisberechnung je nach Konfiguration. Statt den gesamten Shop headless umzubauen, haben wir nur diese eine Kampagnenseite als eigenständige Next.js-Anwendung gebaut, die über die Storefront API auf dieselben Produktdaten zugreift und nahtlos in den bestehenden, Theme-basierten Checkout übergibt. Entwicklungszeit: wenige Wochen statt Monate, weil der Rest des Shops unverändert blieb.

Fazit

Headless Commerce ist ein mächtiges Werkzeug – aber kein Statussymbol. Die richtige Frage ist nicht "ist Headless modern genug für uns?", sondern "löst Headless ein konkretes Problem, das wir mit einem Theme nicht lösen können?". Wenn die Antwort ja ist, lohnt sich der Aufwand. Wenn nicht, ist ein gut konfiguriertes Theme oft die wirtschaftlich klügere Wahl.

Am Ende ist die Entscheidung selten rein technisch – sie ist eine Ressourcenfrage. Headless verschiebt Aufwand, den Shopify bei einem Theme übernimmt, dauerhaft in Ihr eigenes Team oder Ihre Agentur. Wer diese laufende Verantwortung bewusst einplant und nicht nur den initialen Projektstart betrachtet, trifft am Ende die belastbarere Entscheidung.