Headless Shopify mit Hydrogen: Der ultimative Entscheidungs-Guide

Veröffentlicht
Von Experten geprüft
5 Min. Lesezeit
Jacques Blom
Jacques Blom
CTO bei Fudge.
Jacques ist CTO bei Fudge, programmiert seit seinem 13. Lebensjahr und entwickelt seit über 15 Jahren für Shopify. Er leitete zuvor das Engineering bei mehreren YC-finanzierten Start-ups, bevor er zu Fudge kam, um den AI Page Builder und Store Editor zu entwerfen – Systeme, die über 22.000 Live-Seiten für mehr als 400 Shopify-Händler generiert haben. Er schreibt über Shopify-Performance, Theme-Architektur und die sichere Anwendung von LLMs in produktivem Liquid-Code.

Die wichtigsten Erkenntnisse

  • Headless Shopify mit Hydrogen bedeutet, dass du deinen eigenen React-Storefront auf der Storefront API von Shopify aufbaust, während Shopify das Backend und den Checkout behält. Hydrogen ist das Framework, Oxygen das kostenlose Hosting.1
  • Die wahren Kosten sind das Team, nicht die Software. Hydrogen und Oxygen sind kostenlos. Das permanente 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 Speed. Beides ist mittlerweile auch in einem normalen Liquid-Theme erreichbar, ohne dass man Frontend-Entwickler einstellen muss.
  • Headless ist die richtige Entscheidung für eine ganz bestimmte Minderheit: Multi-Surface-Marken, App-ähnliche Storefronts und Teams, die ohnehin schon feste Frontend-Entwickler haben.
  • Seit August 2026 funktioniert Oxygen auch für Development Stores und Trial Stores. Du kannst also einen Hydrogen-Build evaluieren, bevor du für einen Plan bezahlst.23

Headless Shopify mit Hydrogen ist das Setup, bei dem Shopify deine Produkte, dein Inventar, deine Kunden und den Checkout abwickelt, während deine eigene React-Anwendung den Storefront rendert. Hydrogen ist Shopifys Framework für den Bau dieser Anwendung, und Oxygen ist das Hosting von Shopify, auf dem sie läuft.

Dieser Guide ist eine Entscheidungshilfe und kein Verkaufs-Pitch in die eine oder andere Richtung. Er deckt ab, was Headless und Hydrogen eigentlich sind, was ein Build an Leuten und Geld kostet, wer wirklich davon profitiert, wer nicht, und wie sich die Wahl im Jahr 2026 im Vergleich zum Bleiben auf einem Liquid-Theme schlägt.

Wir bauen ein Tool, das Liquid-Themes verbessert – behalte das im Hinterkopf, wenn du unsere Schlüsse liest. Wir haben aber versucht, dies zur fairsten Erklärung zu machen, die du finden kannst, weil eine ehrliche Antwort mehr Händlern hilft als bloße Panikmache.


Warum du uns vertrauen kannst

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

Jacques, unser CTO, hat mehr als 15 Jahre Entwicklererfahrung, einschließlich React-Storefront-Arbeit. Die folgenden Aufwandsschätzungen basieren also auf dem tatsächlichen Bauen dieser Dinge, nicht auf dem bloßen Lesen darüber.

Wir bauen Fudge, einen KI-Storefront-Editor mit einem 4.9-Rating im Shopify App Store. Fudge ist unser Produkt und konkurriert um dasselbe Budget, das ein Headless-Build verschlingen würde – bewerte unsere Empfehlungs-Abschnitte mit diesem Wissen im Hinterkopf.


Was ist Headless Shopify?

Headless bedeutet, den Storefront von der Plattform zu trennen, die ihn antreibt.

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

In einem Headless-Shop entfernst du diese mittlere Ebene. Shopify behält weiterhin den Admin-Bereich, die Produkte, das Inventar, die Kunden, Rabatte und den Checkout. Deine eigene Anwendung, die irgendwo anders laufen kann, fragt bei Shopify Daten an und rendert den Storefront selbst.

Diese Unterhaltung findet über die Storefront API statt, eine GraphQL-API, die Produkte, Collections, Warenkörbe, Suche, Seiten und Blogs für jeden Client zugänglich macht.4 Sie wird vierteljährlich versioniert (2026-07 zum Zeitpunkt des Schreibens) und authentifiziert sich über Public Tokens für Browser und Private Tokens für Server.4

