Shopify Hydrogen und Oxygen: Headless mit Shopify

Shopify Hydrogen und Oxygen sind Shopifys Antwort auf die Frage, wie ein vollständig individuelles Storefront-Frontend aussehen kann, ohne dabei auf Shopifys Checkout, Zahlungsabwicklung und Backend zu verzichten. Das klingt verlockend. Und es ist in bestimmten Situationen tatsächlich die richtige Wahl. In vielen Fällen aber nicht. Dieser Artikel erklärt den technischen Unterbau, nennt ehrliche Zahlen und hilft dir zu entscheiden, ob Hydrogen dein nächstes Projekt ist oder ob ein gut gepflegtes Theme schneller ans Ziel bringt.

Was ist Shopify Hydrogen?

Hydrogen ist das Open-Source-React-Framework von Shopify, das speziell für die Entwicklung von Custom Storefronts auf Basis der Shopify Storefront API gebaut wurde. Statt Liquid-Templates mit Shopify-eigenen Tags nutzt du React-Komponenten, TypeScript und moderne Webstandards.

Seit Anfang 2026 basiert Hydrogen auf React Router v7 (dem Nachfolger von Remix) und verwendet Vite als Build-Tool. Das Framework bringt von Haus aus mit:

• Streaming Server-Side Rendering (SSR) für schnelle Time-to-First-Byte
• Eingebautes Caching auf Fetch-Ebene
• Fertige Hooks für Produkt-, Kollektion- und Cart-Daten über GraphQL
• Optimistic UI für sofortiges Feedback bei Cart-Aktionen
• Shopify-spezifische Komponenten wie <Image>, <Money> und <CartLineQuantity>

Aktuell (Stand Version 2026.4.0 vom April 2026) ist Hydrogen keine experimentelle Technologie mehr. Brands wie Allbirds oder Gymshark nutzen es produktiv.

Was ist Oxygen?

Oxygen ist Shopifys eigene Hosting-Infrastruktur für Hydrogen-Storefronts. Der entscheidende Vorteil: Das Hosting ist bei allen Shopify-Plänen ohne Aufpreis enthalten. Du zahlst keine separate Hosting-Gebühr, bekommst unbegrenzte Bandbreite, automatisches Skalieren und eine globale Edge-Infrastruktur über Cloudflare Workers an über 100 Standorten weltweit.

Die Deployment-Pipeline läuft über GitHub. Jeder Push auf den Main-Branch löst automatisch ein neues Deployment aus. Preview-Deployments für Pull Requests sind ebenfalls integriert.

Technisch betrachtet läuft Oxygen auf Cloudflare Workers, was bedeutet: dein Storefront-Code läuft am nächstmöglichen Edge-Knoten zum Besucher, nicht auf einem zentralen Server. Das erklärt die niedrigen Latenzwerte, die Hydrogen-Builds in Performance-Tests erzielen.

Alternativ kannst du deinen Hydrogen-Build auch auf anderen Plattformen wie Vercel oder Netlify hosten. Das bietet mehr Flexibilität, kostet aber extra und verliert einige Shopify-spezifische Integrationen.

Die headless Architektur im Überblick

Bei einem klassischen Shopify-Theme sind Frontend und Backend eng gekoppelt. Liquid-Templates rendern auf Shopifys Servern, der gesamte Request-Lifecycle läuft durch Shopifys Infrastruktur. Das ist einfach, stabil und funktioniert für die meisten Shops.

Headless mit Hydrogen trennt diese Schichten konsequent:

• Backend: Shopify bleibt als Commerce-Engine. Produkte, Inventar, Bestellungen, Checkout und Zahlungen laufen weiterhin über Shopify.
• Frontend: Dein Hydrogen-Storefront kommuniziert ausschließlich über APIs mit Shopify. Die Storefront API liefert Produkt- und Kollektionsdaten, Cart-API und Checkout-API übernehmen den Kaufprozess.
• Hosting: Oxygen oder eine Drittanbieter-Plattform.

