Headless Shopify mit Hydrogen: Der ultimative Entscheidungs-Guide

Das Wichtigste in Kürze

• Headless Shopify mit Hydrogen bedeutet, dass du deine eigene React-Storefront über die Storefront API von Shopify baust, während Shopify das Backend und den Checkout behält. Hydrogen ist das Framework, Oxygen das kostenlose Hosting.¹
• Die wahren Kosten entstehen durch das Team, nicht durch die Software. Hydrogen und Oxygen sind kostenlos. Das fortlaufende React-Engineering, das sie erfordern, ist es nicht – und es hört nie auf.
• Die meisten Shops, die Headless in Betracht ziehen, wollen Designfreiheit und Geschwindigkeit. Beides ist mittlerweile mit einem normalen Liquid-Theme erreichbar, ohne Frontend-Entwickler einzustellen.
• Headless ist für eine spezifische Minderheit die richtige Wahl: Multi-Surface-Marken, App-ähnliche Storefronts und Teams, die ohnehin schon fest angestellte Frontend-Entwickler haben.
• Seit August 2026 funktioniert Oxygen auch auf Development-Stores und Trial-Stores, du kannst also einen Hydrogen-Build evaluieren, bevor du für einen Plan bezahlst.²³

Headless Shopify mit Hydrogen ist das Setup, bei dem Shopify deine Produkte, dein Inventar, deine Kunden und den Checkout verwaltet, während deine eigene React-Anwendung die Storefront rendert. Hydrogen ist Shopifys Framework zum Bau dieser Anwendung und Oxygen ist das Hosting von Shopify, um sie laufen zu lassen.

Wir bauen ein Tool, das Liquid-Themes verbessert – behalte das im Hinterkopf, wenn du unsere Schlussfolgerungen liest.

Warum du uns vertrauen kannst

Wir sind seit über vier Jahren im Shopify-Umfeld tätig und haben mit hunderten von Shops auf beiden Architekturen gearbeitet.

Jacques, unser CTO, hat mehr als 15 Jahre Entwicklungserfahrung, einschließlich React-Storefront-Projekten. Die folgenden Aufwandsabschätzungen stammen also aus der echten Praxis und nicht nur aus der Theorie.

Wir entwickeln Fudge, den KI-Operator für Shopify-Shops, mit einer 4.9-Bewertung im Shopify App Store. Fudge ist unser Produkt und konkurriert um dasselbe Budget, das auch ein Headless-Build verschlingen würde – behalte das im Hinterkopf, wenn du unsere Empfehlungen liest.

Was ist Headless Shopify?

Headless bedeutet die Trennung der Storefront von der Plattform, die sie antreibt.

In einem normalen Shopify-Store rendert der Online Store-Vertriebskanal dein Liquid-Theme. Shopify kontrolliert das Rendering, das Hosting und die Verbindung zu deinen Daten. Ein einziges System macht alles.

Bei einem Headless-Store entfernst du diese mittlere Ebene. Shopify besitzt weiterhin den Admin-Bereich, Produkte, Inventar, Kunden, Rabatte und den Checkout. Deine eigene Anwendung, die irgendwo läuft, fragt Daten bei Shopify an und rendert die Storefront selbst.

Diese Kommunikation läuft über die Storefront API, eine GraphQL-API, die Produkte, Kategorien (Collections), Warenkörbe, Suche, Seiten und Blogs für jeden Client zugänglich macht.⁴ Sie wird quartalsweise versioniert und authentifiziert sich mit Public Tokens für Browser und Private Tokens für Server.⁴

Eine Sache ändert Headless jedoch nicht: Der Checkout bleibt bei Shopify. Deine Custom Storefront baut den Warenkorb auf und übergibt den Käufer dann an den von Shopify gehosteten Checkout. Die Checkout-Anpassung funktioniert bei beiden Architekturen auf die gleiche Weise.

Headless tauscht Shopifys Rendering-Ebene gegen deine eigene Anwendung aus; alles hinter der Storefront bleibt Shopify.

Was ist Hydrogen?

Hydrogen ist Shopifys eigenes Framework zum Bauen von Headless-Storefronts in React.

Du könntest einen Headless-Storefront auch mit Next.js, Astro oder normalem React bauen. Hydrogen existiert, weil die meiste Arbeit dabei unspezifische Fleißarbeit ist: Cart-State, Shopify Analytics, Shop Pay, Kundenkonten, SEO-Routes. Hydrogen liefert diese Teile vorgefertigt mit, weshalb Shopify es als “Headless in der halben Zeit” (headless in half the time) positioniert.⁵