Eine Sache ändert Headless nicht: Der Checkout bleibt bei Shopify. Dein Custom-Storefront baut den Warenkorb auf und reicht den Käufer dann an den gehosteten Shopify-Checkout weiter. Die Anpassung des Checkouts funktioniert auf beiden Architekturen genau gleich.

Headless tauscht Shopifys Rendering-Layer gegen deine eigene Anwendung aus; alles hinter dem 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.5

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.1
  • Commerce-Komponenten - Cart-Forms, Varianten-Selektoren, Währungsformatierung, Medien, Pagination und einen Shop Pay-Button.5
  • Integrierte Features - Shopify Analytics, Customer Accounts und Caching, das speziell auf die Storefront API abgestimmt ist.5

Seit dem Release 2025.5 basiert Hydrogen auf React Router 7, dem Nachfolger des Remix-Frameworks, das ursprünglich verwendet wurde.1 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.1 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.1 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.2
  • 25. August 2026 - Dasselbe kam für Trial-Plan-Stores, mit den gleichen Login-geschützten URLs.3

Oxygen hat Laufzeitlimits, die man kennen sollte, bevor man seine Architektur darum herum aufbaut: 30 Sekunden CPU-Zeit pro Request und 128 MB RAM.1 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 vom 18. August 2026 ist es wert, genau gelesen zu werden, weil es einerseits zeigt, wie aktiv die Plattform verbessert wird, und andererseits, worauf Headless-Entwickler bisher verzichten mussten.6

Die Preview umfasst sechs Änderungen:6

UpdateWas es repariert
Cart Session AttributionWarenkörbe und Kundenkonto-Sessions bleiben synchron, sodass eingeloggte Käufer mit ihren gespeicherten Daten zur Kasse gelangen, anstatt über einen Gast-Flow.
Cart AttributesFüge Bestell-Daten (wie Geschenknachrichten) zum Warenkorb und zeilenspezifische Daten (wie Gravurtexte) zu einzelnen Artikeln hinzu.
Standard Page View EventsStorefronts feuern jetzt bei jeder Navigation ein Page-View-Event; vorher erreichte nur der erste Page-Load die Analytics-Tools.
Schnellerer Shop Pay ButtonDer Button wurde leer gerendert, bis das gehostete Script von Shopify geladen war; Hydrogen rendert ihn jetzt gestylt und klickbar, noch bevor überhaupt JavaScript läuft.
Lokales HTTPS für KundenkontenTeste Login-Flows auf einem vertrauenswürdigen lokalen Hostname ohne Tunnels oder handgestrickte Zertifikate.
Pluggable LoggingSteuere Log-Level und leite Warnungen und Errors an dein eigenes Observability-Tooling weiter.

Lies dir diese Liste ehrlich durch und du erkennst den Trade-off im Herzen von Headless. Jeder Punkt darauf ist etwas, das ein Liquid-Theme seit Jahren standardmäßig kann. Eingeloggter Checkout, vollständige Analytics-Events, ein sofortiger Shop Pay-Button – im Online Store-Kanal verkabelt Shopify all das für dich. 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 volle Kontrolle über den Storefront-Layer, inklusive der Teile, von denen du gar nicht wusstest, dass Shopify sie im Hintergrund erledigt. Unser Roundup der Shopify-Updates vom August 2026 behandelt die restlichen Plattformänderungen dieses Monats zusammen mit diesen hier.


Was Headless Shopify wirklich kostet

Hydrogen kostet keine Lizenzgebühr und Oxygen keine Hosting-Gebühr. Der wirkliche Kostenfaktor ist das Team. Hier ist der ehrliche Vergleich, basierend auf unserer Erfahrung mit dem Aufbau und der Wartung beider Arten von Storefronts.

