Shopify Headless: Was es ist, was es kostet und wann es sich lohnt

Shopify Headless: Was es ist, was es kostet und wann es sich lohnt

Shopify headless zu betreiben bedeutet, dass Shopify weiterhin Produkte, Lagerbestand, Bestellungen und den Checkout verwaltet, während Ihr Team den für Kunden sichtbaren Storefront als separate Anwendung entwickelt. Es lohnt sich, wenn Ihr Einkaufserlebnis etwas benötigt, das sich mit einem Theme nicht sinnvoll umsetzen lässt, und Ihr Budget eine dauerhaft eingeplante Entwicklungsressource abdeckt. Als Abkürzung zu höherer Geschwindigkeit oder als Neugestaltung unter anderem Namen lohnt es sich nicht. Dieser Leitfaden erläutert, wie die Architektur funktioniert, welche Aufgaben nach dem Launch auf Sie zukommen und wie Sie die Entscheidung treffen, bevor Sie eine Leistungsbeschreibung unterzeichnen.

Wir entwickeln und unterstützen bei Ridiculous Engineering individuelle Software und Storefronts. Deshalb richtet sich dieser Text an die Person, die das Budget genehmigt, nicht an die Person, die GraphQL schreibt.

Die wichtigsten Erkenntnisse

• Headless trennt den Storefront (das Frontend) vom Commerce-Backend von Shopify. Sie wählen Framework und Hosting. Shopify übernimmt weiterhin den Checkout.
• Die eigene Dokumentation von Shopify besagt, dass der Aufbau und Betrieb eines headless Storefronts mehr kostet als ein Theme und dass Sie nach dem Launch Entwickler für die Wartung benötigen.
• Behandeln Sie die laufende Pflege als dauerhaft eingeplanten Kostenpunkt: Hosting, Monitoring, Framework-Upgrades, Änderungen an API-Versionen und Entwicklungszeit.
• Entscheiden Sie sich für Headless, wenn ein klarer Bedarf an einem bestimmten Erlebnis, Kanal oder einer bestimmten Integration besteht. Entscheiden Sie sich nicht in der Hoffnung für Headless, dass es automatisch schneller ist.
• Eine kurze Analysephase mit einer Prüfung Ihres aktuellen Themes und Ihrer Apps ist der kostengünstigste Weg, herauszufinden, ob Headless zu Ihnen passt.

Inhaltsverzeichnis

• Was Shopify Headless tatsächlich bedeutet
• Wie die Architektur zusammenspielt
• Wann Headless passt und wann nicht
• Die Geschwindigkeitsfrage
• Welche Aufgaben nach dem Launch auf Sie zukommen
• Ein praxisnaher Ablauf für ein Headless-Projekt
• Headless-Storefront oder Theme: eine Entscheidungstabelle
• Shopify Headless und Ihr Content-System
• Wie wir mit Führungskräften daran arbeiten
• FAQ
• Quellen

Was Shopify Headless tatsächlich bedeutet

Headless Commerce trennt das Frontend Ihres Storefronts von seinem Backend. Laut der Entwicklerdokumentation von Shopifyentwickeln Sie das Frontend, während die APIs von Shopify im Hintergrund den Commerce-Bereich abwickeln. Sie wählen Stack, Framework und Hosting. Shopify stellt Produkt-, Kollektions- und Kundendaten sowie Warenkorb, Checkout und internationale Preisgestaltung bereit.

Dies ermöglicht es laut derselben Dokumentation, über Websites, mobile Apps, Spiele, Livestreams und intelligente Geräte zu verkaufen oder Buy Buttons auf bereits vorhandenen Websites einzusetzen. Der „Kopf“ ist alles, womit der Kunde interagiert. Der „Körper“ ist die Commerce-Engine.

Zwei Punkte gehen im Verkaufsgespräch häufig unter:

1. Der Checkout bleibt bei Shopify. Der Leitfaden von Shopify für Unternehmen besagt, dass Kunden ihre Käufe sowohl bei headless als auch bei herkömmlichen Implementierungen über Shopify Checkout abschließen. Ihr individueller Storefront übergibt den Kunden an Shopify, sobald dieser zur Zahlung bereit ist.
2. Headless ist kein Shopify-Produkt, das Sie einfach aktivieren. Es ist eine Entwicklungsmethode. Ihr Team oder ein Partner entwickelt und verantwortet eine echte Anwendung.