Was du Out-of-the-box bekommst:

• Ein komplettes Storefront-Skelett - Routes für Home, Produkte, Collections, Warenkorb, Suche, Blogs, Accounts, Richtlinien, robots.txt und Sitemap.¹
• Commerce-Komponenten - Cart-Forms, Varianten-Selektoren, Währungsformatierung, Medien, Pagination und einen Shop Pay-Button.⁵
• Integrierte Features - Shopify Analytics, Customer Accounts und Caching, das speziell auf die Storefront API abgestimmt ist.⁵

Seit dem Release 2025.5 basiert Hydrogen auf React Router 7, dem Nachfolger des Remix-Frameworks, das ursprünglich verwendet wurde.¹ Das ist wichtig fürs Recruiting: Jeder React-Entwickler kann an einer Hydrogen-Codebase arbeiten, muss aber trotzdem die Datenmuster von Hydrogen und die APIs von Shopify lernen.

Hydrogen und sein Begleiter Oxygen sind das, was Shopify als den “empfohlenen Stack für Headless Commerce” bezeichnet.¹ Wenn du 2026 auf Shopify Headless gehst, ist dies der offiziell unterstützte Weg.

Was ist Oxygen?

Oxygen ist Shopifys Hosting-Plattform für Hydrogen-Storefronts, eine Worker-basierte Edge-Runtime, die direkt über die Shopify CLI oder eine GitHub-Integration deployt wird.

Das kommerzielle Detail, das viele überrascht: Oxygen ist in kostenpflichtigen Shopify-Plänen ohne Aufpreis enthalten.¹ Du zahlst keine Vercel-artigen Hosting-Rechnungen, wenn du Hydrogen auf dem unterstützten Weg betreibst.

Zwei Rollouts im August 2026 haben die letzte Hürde fürs Ausprobieren beseitigt:

• 3. August 2026 - Oxygen wurde für Development Stores verfügbar gemacht. Agenturen und Entwickler können nun echte Hydrogen-Builds ohne bezahlten Plan deployen. Die Deployment-URLs erfordern einen Shop-Login, da Development Stores keine öffentlichen Environments haben.²
• 25. August 2026 - Dasselbe kam für Trial-Plan-Stores, mit den gleichen Login-geschützten URLs.³

Oxygen hat Laufzeitlimits, die man kennen sollte, bevor man seine Architektur darum herum aufbaut: 30 Sekunden CPU-Zeit pro Request und 128 MB RAM.¹ Schwere serverseitige Arbeiten gehören in einen separaten Service, nicht in den Storefront-Worker.

Hydrogen ist kostenlos, Oxygen ist in bezahlten Plänen kostenlos, und seit August 2026 kannst du beides auf einem Development Store ausprobieren – die Kosten für Headless liegen also komplett beim Engineering.

Was sich im August 2026 geändert hat: Die Hydrogen Developer Preview

Das Update der Hydrogen Developer Preview von Shopify vom 18. August 2026 ist es wert, genau gelesen zu werden, denn es zeigt sowohl, wie aktiv die Plattform verbessert wird, als auch, worauf Headless-Entwickler bisher verzichten mussten.⁶

Die Preview enthält sechs Änderungen:⁶

Wenn du diese Liste liest, siehst du den Kompromiss, der den Kern von Headless ausmacht. Die meisten Punkte darauf sind Dinge, die ein Liquid-Theme seit Jahren standardmäßig hat. Angemeldeter Checkout, vollständige Analytics-Events, ein sofortiger Shop Pay-Button – im Online Store-Kanal richtet Shopify das alles für dich ein. Bei Headless waren das Lücken, bis Shopify sie geschlossen hat, und dein Team ist für alle Lücken verantwortlich, die noch bleiben.

Das ist keine Kritik an Hydrogen. Es ist die Definition der Architektur: Du übernimmst die Verantwortung für die Storefront-Ebene, einschließlich der Teile, von denen du gar nicht wusstest, dass Shopify sie leise im Hintergrund erledigt hat. Unsere Zusammenfassung der Shopify-Updates vom August 2026 behandelt den Rest der Plattformänderungen dieses Monats zusammen mit diesen.

Was Headless Shopify wirklich kostet

Hydrogen hat keine Lizenzgebühren und Oxygen hat keine Hosting-Kosten. Die Kosten sind das Team. Basierend auf unserer Erfahrung beim Bau und der Wartung beider Arten von Storefronts:

Betrachte die Dollarbeträge als Planungsrahmen, nicht als fixe Angebote – der Umfang verschiebt sie enorm. Die Zeilen, die sich nicht verschieben, sind die strukturellen: Der Bau dauert Monate, die Wartung endet nie und das Marketing verliert das Self-Service-Publishing, es sei denn, du investierst weiter in ein CMS und Preview-Tooling.