Liquid ThemeHeadless mit Hydrogen
Software-KostenKostenlos oder einmaliger Theme-Kauf (typischerweise $0 bis $400)Kostenlos (Hydrogen + Oxygen)
Team für den BauEin Händler mit dem Theme-Editor, plus gelegentliche Hilfe von einem Theme-Entwickler1 bis 3 React-Entwickler, die Hydrogen und die Storefront API kennen (oder lernen)
Initiale BauzeitStunden für das Setup; Tage bis Wochen für tiefe AnpassungenOft 3 bis 6 Monate für einen vollständigen Production-Storefront
Typische Baukosten (Agentur)Meist unter $10.000 für tiefgreifende Theme-AnpassungenMeistens geschätzt auf $50.000 bis zu $250.000+, je nach Scope
Laufende WartungOptionale Theme-Updates; Shopify wartet die PlattformKontinuierlich: Dependency-Upgrades, vierteljährliche API-Versionssprünge, Framework-Migrationen (Remix auf React Router 7 war echte Arbeit für bestehende Builds)
Laufende TeamkostenNahe null zwischen ProjektenZumindest ein Teil der Zeit eines Frontend-Engineers, permanent
App-IntegrationenDie meisten Storefront-Apps funktionieren Out-of-the-box über Theme App ExtensionsDie Storefront-Ansicht jeder App ist individuelle Integrationsarbeit
Content- und SeitenänderungenTheme-Editor, kein Entwickler nötigEntwicklerarbeit, oder ein Headless CMS, das man ebenfalls bezahlt und wartet

Betrachte die Dollar-Beträge als Richtwerte für die Planung, nicht als fixe Angebote – der Scope verändert sie massiv. Die Zeilen, die sich nicht verändern, sind die strukturellen: Der Build dauert Monate, die Wartung endet nie, und das Marketing verliert die Möglichkeit zum Self-Service-Publishing, es sei denn, man investiert zusätzlich in ein CMS und Preview-Tooling.

Die Wartungs-Zeile verdient besondere Betonung, weil es diejenige ist, die Teams massiv unterschätzen. Ein Liquid-Theme, das ein Jahr lang in Ruhe gelassen wird, funktioniert weiterhin. Ein Hydrogen-Storefront, das ein Jahr in Ruhe gelassen wird, hat eine veraltete API-Version, alte Dependencies mit Security-Advisories und möglicherweise steht eine Framework-Migration an. Irgendjemand muss sich darum kümmern, für immer.

Möchtest du ein Custom-Storefront-Design, ohne ein Frontend-Team einzustellen?
Try Fudge for Free

Wer braucht Headless Shopify wirklich?

Headless ist die richtige Architektur für eine echte Minderheit von Shops. Das wiederkehrende Muster bei den wirklich passenden Cases: Der Storefront ist eine Applikation, nicht nur eine Reihe von Seiten.

Du gehörst wahrscheinlich zu dieser Minderheit, wenn mehrere dieser Punkte auf dich zutreffen:

  • Du betreibst mehrere Oberflächen aus einem Backend. Ein Webshop plus eine native Mobile-App, Kioske im Geschäft oder Embedded Commerce in einem anderen Produkt. Genau dafür ist die Storefront API gemacht, die verschiedene Clients bedient.4
  • Dein Storefront fühlt sich an wie eine App. Produkt-Konfiguratoren, Virtual Try-On, Custom-Subscription-Dashboards, eingeloggte Erlebnisse mit viel Interaktivität. Wenn das Frontend wirklich eine React-Anwendung ist, dann ist es ehrlichere Architektur (und nicht nur ein Trend), sie auch in einem React-Framework zu bauen.
  • Content ist dein Burggraben und er lebt in einem CMS. Editorial-Commerce-Hybride, die im Zeitschriften-Rhythmus publizieren und ohnehin schon für ein Headless CMS aufgestellt und ausgestattet sind, können den Commerce-Teil in diese Pipeline einklinken, anstatt umgekehrt.
  • Du hast bereits feste Frontend-Entwickler. Nicht nur Zugang zu einer Agentur – sondern festangestellte Entwickler auf der Payroll, deren Job der Storefront ist. Headless ohne sie scheitert langsam und teuer.
  • Du bist bei Liquid gegen eine echte Wand gelaufen. Nicht “das Theme fühlt sich limitierend an”, sondern eine spezifische, benennbare Funktionalität, die du versucht hast und in einem Theme nicht bauen konntest. Solche Wände existieren; sie sind nur seltener, als Agenturen oft suggerieren.

Ein weiterer aufkommender Use-Case geht in beide Richtungen. KI-Shopping-Agents durchstöbern und kaufen zunehmend im Namen von Kunden. Um sie gut zu bedienen, braucht man strukturierte Daten und saubere APIs. Headless-Teams haben die volle Kontrolle über diese Oberfläche, aber Shopify liefert dieselbe Agent-Facing-Infrastruktur auch an jeden Shop aus, ob Theme oder nicht – unser Guide zu Agent-Ready Shopify Storefronts behandelt, worauf es dabei wirklich ankommt. Agent-Readiness allein ist kein Grund für Headless.