Wie die Architektur zusammenspielt

Der Shopify-Leitfaden beschreibt eine Headless-Einrichtung als drei Teile:

• Die Commerce-Engine. Shopify verwaltet Produktkatalog, Bestand, Preise, Bestellungen und Checkout.
• Das Frontend. Entwickler erstellen das Einkaufserlebnis in dem von ihnen gewählten Framework, anstatt Shopifys Theme-System zu verwenden.
• Die API-Schicht. Der Store ruft Produktinformationen ab und aktualisiert den Warenkorb des Kunden über Shopifys Storefront API. Anschließend leitet er den Kunden zum Checkout weiter.

Shopify bietet laut seiner Übersichtsdokumentationzwei Headless-APIs. Die Storefront API stellt Produkte, Kollektionen, die Suche und den Warenkorb bereit und leitet Kunden zum Checkout weiter. Über die Customer Account API können sich Kunden anmelden; außerdem stellt sie ihre Bestellungen, Adressen und ihr Profil bereit.

Shopify stellt außerdem Hydrogen, ein React-Framework für Stores, und Oxygen, Shopifys Hosting-Infrastruktur, bereit. Alternativ können Sie das Commerce-Backend über die Storefront API mit jedem beliebigen Frontend-Framework verbinden. Diese Entscheidung ist für die Einstellung von Mitarbeitern und die langfristige Wartung wichtig: Ein Framework, mit dem Ihr Team bereits vertraut ist, lässt sich kostengünstiger dauerhaft betreiben als eines, das wegen seiner Neuartigkeit ausgewählt wurde.

So sieht die Storefront API in der Praxis aus

Die Storefront API ist ausschließlich GraphQL-basiert. Für Stores gibt es keine REST-Version. Sie verwendet pro Store einen einzigen POST-Endpunkt, und die URL enthält eine datierte API-Version (in der aktuellen Dokumentation wird 2026-10 angegeben). Der tokenlose Zugriff ist für Produkte, Kollektionen, Verkaufspläne, die Suche, Seiten, Blogs, Artikel sowie Lese- und Schreibvorgänge am Warenkorb auf eine Abfragekomplexität von 1.000 begrenzt. Für Produkt-Tags, Metaobjekte, Metafelder, Menüs und Kunden ist eine tokenbasierte Authentifizierung erforderlich.

Das müssen Sie sich nicht merken. Für eine Führungskraft sind zwei Dinge wichtig:

• Versionen sind datiert. Die API wird planmäßig geändert, daher werden Ihre Entwickler regelmäßig Versionen migrieren. Planen Sie dafür ein Budget ein.
• Die Datenmodellierung ist die eigentliche Arbeit. Metafelder und Metaobjekte enthalten die umfangreichen Inhalte, die den Aufbau eines individuellen Stores lohnenswert machen. Dafür benötigen sie eine saubere Struktur und die richtigen Zugriffsrechte.

Wann Headless passt – und wann nicht

Shopifys Dokumentation nennt fünf Fälle, in denen der Aufbau eines Headless-Systems sinnvoll ist:

1. Das Store-Erlebnis kann mit vorhandenen Web- oder Mobilwerkzeugen nicht umgesetzt werden.
2. Ihr Frontend-Stack verwendet Liquid, Shopifys Theme-Sprache, nicht.
3. Sie fügen den Commerce von Shopify zu einer bestehenden Infrastruktur hinzu.
4. Sie verkaufen über Kanäle, die Shopify standardmäßig nicht unterstützt.
5. Sie verwenden ein CMS für Inhalte, die in den Store integriert werden müssen.

Auf derselben Seite wird außerdem darauf hingewiesen, dass das Budget laufende Entwicklung, Tests und Wartung abdecken sollte und dass Führungskräfte API-Abdeckung, App-Kompatibilität, die Bearbeitung von Inhalten, die Performance auf Mobilgeräten und Desktops, operative Zuständigkeiten sowie die Gesamtbetriebskosten bewerten sollten.

In geschäftliche Begriffe übersetzt, ist Headless besonders dann ein starker Kandidat, wenn:

• Ihr Erlebnis das Produkt ist. Ein Produktkonfigurator, ein geführter Kaufprozess, ein stark redaktionell geprägter Katalog oder eine Interaktion, die ein Theme aus seiner vorgesehenen Form bringen würde.
• Sie über eine Website hinaus verkaufen. Eine App, ein Kiosk, ein vernetztes Gerät oder Buy Buttons auf mehreren Angeboten – alle greifen auf ein gemeinsames Backend zu.
• Ihr Content-Team ein eigenes System benötigt. Redaktionelle Inhalte, Kampagnen und Landingpages liegen auf einer Content-Plattform, und der Store ruft sie von dort ab. Unser Beitrag darüber, warum eine Headless-Architektur traditionelle Plattformen überdauert deckt diesen Aspekt ausführlicher ab.
• Sie verfügen über technische Kapazitäten. Mindestens eine Person – intern oder über einen Partner –, die sich mit dem Frontend gut genug auskennt, um es unter Druck zu reparieren.

Es ist kein geeigneter Kandidat, wenn das Hauptziel ein frisches Erscheinungsbild, ein moderater Geschwindigkeitszuwachs oder die Umgehung einer Theme-Einschränkung ist, die sich durch eine kleine Anpassung beheben ließe.

Die Geschwindigkeitsfrage

Geschwindigkeit ist der häufigste Grund, den Führungskräfte für den Wechsel zu Headless nennen. Der Fall ist nachvollziehbar: Eine vierwöchige Untersuchung mobiler Websites in Europa und den USA brachte eine Geschwindigkeitsverbesserung von 0,1 Sekunden mit einer um 8,4 % höheren Konversionsrate im Einzelhandelin Verbindung. Ein sorgfältig auf Performance ausgelegtes individuelles Frontend kann schnell laden und Ihren Entwicklern präzise Kontrolle darüber geben, was an den Browser ausgeliefert wird.

Entscheidend sind die Worte „sorgfältig entwickelt“. Geschwindigkeit entsteht durch Entscheidungen zu Bildern, Skripten, Drittanbieter-Tags und Rendering – nicht durch das Wort Headless. Legen Sie vor der Entwicklung ein messbares Performance-Ziel fest, testen Sie es auf einem Mittelklasse-Smartphone über eine mobile Verbindung und machen Sie es zur Voraussetzung für den Launch. Wenn Sie sehen möchten, wie die mobile Performance mit Suchmaschinen und Konversion zusammenhängt, ist dieser Beitrag zur mobilen Optimierung und SEO im E-Commerce eine gute Ergänzung.

Was nach dem Launch auf Sie zukommt

Dieser Teil verändert die wirtschaftliche Betrachtung grundlegend. Die Shopify-Dokumentation besagt, dass der Aufbau und Betrieb eines Headless-Shops mehr kostet als der eines Themes. Bevor Sie sich festlegen, müssen Sie die zusätzlichen Kosten und die höhere Komplexität akzeptieren und über Entwickler verfügen, die den Shop pflegen.

Die laufenden Aufgaben, abgeleitet aus dem Enterprise-Leitfaden von Shopify und aktuellen Branchenberichten zu Headless-Kosten, sehen folgendermaßen aus:

Dieselbe Berichterstattung liefert einen Punkt, den Sie bei der Planung berücksichtigen sollten: Shops, die 2022 und 2023 zu Headless gewechselt sind, können inzwischen ihre laufenden Kosten erkennen. Die Entwicklung wurde einmalig veranschlagt, doch die Wartung fällt jedes Jahr erneut an, und die native Plattform veröffentlicht fortlaufend Funktionen, die ein individuelles Frontend anschließend nachbilden muss. Der praktische Rat lautet, die laufende Pflege als dauerhaft eingeplanten Budgetposten zu berücksichtigen, nicht als Projektphase.

Apps sind die stille Überraschung

Da ein Headless-Shop das Theme-System nicht verwendet, werden einige Apps, die auf eine Einbindung über das Theme angewiesen sind, nicht einfach in Ihrem neuen Frontend erscheinen. Treueprogramme, Bewertungs-Widgets und Live-Chat sind die üblichen Verdächtigen. Für jede App ist eine Alternative auf App-Ebene oder eine direkte Integration erforderlich, und jede davon erweitert den Projektumfang. Erfassen Sie jede App und jedes Tracking-Skript in Ihrem aktuellen Shop, bevor irgendjemand das Projekt schätzt.