Die Wartungs-Zeile verdient besondere Betonung, denn sie wird von Teams oft unterschätzt. Ein Liquid-Theme, das ein Jahr lang in Ruhe gelassen wird, funktioniert immer noch. Eine Hydrogen-Storefront, die ein Jahr lang nicht angefasst wird, hat eine veraltete API-Version, alte Dependencies mit Sicherheitswarnungen und möglicherweise wartet eine Framework-Migration. Jemand muss sich darum kümmern, für immer.

Wer braucht Headless Shopify?

Headless ist die richtige Architektur für eine absolute Minderheit von Shops. Das Muster in den Fällen, wo es passt: Die Storefront ist eine Anwendung, nicht nur eine Ansammlung von Seiten.

Du gehörst wahrscheinlich zu dieser Minderheit, wenn mehrere der folgenden Punkte zutreffen:

• Du betreibst mehrere Oberflächen (Surfaces) aus einem Backend. Ein Webshop plus eine native Mobile App, In-Store-Kioske oder Embedded Commerce in einem anderen Produkt. Eine Storefront API, die mehrere Clients bedient, ist genau das, wofür Headless gedacht ist.⁴
• Deine Storefront ist App-ähnlich. Produktkonfiguratoren, Virtual Try-on, maßgeschneiderte Abo-Dashboards, eingeloggte Erlebnisse mit hoher Interaktivität. Wenn das Frontend eine React-Anwendung ist, dann ist es eher solide Architektur als bloßer Modetrend, es in einem React-Framework zu bauen.
• Content ist dein Alleinstellungsmerkmal und lebt in einem CMS. Editorial-Commerce-Hybride, die im Zeitschriften-Volumen veröffentlichen und bereits das Personal und Tooling für ein Headless CMS haben, können Commerce eher in diese Pipeline integrieren als umgekehrt.
• Du hast bereits engagierte Frontend-Entwickler. Nicht nur Zugriff auf eine Agentur – Entwickler auf der Gehaltsliste, deren Job die Storefront ist. Headless ohne sie scheitert langsam und teuer.
• Du bist bei Liquid an eine echte Grenze gestoßen. Nicht nur “das Theme fühlt sich limitierend an”, sondern eine spezifische, benannte Funktion, die du probiert hast und in einem Theme nicht bauen konntest. Solche Mauern gibt es; sie sind nur seltener, als Agenturen suggerieren.

Ein weiterer, aufkommender Fall hat Vor- und Nachteile. AI-Shopping-Agents suchen und kaufen zunehmend im Namen von Kunden ein, und um diese gut zu bedienen, braucht es strukturierte Daten und saubere APIs. Headless-Teams haben diese Ebene komplett unter Kontrolle, aber Shopify liefert dieselbe Agenten-ausgerichtete Infrastruktur an jeden Shop aus, egal ob Theme oder nicht – unser Guide zu Agent-ready Shopify Storefronts behandelt, was hierbei wirklich zählt. Agent Readiness allein ist kein Grund, Headless zu gehen.

Wenn deine Storefront eine Anwendung ist, die mehr als eine Oberfläche bedient, rentiert sich Headless; wenn es sich nur um Seiten handelt, normalerweise nicht.

Wer NICHT auf Headless gehen sollte

Diese Gruppe ist viel größer als die erste. Bleib bei einem Liquid-Theme, wenn eines der folgenden Dinge auf dich zutrifft:

Deine Motivation ist Design-Freiheit. Das ist der häufigste Grund, warum Händler sich Headless ansehen, und im Jahr 2026 ist es der schwächste. Liquid-Themes sind kein Design-Limit – Custom Sections, Custom CSS und Custom Layouts sind allesamt native Theme-Fähigkeiten. Das historische Problem war, dass man dafür einen Entwickler brauchte. Für dieses Problem gibt es heute viel günstigere Lösungen als einen sechsmonatigen React-Build, auf die wir im nächsten Abschnitt eingehen.

Deine Motivation ist Speed. Headless macht einen Shop nicht automatisch schnell, und die Annahme, dass dem so ist, hat schon viele Budgets verbrannt. Mehr dazu weiter unten.

Du hast keine Inhouse-Entwickler. Wenn eine Agentur deinen Hydrogen-Storefront baut und dann geht, ist jede zukünftige Änderung – ein Banner, eine neu sortierte Section, ein Bug – ein neuer Vertrag und eine Rechnung. Die Shops, die Headless am meisten bereuen, sind diejenigen, die sich den Build gekauft haben, aber nicht das Team.