Wenn dein Storefront wirklich eine Anwendung ist, die mehr als eine Oberfläche bedient, rechtfertigt Headless seine Kosten; wenn es nur Seiten sind, tut es das meistens 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 ist das ehrliche Muster, das wir beobachten. Eine Marke wächst aus dem Look ihres Themes heraus, bekommt zu hören: „Für echte Gestaltungsfreiheit brauchst du Headless“, und beginnt, die Preise von React-Agenturen zu vergleichen. Aber was sie eigentlich wollen, ist keine Architektur. Es ist ein Storefront, der individuell aussieht und schnell live geht.

Das ist jetzt ein gelöstes Problem innerhalb der Theme-Ebene. KI-Theme-Tools schreiben denselben individuellen Liquid-, CSS- und JavaScript-Code, den auch ein Theme-Entwickler schreiben würde, direkt in Ihr bestehendes Theme – unser Leitfaden zum Shopify-KI-Toolkit stellt diese Tool-Kategorie vor und erklärt, warum diese Generation von Tools die alten Page-Builder mit Widget-Injektion ersetzt hat, anstatt sie zu erweitern.

Das ist die Aufgabe, die Fudge, unser Produkt, erledigt. Sie beschreiben den Abschnitt oder die Seite, die Sie möchten, Fudge liest das tatsächliche Theme Ihres Shops und erstellt nativen Code in einem Theme-Entwurf, den Sie in der Vorschau ansehen, bevor etwas live geht. Das Ergebnis ist Standard-Theme-Code, der Ihnen gehört – er übersteht die Deinstallation der App, was kein Headless-Build und kein herkömmlicher Page-Builder von sich behaupten kann. Es gibt einen kostenlosen Plan sowie Pläne mit Build-Credits ab 25 $/Monat, und die Seite zum KI-Page-Builder zeigt, wie das in der Praxis aussieht.

Der faire Vergleich lautet also nicht „Headless vs. Standard-Theme“, sondern:

  • Headless mit Hydrogen: Totale Designkontrolle, monatelange Entwicklungszeit, dauerhafte technische Betreuung.
  • Ein Liquid-Theme mit KI-erstelltem, individuellem Code: Nahezu vollständige Designkontrolle für Seiten und Abschnitte, Stunden bis Tage pro Änderung, kein Entwicklerteam, und der Theme-Editor funktioniert weiterhin für Ihre Marketing-Mitarbeiter.

Headless ist immer noch die bessere Wahl, wenn es um Anwendungsverhalten oder mehrere Kanäle geht. Für die Mehrheit, deren Anforderung lautet, „unseren Shop so aussehen und konvertieren zu lassen wie die Marken, die wir bewundern“, erreicht die Theme-Ebene dies nun zu einem Bruchteil der Kosten.

Die meisten „Wir brauchen Headless“-Gespräche bedeuten in Wirklichkeit: „Wir brauchen ein individuelles Design, ohne auf Entwickler warten zu müssen“ – und dafür muss man die Theme-Ebene nicht mehr verlassen.


Ist Headless Shopify wirklich schneller?

Manchmal. Nicht automatisch, und hier ist Ehrlichkeit am wichtigsten.

Ein gut gebauter Hydrogen-Storefront ist wirklich schnell: Server-Side Rendering an der Edge, strikte Kontrolle über jedes Script, 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 letzten rauen Kanten glattzieht.6

Aber Architektur garantiert keine Ergebnisse. Ein Hydrogen-Build, vollgestopft mit Client-Side JavaScript, extrem großen Bildern und Drittanbieter-Scripts, ist langsamer als ein diszipliniertes Liquid-Theme, und wir haben von beidem oft genug die Performance gemessen. Moderne Online Store 2.0-Themes sind schnell, wenn man sie sauber hält; die Shop-Killer sind auf beiden Stacks exakt dieselben – Script-Gewicht, Bild-Gewicht und App-Bloat.

Zwei Ressourcen, wenn Speed dein eigentliches Ziel ist: Unser Shopify Mobile Speed Guide behandelt die Fixes, die die Core Web Vitals bei einem Theme wirklich verbessern, und der State of Shopify Performance 2026 Report zeigt auf, was reale Shops auf beiden Architekturen erreichen.

Wenn dein Shop heute langsam ist, solltest du die Ursache diagnostizieren, bevor du die Plattform wechselst. Die meisten langsamen Shopify-Shops sind aus Gründen langsam, die ein Rebuild nur allzu getreu reproduzieren würde.