Ein praxisnaher Ablauf für ein Headless-Projekt

Die folgende Reihenfolge würden wir für eine Führungskraft wählen, die die Entscheidung auf eine belastbare Datengrundlage stellen möchte.

1. Prüfen Sie den aktuellen Shop. Dokumentieren Sie jede App, jedes Skript und jedes Drittanbieter-Pixel und vermerken Sie, welche davon Umsatz oder Berichte beeinflussen. Hier wird der verborgene Projektumfang sichtbar – und dieser Schritt wird am häufigsten übersprungen. Bei Ridiculous Engineering arbeiten Kunden von der Analyse an direkt mit erfahrenen Senior Engineers zusammen, sodass das Audit von den Personen durchgeführt wird, die die Umsetzung konzipieren werden.
2. Beziffern Sie den Business Case. Benennen Sie die Interaktion, den Kanal oder die Integration, die ein Theme nicht bereitstellen kann, und welchen Wert sie hat. Wenn Sie sie nicht benennen können, bleiben Sie bei einem Theme.
3. Bereinigen Sie das Datenmodell. Strukturieren Sie Produkt-Metafelder, Metaobjekte und die Kollektionsstruktur in Shopify übersichtlich. Ein individuelles Frontend macht unübersichtliche Daten sofort sichtbar.
4. Wählen Sie den Frontend-Stack für die langfristige Nutzung. Hydrogen auf Oxygen ist eine Möglichkeit. Ein Framework, das Ihr Team oder Ihr Partner bereits kennt, ist eine andere. Berücksichtigen Sie die Personalgewinnung, den Upgrade-Zyklus und die Verwaltung der Inhalte durch die Redakteure.
5. Erstellen Sie aus Ihrem Designsystem eine Komponentenbibliothek. So bleibt der Storefront konsistent und lässt sich kostengünstiger ändern. Unsere UX- und SEO-Empfehlungen für das E-Commerce-Design sind hier direkt anwendbar.
6. Bauen Sie die Integrationen neu auf, die sich nicht übernehmen lassen. Treueprogramme, Bewertungen, Chat, Suche und Analytics benötigen jeweils einen Plan.
7. Legen Sie vor dem Launch eine Performance-Schwelle fest. Legen Sie ein Ziel für den Largest Contentful Paint auf einem Smartphone der Mittelklasse fest und veröffentlichen Sie keine Templates, die dieses Ziel verfehlen.
8. Planen Sie die Betriebsphase, bevor die Entwicklung abgeschlossen ist. Legen Sie fest, wer für Hosting, Monitoring, Upgrades und Änderungen der API-Versionen verantwortlich ist, und stellen Sie dafür Budget bereit.

Die Schritte 1 bis 3 sind im Vergleich zu einer Entwicklung kostengünstig und zeigen Ihnen, ob Sie fortfahren sollten. Wenn Sie eine zweite Einschätzung durch erfahrene Senior-Experten zu dieser Entscheidung wünschen, deckt unsere Softwareberatung und Unterstützung bei der Umsetzung genau diese Phase ab.

Headless-Storefront oder Theme: Entscheidungstabelle

Wenn die meisten Ihrer Antworten in die linke Spalte fallen, ist ein gut entwickeltes Theme die effiziente Wahl, und auch Shopifys eigene Empfehlungen stützen diese Einschätzung. Wenn sie in die rechte Spalte fallen, lohnt sich eine gründliche Aufwandsermittlung für eine Headless-Lösung.

Shopify Headless und Ihr Content-System

Einer der weniger offensichtlichen Gründe, warum Unternehmen sich für Headless entscheiden, sind Inhalte. Shopify ist eine Commerce-Engine. Redaktionsseiten, Kampagnen-Landingpages, Ratgeber und Markengeschichten gehören häufig in eine dedizierte Content-Plattform, aus der die Storefront Inhalte abruft. Shopify führt „die Verwendung eines CMS für Inhalte, die in die Storefront integriert sind“ selbst als einen der Gründe für die Entwicklung einer Headless-Lösung an.

Diese Kombination funktioniert am besten, wenn das Content-Modell bewusst konzipiert ist: Welche Felder Marketingteams steuern, wie Seiten in der Vorschau angezeigt werden und wie Inhalte auf Produkte verweisen. Unser Überblick über die Entwicklung und Implementierung eines Headless-CMS erläutert, wie wir diese Ebene angehen. Außerdem bieten wir Consus, ein verwaltetes Headless-CMS, im Rahmen einer fokussierten Betaphase und eines Beratungsprozesses an.

