Headless Shopify mit Hydrogen: wann es sich lohnt

Headless Shopify mit Hydrogen lohnt sich, wenn der Theme-Editor Ihren Anforderungen wiederholt im Weg steht, wenn mehrere Märkte eigene Merchandising-Logik brauchen oder wenn ein eigenes Engineering-Team den Storefront betreiben wird. Für die meisten Händler in Deutschland, Österreich und der Schweiz trifft keiner dieser Punkte zu, und ein gut gebautes Theme auf Online Store 2.0 ist die bessere, günstigere und wartungsärmere Antwort. Das ist die kurze Fassung, und sie kommt von einer Agentur, die Headless-Storefronts baut.

Die lange Fassung erklärt, was Headless technisch bedeutet, was Sie gewinnen, was Sie verlieren, was es kostet und wie Sie die Entscheidung so treffen, dass Sie sie in zwei Jahren nicht bereuen. Wer den englischen Ausgangsartikel lesen möchte: Headless Shopify with Hydrogen.

Was Headless bei Shopify bedeutet

Headless trennt das Frontend, also alles, was Kunden sehen, vom Backend, also Produkten, Bestellungen, Kunden und Checkout. Shopify bleibt das Backend und liefert Daten über die Storefront API. Das Frontend bauen Sie selbst.

Hydrogen ist Shopifys eigenes Framework dafür, auf React aufgebaut, mit fertigen Bausteinen für Produktabfragen, Warenkorb, Kundenkonten und Markets. Oxygen ist das zugehörige Hosting bei Shopify. Die Alternative ist ein eigenes Framework wie Next.js mit eigenem Hosting, das dieselbe Storefront API nutzt. Der englische Beitrag Hydrogen vs Next.js for headless Shopify vergleicht beide.

Was bleibt: der Checkout. Auch bei Headless läuft der Checkout bei Shopify, mit Shopify Payments, Klarna, PayPal, in der Schweiz TWINT, mit Checkout Extensibility und Shopify Functions. Das ist eine gute Nachricht, weil der Checkout der Teil ist, den Sie am wenigsten selbst bauen wollen.

Was entfällt: das Theme, der Theme-Editor, die Theme App Extensions, mit denen Apps etwas im Storefront anzeigen, und die vielen kleinen Dinge, die ein Theme automatisch erledigt, von der Sitemap bis zum hreflang-Tag. Das ist der Teil, der bei der Entscheidung unterschätzt wird.

Was Sie gewinnen

Headless liefert drei Dinge, die ein Theme nicht liefern kann: volle Kontrolle über das Frontend, eigene Content-Modelle und die Freiheit, Shopify-Daten mit anderen Quellen zu mischen.

Kontrolle über das Frontend. Jede Komponente, jede Interaktion, jedes geladene Byte ist Ihre Entscheidung. Für Marken, deren Design-Abnahme regelmäßig an "das kann das Theme nicht" scheitert, ist das der eigentliche Grund für Headless. Für Marken, deren Theme das Design abbildet, ist es Kontrolle ohne Nutzen.

Eigene Content-Modelle. Ein inhaltsstarker Storefront mit Magazin, Ratgebern, Lookbooks und Produktgeschichten stößt im Theme-Editor an Grenzen. Headless erlaubt ein CMS wie Sanity oder Contentful oder Shopify Metaobjects als Content-Quelle, mit Redaktions-Workflows, die der Theme-Editor nicht hat. Der englische Artikel Shopify metaobjects and metafields zeigt, wie weit man mit Bordmitteln kommt, bevor Headless nötig wird.

Mehrere Quellen in einem Storefront. Wer Produktdaten aus Shopify mit Verfügbarkeiten aus einem ERP, Inhalten aus einem CMS und Filialdaten aus einem dritten System kombiniert, kann das im Theme nur über Apps und Metafelder abbilden. Headless macht daraus eine Frage der Datenschicht.

Alle drei Punkte sind real. Die Frage ist, ob Ihr Shop einen davon braucht.

Was Sie verlieren

Was Sie verlieren, ist bis zum Launch unsichtbar, weil das Theme es still erledigt hat. Die Liste ist länger, als die meisten Händler erwarten.

Der Theme-Editor. Jede Änderung, die im Theme-Editor ein Klick war, etwa ein neues Banner, eine umsortierte Sektion, ein geänderter Text auf der Startseite, ist bei Headless eine Codeänderung mit Deployment, oder sie braucht ein CMS, das Sie zusätzlich aufsetzen und pflegen. Ihr Marketing verliert die Fähigkeit, den Shop selbst zu verändern, wenn Sie das nicht bewusst zurückbauen.

Storefront-Apps. Bewertungen, Bundles, Größentabellen, Shoppable Video, Upsells, Wunschlisten: Alles, was sich über Theme App Extensions in das Theme einhängt, funktioniert bei Headless nicht mehr automatisch. Jede dieser Funktionen wird über die API des App-Anbieters neu eingebaut, sofern es eine gibt, oder ersetzt. Admin-Apps für Bestellungen, Versand oder Buchhaltung bleiben unverändert.

SEO-Grundlagen. Sitemap, Canonical-Tags, hreflang für Markets, strukturierte Daten für Produkte, Redirects, robots.txt: Das Theme liefert das ohne Ihr Zutun. Bei Headless bauen und pflegen Sie es. Es ist machbar, aber es ist Arbeit, und Fehler kosten Rankings. Vereinbaren Sie SEO-Parität mit dem bisherigen Shop als Abnahmekriterium; die Shopify SEO Checkliste ist eine brauchbare Prüfliste dafür.