Headless Shopify Entscheidungs-Checkliste

Bewerte dich selbst ganz ehrlich. Gib dir für jede zutreffende Aussage einen Punkt:

  1. Wir betreiben, oder werden in den nächsten 18 Monaten betreiben, eine zweite Storefront-Oberfläche neben dem Webshop (Native App, Kiosk, Embedded Commerce).
  2. Unser Storefront braucht ein App-Verhalten, das ein Theme nicht abbilden kann, und wir können das spezifische Feature benennen, das wir bereits erfolglos in Liquid zu bauen versucht haben.
  3. Wir haben mindestens einen Frontend-Entwickler auf der Payroll, der dauerhaft für den Storefront verantwortlich sein wird.
  4. Unser Content-Team arbeitet bereits in einem Headless CMS, oder wir haben das Budget für eines inklusive der Integration eingeplant.
  5. Wir haben jede Storefront-App, auf die wir angewiesen sind, auditiert und ihre individuelle Integration budgetiert.
  6. Wir können einen 3- bis 6-monatigen Build und einen permanenten Budgetposten für die Wartung finanzieren, ohne dass Acquisition oder CRO darunter leiden.
  7. Das Marketing akzeptiert, dass Seiten- und Section-Änderungen über das Engineering oder das CMS laufen und nicht über einen Theme-Editor.

Fünf oder mehr: Du bist ein echter Kandidat für Headless. Setze einen Hydrogen-Storefront auf einem Development Store auf – seit August 2026 kostet das nichts2 – und validiere dein Vorhaben mit einem echten Prototyp, bevor du dich committest.

Drei oder vier: Die Option besteht, ist aber nicht offensichtlich. Baue einen Prototyp auf einem Dev Store und teste parallel, ob KI-gestützte Theme-Arbeit deine tatsächlichen Lücken nicht auch für einen Bruchteil des Budgets schließt.

Zwei oder weniger: Bleib bei Liquid. Investiere das gesparte Geld lieber in Design-, Speed- und Conversion-Maßnahmen, die schon dieses Quartal online gehen 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.1623

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

Was ist Headless Shopify mit Hydrogen?

Headless Shopify trennt das Storefront von der Plattform: Shopify verwaltet weiterhin Produkte, Inventar, Kunden und den Checkout, während Ihre eigene Anwendung das Storefront mithilfe der GraphQL Storefront API rendert. Hydrogen ist Shopifys React-basiertes Framework zur Erstellung dieser Anwendung, und Oxygen ist Shopifys Hosting-Plattform, um sie auszuführen.

Ist die Nutzung von Hydrogen kostenlos?

Ja. Hydrogen ist ein Open-Source-Framework ohne Lizenzgebühr, und das Oxygen-Hosting ist in den kostenpflichtigen Shopify-Plänen ohne zusätzliche Kosten enthalten. Seit August 2026 funktioniert Oxygen auch in Entwickler- und Test-Shops, wobei die Deployment-URLs durch einen Shop-Login geschützt sind. Die wahren Kosten von Headless sind das Entwicklerteam, das das Storefront erstellt und wartet.

Wie viel kostet ein Headless-Shopify-Build?

Agentur-Builds für ein komplettes Hydrogen-Storefront werden üblicherweise mit 50.000 bis 250.000 $ oder mehr über einen Zeitraum von etwa 3 bis 6 Monaten veranschlagt, wobei der Umfang diese Zahlen stark beeinflusst. Die größeren langfristigen Kosten sind die Wartung: Upgrades von Abhängigkeiten, vierteljährliche API-Versionsupdates und Framework-Migrationen erfordern eine dauerhafte technische Betreuung, die ein Liquid-Theme nicht benötigt.

Ist Headless Shopify schneller als ein Liquid-Theme?

Nicht automatisch. Ein disziplinierter Hydrogen-Build mit Edge-Rendering kann sehr schnell sein, aber ein Hydrogen-Storefront, das mit clientseitigem JavaScript und Skripten von Drittanbietern überladen ist, ist langsamer als ein sauberes Online Store 2.0 Theme. Die Performance hängt bei beiden Architekturen vom Gewicht der Skripte, der Bildverarbeitung und der App-Disziplin ab. Analysieren Sie also Ihren aktuellen Shop, bevor Sie für mehr Geschwindigkeit die Plattform wechseln.

Funktionieren Shopify-Apps auf einem Headless-Storefront?