So arbeiten wir mit Führungskräften daran

Wenn Sie zu dem Schluss kommen, dass ein individueller Storefront erforderlich ist, deckt unser Service für Website-Design und -Entwicklung dies ab. Einfache Website-Projekte beginnen bei 3.000 USD. Das ist ein Einstiegspreis und kein Festpreis für jede Website. Ein Headless-Commerce-Projekt wird separat kalkuliert, da der endgültige Preis vom Umfang und der Komplexität abhängt. Für Integrationen, Backoffice-Anbindungen und alles, was über den Storefront hinausgeht, ist individuelle Softwareentwicklung der richtige Weg; Preise erhalten Sie auf Anfrage.

Wir unterstützen Projekte von der Analyse bis zur langfristigen Weiterentwicklung. Das ist hier besonders wichtig, da Headless-Projekte in der Betriebsphase erfolgreich sind oder ins Stocken geraten. Wenn Sie über Ihren Store sprechen möchten, bitten Sie unser Team um ein Gespräch.

FAQ

Was bedeutet Headless-E-Commerce?

Das bedeutet, dass der kundenorientierte Storefront und das Commerce-Backend getrennt sind. Sie entwickeln das Frontend mit der Technologie Ihrer Wahl, während das Backend Produkte, Bestände, Warenkorb und Bestellungen über APIs verwaltet. Bei Shopify verbindet die Storefront API beide Bereiche, und Kunden schließen den Kauf im Shopify Checkout ab.

Wie funktioniert die Shopify Storefront API?

Sie ist eine GraphQL-API mit einem einzigen Endpunkt pro Store und stellt Produkte, Kollektionen, die Suche und den Warenkorb bereit. Für bestimmte Daten wie Metafelder, Metaobjekte und Kundendaten ist eine tokenbasierte Authentifizierung erforderlich. Die API ist nach Datum versioniert, daher müssen Ihre Entwickler Abfragen im Laufe der Zeit aktualisieren.

Ist Headless schneller als ein herkömmliches Shopify-Theme?

Das ist möglich, aber nur, wenn der Storefront mit dem Ziel hoher Performance entwickelt wird. Die Geschwindigkeit hängt von Bildern, Skripten, Tags von Drittanbietern und den Entscheidungen beim Rendering ab. Legen Sie ein messbares Ziel fest und testen Sie es vor dem Launch.

Was kostet der Betrieb eines Headless-Shopify-Stores?

Laut der Shopify-Dokumentation ist die Entwicklung und der Betrieb teurer als bei einem Theme. Zu den laufenden Kosten gehören Hosting, Monitoring, Sicherheitsupdates, Framework-Upgrades, Migrationen auf neue API-Versionen und Entwicklungszeit. Die Preise hängen vom Umfang ab. Der zuverlässigste Weg zu einer konkreten Zahl ist daher, ein Angebot für Ihren spezifischen Store anzufordern.

Wann sollte ein Unternehmen bei einem Theme bleiben?

Wenn ein Theme mit moderaten Anpassungen die gewünschte Nutzererfahrung bieten kann und Sie nicht über die Kapazitäten für die dauerhafte Pflege des Frontends verfügen. Headless ist eine Antwort auf einen konkreten Bedarf, kein Selbstzweck-Upgrade.

Quellen

• Über Headless Commerce (Shopify-Entwicklerdokumentation)
• GraphQL Storefront API (Shopify-Entwicklerdokumentation)
• Headless Commerce: Definition, Vorteile und Kosten (Shopify Enterprise)
• Beispiele für Headless Commerce (Shopify Enterprise)
• Headless wird neu bewertet: Was Shopify-Entwicklung wirklich kostet (MarketMinute)

Empfohlen

• CMS für die Zukunft: Warum eine Headless-Architektur traditionelle Plattformen überdauert
• Migration zu einem Headless-CMS: Der Realitätscheck nach dem Launch
• E-Commerce-Replatforming: Ein strategischer Leitfaden für 2026
• Optimieren Sie Ihre E-Commerce-Plattform mit KI und maschinellem Lernen