Das Marketing publiziert wöchentlich. Landingpages, Kampagnen-Sections, saisonale Wechsel: Auf einem Theme ist das reine Editor-Arbeit; bei Headless sind es Tickets in einer Engineering-Warteschlange oder ein CMS-Projekt on-top zum eigentlichen Build. Wenn dein Wachstum von der Publishing-Geschwindigkeit abhängt, arbeitet Headless dagegen.

Du bist auf viele Storefront-Apps angewiesen. Reviews-Widgets, Bundles, Quizze, Loyalty-Anzeigen – Apps integrieren sich über Theme App Extensions automatisch in Themes. Bei Headless ist jede davon maßgeschneiderte Integrationsarbeit gegen die API dieser App, sofern die App überhaupt eine hat.

Dein Umsatz deckt keinen dauerhaften Posten für Engineering ab. Als grober Check: Wenn ein Bruchteil des Gehalts eines Frontend-Entwicklers einen signifikanten Anteil deiner Marge ausmacht, ist allein die Wartung schon ein K.o.-Kriterium, völlig unabhängig vom Budget für den Build.

Nichts davon ist ein Vorwurf gegen Hydrogen, welches die bisher beste Version von Headless Shopify ist. Es ist ein Vorwurf gegen die Entscheidung für eine Architektur, deren Kosten man zahlt, aber deren Vorteile man nicht nutzt.

Die Frage nach der Design-Freiheit: Was die meisten Shops eigentlich wollen

Das Muster, das wir sehen: Eine Marke wächst aus dem Look ihres Themes heraus, bekommt gesagt “Für echte Designfreiheit brauchst du Headless”, und fängt an, bei React-Agenturen Preise anzufragen. Aber was sie eigentlich wollen, ist keine Architektur. Es ist eine Storefront, die custom aussieht und schnell fertig ist.

Das ist mittlerweile ein gelöstes Problem innerhalb der Theme-Ebene. AI-Theme-Tools schreiben dasselbe Custom Liquid, CSS und JavaScript, das auch ein Theme-Entwickler schreiben würde, direkt in dein bestehendes Theme – unser Shopify AI Toolkit-Guide behandelt die Entwicklerseite dieser Tools.

Genau das ist der Job von Fudge, unserem Produkt. Du beschreibst die Section oder Seite, die du möchtest, Fudge liest das tatsächliche Theme deines Shops und baut es als nativen Code auf – als Entwurf (Draft), den du dir ansehen kannst, bevor etwas live geht. Der Output ist standardmäßiger Theme-Code, der dir gehört – er funktioniert auch dann noch, wenn du die App deinstallierst, was die meisten Page Builder nicht von sich behaupten können. Es gibt ein 5-tägiges kostenloses Probeabo ohne Kreditkarte, kostenpflichtige Tarife ab 79 $/Monat, und die Seite zum AI Page Builder zeigt, wie das in der Praxis aussieht. Weil Fudge eher der AI-Operator für Shopify-Stores ist und nicht nur ein Builder, berichtet es auch über Besuche und Conversion Rates für jede Seite, die es baut, und schlägt vor, was als Nächstes geändert werden sollte. Das ist genau der Publishing-Loop, den Headless oft verlangsamt.

Der faire Vergleich lautet daher nicht “Headless vs. ein Standard-Theme”. Er lautet:

• Headless mit Hydrogen: volle Design-Kontrolle, monatelange Bauzeit, dauerhafte Engineering-Verantwortung.
• Ein Liquid-Theme mit AI-gebautem Custom-Code: nahezu volle Design-Kontrolle für Seiten und Sections, Stunden bis Tage pro Änderung, kein Engineering-Team, und der Theme-Editor funktioniert für deine Marketer weiterhin.

Headless gewinnt immer noch, wenn die Anforderung App-Verhalten oder mehrere Oberflächen (Surfaces) ist. Für die Mehrheit, deren Anforderung lautet “mach, dass unser Shop aussieht und konvertiert wie die Marken, die wir bewundern”, schafft das die Theme-Ebene mittlerweile zu einem Bruchteil der Kosten.

Die meisten “Wir brauchen Headless”-Unterhaltungen sind eigentlich “Wir brauchen Custom-Design, ohne auf Entwickler zu warten” – und dafür muss man das Theme heute nicht mehr verlassen.

Ist Headless Shopify wirklich schneller?

Manchmal. Nicht automatisch.