Backend-Apps (Inventar, Versand, Buchhaltung) funktionieren normal, da sie mit dem Shopify-Admin kommunizieren. Apps, die auf das Storefront ausgerichtet sind, sind das Problem: Bewertungs-Widgets, Bundles, Quizze und Treueanzeigen integrieren sich über Theme-App-Erweiterungen in Themes, die bei Headless nicht gerendert werden. Jede davon erfordert eine individuelle Integrationsarbeit mit der API der App, sofern eine existiert.

Verändert Headless Shopify den Checkout?

Nein. Ein Hydrogen-Storefront erstellt den Warenkorb und übergibt den Käufer dann an den von Shopify gehosteten Checkout, denselben Checkout, den auch ein Theme verwendet. Die Anpassung des Checkouts funktioniert bei beiden Architekturen über die Checkout-Erweiterbarkeit. Der Wechsel zu Headless fügt also weder Checkout-Funktionen hinzu noch entfernt er welche.

Basiert Hydrogen auf Remix oder React Router?

React Router. Hydrogen verwendete ursprünglich das Remix-Framework und migrierte dann in der Version 2025.5 zu React Router 7, da React Router 7 die Routing- und Datenfunktionen von Remix übernommen hat. Für das Recruiting bedeutet dies, dass jeder erfahrene React-Entwickler an einer Hydrogen-Codebasis arbeiten kann, nachdem er die Konventionen von Hydrogen und die Storefront-API von Shopify gelernt hat.

Was sollte ich anstelle von Headless verwenden, wenn ich nur ein individuelles Design möchte?

Arbeiten Sie auf der Theme-Ebene. KI-Storefront-Editoren wie Fudge (unser Produkt) erstellen individuelle Abschnitte und Seiten als nativen Liquid-, CSS- und JavaScript-Code in einem Theme-Entwurf, den Sie vor der Veröffentlichung in der Vorschau ansehen können. So erhalten Sie ein individuelles Design ohne Entwicklerteam, und der Code gehört weiterhin Ihnen. Dedizierte Page Builder sind die ältere Alternative für dasselbe Ziel, obwohl die meisten ihren eigenen Code injizieren, anstatt nativen Theme-Code zu schreiben.

Jacques's signature
Holen Sie sich den individuellen Storefront ohne das Entwicklerteam.

Footnotes

  1. „Hydrogen and Oxygen fundamentals“, Shopify-Entwicklerdokumentation, beschreibt Hydrogen und Oxygen als Shopifys empfohlenen Stack für Headless Commerce, React Router als das Framework, auf dem Hydrogen aufbaut, Oxygen ohne zusätzliche Kosten in kostenpflichtigen Shopify-Plänen und die Limits von 30 Sekunden CPU / 128 MB Worker. Geprüft September 2026: https://shopify.dev/docs/storefronts/headless/hydrogen/fundamentals 2 3 4 5 6 7

  2. „Oxygen is now available on development stores“, Shopify-Entwickler-Changelog, August 3, 2026, mit dem Hinweis, dass Deployment-URLs auf Entwickler-Shops einen Shop-Login erfordern: https://shopify.dev/changelog/oxygen-is-now-available-on-development-stores 2 3 4

  3. „Oxygen is now available on trial plan stores“, Shopify-Entwickler-Changelog, August 25, 2026: https://shopify.dev/changelog/oxygen-is-now-available-on-trial-plan-stores 2 3

  4. „Storefront API“, Shopify-Entwicklerdokumentation, behandelt den GraphQL-Zugriff auf Produkte, Kollektionen, Warenkörbe und die Suche, öffentliche und private Zugriffstoken sowie die API-Version 2026-07. Geprüft September 2026: https://shopify.dev/docs/api/storefront 2 3

  5. Website des Hydrogen-Frameworks, mit der Positionierung „Headless in der halben Zeit“ und der Liste der Commerce-Komponenten und integrierten Shopify-Integrationen. Geprüft September 2026: https://hydrogen.shopify.dev/ 2 3

  6. „Hydrogen developer preview update: August 18, 2026“, Shopify-Entwickler-Changelog, listet Warenkorb-Sitzungszuordnung, Warenkorb-Attribute, Standard-Seitenaufruf-Events, den vorgerenderten Shop Pay-Button, lokales HTTPS für die Entwicklung von Kundenkonten und einsteckbares Logging auf: https://shopify.dev/changelog/hydrogen-developer-preview-update-august-18-2026 2 3 4

Ähnliche Beiträge