Daraus folgt: Du hast volle Kontrolle über das HTML, CSS und JavaScript, das im Browser landet. Kein Liquid, keine Theme-Beschränkungen, keine Kompromisse bei der Komponentenstruktur. Das ermöglicht echte Design-Freiheit. Es bedeutet aber auch, dass du jedes Feature selbst bauen oder integrieren musst, das bei einem klassischen Theme mitgeliefert oder per App-Einzeiler erledigt wird.

Das Shopify-Ökosystem mit Tausenden von Apps und Themes steht dir im klassischen Sinne nicht mehr zur Verfügung. Viele Apps injizieren JavaScript über das Theme-System. Bei Hydrogen musst du prüfen, ob der App-Anbieter eine API-Integration anbietet. Häufig tut er das nicht.

Wann Hydrogen sich lohnt

Sei ehrlich mit dir: Die meisten Shopify-Shops brauchen kein Hydrogen. Online Store 2.0 mit einem solide gepflegten Theme und gutem Performance-Setup liefert für 95% der Händler eine bessere Kosten-Nutzen-Bilanz. Wann aber rechtfertigt Hydrogen den Mehraufwand?

Szenario 1: Extrem individuelle UX. Wenn dein Produkt eine Oberfläche verlangt, die sich vom klassischen Produktlisten-Checkout-Muster grundlegend unterscheidet, zum Beispiel ein komplexer Produktkonfigurator mit Echtzeit-3D-Vorschau oder ein App-ähnlicher Beratungsflow, dann sind Liquid-Templates das falsche Werkzeug.

Szenario 2: Mehrere Kanäle aus einer Datenbasis. Wenn dasselbe Commerce-Backend eine Mobile-App, einen Kioskbrowser im Ladengeschäft und einen Webshop bedienen soll, macht eine konsequente API-Schicht Sinn. Hydrogen ist dann die Webfrontend-Komponente dieses Setups.

Szenario 3: Enterprise-Marken mit starker Brand-Identität. Marken, die jedes Pixel kontrollieren müssen und kein Kompromiss bei der Markenerfahrung tolerieren, können mit Hydrogen diesen Anspruch technisch umsetzen.

Was keine validen Gründe sind: „Wir wollen schneller sein” reicht als Argument allein nicht. Ein gut gebautes Liquid-Theme, das auf Performance optimiert ist, schlägt ein schlecht gebautes Hydrogen-Projekt in jedem Benchmark. Performance ist eine Frage der Umsetzungsqualität, nicht des Frameworks.

Kosten und Aufwand: Realistische Zahlen

Das ist der Teil, der in Agentur-Pitches oft unter den Tisch fällt. Ein Hydrogen-Projekt ist ein ernsthafter Softwareauftrag, kein Theme-Projekt.

Typische Größenordnungen für Hydrogen-Builds:

• Schlankes MVP: 80.000 bis 140.000 Euro
• Vollständige Migration mit individuellem Design: 140.000 bis 280.000 Euro
• Multi-Brand oder Multi-Region-Setup: 280.000 Euro aufwärts

Laufender Wartungsaufwand nach dem Launch: rund 2.000 Euro pro Monat für eine stabile, selten geänderte Storefront. Bei einem eigenen, mehrköpfigen React-Team mit hoher Releasefrequenz kann der laufende Aufwand auf 40.000 Euro pro Monat und mehr steigen. Für große, aktiv weiterentwickelte Storefronts ist das der normale operative Betrieb, nicht die Ausnahme.

Hinzu kommt der organisatorische Aufwand. Dein Marketing-Team verliert den gewohnten Theme-Editor. Banneränderungen, neue Landingpages und Promotions werden Code-Deployments oder erfordern ein Headless-CMS wie Contentful oder Sanity, das du separat lizenzieren, aufbauen und schulen musst.