Markets ohne Code. Shopify Markets deckt Mehrwährung und lokalisierte Domains ab, und im Theme funktioniert das mit wenigen Einstellungen. Hydrogen bringt Bausteine für Markets mit, aber Sprach- und Währungswechsel, Preisanzeige in CHF und Euro und die passenden hreflang-Tags sind Ihre Implementierung.

Kundenkonten, Suche, Filter. Das Theme bringt Kundenkonto-Seiten, Suche und Kollektionsfilter mit. Bei Headless bauen Sie sie über die entsprechenden APIs nach. Jede davon ist überschaubar, zusammen sind sie Wochen.

Was Headless kostet, jetzt und später

Ein Headless-Build hat zwei Kostenblöcke, und der zweite ist der, der Projekte scheitern lässt.

Der erste Block ist der Bau. Bei ByteInfy beginnt ein fokussierter Headless-Storefront bei 5.000 $ und reicht mit individuellen Content-Modellen, mehreren Märkten und Integrationen bis 25.000 $ und mehr, wie auf der Seite Headless Shopify beschrieben. Zum Vergleich: Eine Shop-Entwicklung auf Online Store 2.0 beginnt bei 2.000 $. Andere Agenturen kalkulieren anders; die Größenordnung des Unterschieds ist überall ähnlich. Was in einem Angebot stehen sollte, listet der Artikel Shopify Agentur Kosten 2027.

Der zweite Block ist der Betrieb. Ein Theme wird von Shopify und dem Theme-Anbieter weiterentwickelt; Sie spielen Updates ein. Ein Headless-Storefront ist Ihre Software: Abhängigkeiten aktualisieren, API-Versionen nachziehen, Deployments, Monitoring, Fehlerbehebung. Das braucht entweder ein internes Team oder einen Retainer, der deutlich über dem eines Theme-Shops liegt. Wer diesen Block nicht über drei Jahre rechnet, vergleicht einen Baupreis mit einem Baupreis und übersieht, wo das Geld hingeht.

Dazu kommen Kosten, die im Theme nicht anfallen: ein CMS mit eigener Lizenz, das Nachbauen von App-Funktionen, das Nachbauen der SEO-Grundlagen, und bei Next.js das Hosting. Oxygen ist bei Hydrogen Teil des Shopify-Angebots; die genauen Bedingungen hängen vom Plan ab und sollten vor der Entscheidung geprüft werden.

Wann sich Headless lohnt

Die Entscheidung fällt an vier Kriterien, und sie sollten ehrlich beantwortet werden, bevor ein Angebot eingeholt wird.

Wenn Sie alle vier mit Ja beantworten, ist Headless eine gute Entscheidung, und Hydrogen ist ein guter Weg dorthin. Wenn Sie die vierte Frage mit Nein beantworten, ist Headless unabhängig von den anderen drei keine gute Entscheidung, weil der Storefront nach dem Launch verfällt.

Wenn Sie nur die erste Frage mit Ja beantworten, ist die Antwort meist eine Theme-Anpassung oder ein individuelles Theme auf Online Store 2.0. Der englische Artikel Shopify theme vs custom beschreibt, wie weit ein individuelles Theme geht, und die Antwort ist: weiter, als die meisten Händler denken. Theme-Anpassungen beginnen bei ByteInfy bei 1.000 $.

Wenn Sie es bauen: worauf es ankommt

Wer die vier Fragen mit Ja beantwortet hat, sollte den Build so aufsetzen, dass die Verluste aus dem Abschnitt oben bewusst zurückgebaut werden.

Entscheiden Sie zuerst, dann modellieren Sie. Eine kurze Discovery, die eine Frage ehrlich beantwortet: Zahlt sich Headless hier aus? Erst danach Content- und Datenmodell, dann Komponentensystem, dann Seiten. Wer mit Seiten beginnt, baut das Datenmodell dreimal.

Machen Sie SEO- und Performance-Parität zum Abnahmekriterium. Sitemap, Canonical, hreflang, strukturierte Daten, Redirects und Core Web Vitals werden vor dem Launch gegen den bestehenden Shop gemessen, nicht danach. Der englische Artikel Shopify theme speed nennt die Werte, die zählen.

Listen Sie jede Storefront-App vor dem Start. Mit der Frage: Hat sie eine API, wird sie nachgebaut, wird sie ersetzt, oder entfällt sie? Diese Liste verhindert die Überraschung in Woche acht, wenn die Bewertungen fehlen.

Geben Sie dem Marketing ein Werkzeug zurück. Ein CMS oder Metaobjects mit klaren Content-Typen, damit Banner, Kampagnen und Texte ohne Deployment änderbar sind. Sonst wird jede Kampagne zum Ticket.

Verlangen Sie Runbooks. Deployment, Rollback, Monitoring, API-Umstellungen: dokumentiert so, dass Ihr Team den Storefront ohne die Agentur betreiben kann. Was Sie dazu vertraglich festhalten sollten, steht im Artikel Shopify Agentur auswählen: 12 Fragen vor dem Vertrag.

Die ehrliche Zusammenfassung

Headless mit Hydrogen ist ein gutes Werkzeug für eine kleine Gruppe von Shops: inhaltsstarke Marken, Multi-Market-Setups mit eigener Logik, Teams mit Engineering-Kapazität. Für diese Gruppe ist es die richtige Entscheidung, und Hydrogen mit Oxygen ist der Weg mit der engsten Shopify-Integration.

Für alle anderen ist ein gutes Theme auf Online Store 2.0 die bessere Antwort: günstiger im Bau, deutlich günstiger im Betrieb, mit Theme-Editor für das Marketing, mit Apps, die sofort funktionieren, mit SEO-Grundlagen, die ohne Zutun stimmen. Eine Agentur, die Ihnen das sagt, bevor sie ein Headless-Angebot schreibt, arbeitet in Ihrem Interesse.