Eine gut gebaute Hydrogen-Storefront ist schnell: Server-side Rendering am Edge, strenge Kontrolle über jedes Skript, kein Theme-Ballast. Der Fix für den Shop Pay-Button in der Preview vom August 2026 ist ein gutes Beispiel dafür, wie Shopify die verbleibenden Ecken und Kanten glättet.⁶

Aber eine Architektur garantiert keine Ergebnisse. Ein Hydrogen-Build voller clientseitigem JavaScript, schweren Bildern und Drittanbieter-Skripten ist langsamer als ein diszipliniertes Liquid-Theme, und wir haben schon viele von beiden gemessen. Moderne Online Store 2.0-Themes sind schnell, wenn man sie sauber hält; die Shop-Killer sind auf beiden Stacks dieselben – Skriptgröße, Bildgröße und App-Bloat.

Zwei Ressourcen, falls Speed dein eigentliches Ziel ist: Unser Shopify Mobile Speed-Guide behandelt die Fixes, die Core Web Vitals bei einem Theme bewegen, und der State of Shopify Performance 2026-Bericht zeigt, was reale Shops mit der jeweiligen Architektur erreichen.

Wenn dein Shop heute langsam ist, solltest du die Ursache analysieren (diagnostizieren), bevor du die Plattform wechselst. Die meisten langsamen Shopify-Stores sind aus Gründen langsam, die ein Rebuild nur originalgetreu nachbauen würde.

Headless Shopify Entscheidungs-Checkliste

Zähle für jede zutreffende Aussage einen Punkt:

1. Wir betreiben (oder werden innerhalb von 18 Monaten betreiben) eine zweite Storefront-Oberfläche neben dem Webshop (Native App, Kiosk, Embedded Commerce).
2. Unsere Storefront benötigt App-Verhalten, das ein Theme nicht abbilden kann, und wir können das spezifische Feature benennen, bei dem wir bereits gescheitert sind, es in Liquid zu bauen.
3. Wir haben mindestens einen Frontend-Entwickler auf der Gehaltsliste, der dauerhaft für die Storefront verantwortlich ist.
4. Unser Content-Team arbeitet bereits in einem Headless CMS, oder wir haben Budget dafür plus die Integration eingeplant.
5. Wir haben jede Storefront-App, auf die wir angewiesen sind, geprüft und die Kosten für deren Custom-Integration berechnet.
6. Wir können eine 3- bis 6-monatige Bauphase und permanente Wartungskosten finanzieren, ohne dass Budgets für Akquise oder CRO ausbluten.
7. Das Marketing akzeptiert, dass Seiten- und Section-Änderungen über die Entwicklung oder das CMS laufen, nicht über einen Theme-Editor.

Fünf oder mehr: Du bist ein Kandidat für Headless. Richte eine Hydrogen-Storefront auf einem Development-Store ein – das kostet seit August 2026 nichts mehr² – und validiere das Ganze mit einem echten Prototyp, bevor du dich committest.

Drei oder vier: Der Kompromiss ist machbar, aber nicht offensichtlich. Baue einen Prototyp auf einem Dev-Store und teste parallel, ob KI-gestützte Theme-Arbeit deine eigentliche Lücke für einen Bruchteil der Kosten schließt.

Zwei oder weniger: Bleib bei Liquid. Gib die Preisdifferenz für Design, Speed und Conversion-Arbeit aus, die in diesem Quartal live geht und nicht erst nächstes Jahr.

Zusammenfassung

Headless Shopify mit Hydrogen ist 2026 eine ausgereifte, gut unterstützte Architektur. Hydrogen ist ein echtes Framework auf React Router 7, das Oxygen-Hosting ist in bezahlten Plänen kostenlos und nun auch für Development und Trial Stores geöffnet, und Shopify schließt sichtlich die Lücken, wie die Developer Preview vom August zeigt.¹⁶²³

Die Software ist kostenlos; die Architektur ist es nicht. Ein Hydrogen-Build kostet anfangs monatelange Engineering-Zeit und danach für immer die Verantwortung durch Entwickler. Außerdem verlagert es das Storefront-Publishing von deinen Marketern hin zu deinen Entwicklern.

Dieser Preis lohnt sich für Multi-Surface-Marken und App-ähnliche Storefronts, die über eigene Engineering-Teams verfügen. Für die meisten Shops sind die Ziele, die diese Diskussion antreiben – individuelles Design, schnellere Seiten, Freiheit von Theme-Einschränkungen – mittlerweile jedoch auch innerhalb des Theme-Layers erreichbar, und das in Tagen statt in Monaten.

Triff deine Entscheidung anhand der Checkliste, nicht anhand einer schönen Demo.

FAQ