Projektlaufzeit für einen soliden Build: drei bis sechs Monate mit zwei bis vier React-Entwicklern.

Hydrogen und Shopify Functions: ein starkes Doppel

Hydrogen spielt besonders gut mit Shopify Functions zusammen. Functions erlauben dir, Checkout-Logik, Rabattregeln und Versandberechnungen auf Shopifys Infrastruktur auszuführen. Dein Hydrogen-Frontend ruft diese Logik über die API ab und kann die Ergebnisse im Storefront-UI darstellen, ohne den Shopify-eigenen Checkout zu verlassen.

Das ist wichtig: Auch bei Hydrogen-Storefronts läuft der finale Checkout über Shopify Checkout. Das ist kein Nachteil. Es bedeutet, dass du Shop Pay, alle nativen Zahlungsmethoden und die PCI-Compliance von Shopify nutzt, ohne diese selbst bauen zu müssen. Die Checkout Extensibility funktioniert dabei genauso wie bei Theme-Shops.

Häufige Fragen

Kann ich Hydrogen auch auf einem kleinen Shopify-Plan nutzen?

Ja. Oxygen ist bei allen Shopify-Plänen ohne Aufpreis enthalten. Die Frage ist nicht der Plan, sondern ob das Shopify-Backend deine Anforderungen abdeckt. Für die meisten Hydrogen-Projekte ist Shopify Plus sinnvoll, da du dort mehr API-Limits, Checkout-Extensibility-Zugang und erweiterte B2B-Features bekommst. Hydrogen selbst ist Open-Source und planunabhängig.

Muss ich mein Shopify-Theme komplett aufgeben?

Ja. Hydrogen und ein klassisches Liquid-Theme schließen sich als primäres Frontend gegenseitig aus. Du kannst technisch ein Liquid-Theme parallel aktiv lassen, aber die Besucher landen entweder auf deinem Hydrogen-Storefront oder auf dem Theme. Hybride Setups, bei denen bestimmte Seiten Liquid und andere Hydrogen nutzen, sind möglich, aber aufwändig zu pflegen.

Wie unterscheidet sich Hydrogen von anderen Headless-Optionen?

Bei Shopify hast du grundsätzlich zwei Headless-Wege: du baust mit Hydrogen und dem Oxygen-Hosting eine tief in Shopify integrierte Lösung, oder du nutzt die Storefront API mit einem beliebigen anderen Frontend-Framework (Next.js, Nuxt, Astro). Hydrogen hat den Vorteil der fertigen Shopify-Komponenten und der kostenlosen Oxygen-Infrastruktur. Der Nachteil: du bist enger an Shopifys Framework-Entscheidungen gebunden.

Lohnt sich Hydrogen für B2B-Shops?

Grundsätzlich ja, wenn die UX-Anforderungen es verlangen. Shopify B2B ist über die Storefront API erreichbar, inklusive Company-Accounts, B2B-Preislisten und Bestellgrenzen. Für komplexe B2B-Workflows mit Bestellfreigaben, Budgetverwaltung und Rollen kann Hydrogen eine flexiblere Basis sein als Standard-Themes. Allerdings erhöht das die Projektkomplexität noch einmal deutlich.

Fazit und nächster Schritt

Hydrogen und Oxygen sind ausgereifte Technologien für Shops, die von den Grenzen klassischer Themes ernsthaft eingeschränkt werden. Für die meisten wachsenden Händler ist ein gepflegtes Shopify-Theme mit guter App-Architektur und solider Performance-Basis jedoch der smartere Weg. Weniger Komplexität, schnellere Umsetzung, niedrigere laufende Kosten.

Wenn du dir nicht sicher bist, ob dein Vorhaben wirklich Hydrogen braucht oder ob ein Theme-Setup mit Custom-App-Logik ausreicht, schau dir unsere Shopify-Betreuungsleistungen an. Wir helfen dir, das vor Projektstart ehrlich einzuschätzen.