Headless Shopify mit Wasserstoff: Wann und wie

Die meisten Shopify-Shops müssen nicht Headless sein. Diese Aussage steht im Widerspruch zum vorherrschenden Narrativ in Shopify-Entwicklerkreisen, wo Headless oft als die unvermeidliche Weiterentwicklung jeder ernsthaften E-Commerce-Marke positioniert wird. Die Realität ist differenzierter: Headless Shopify ist die richtige Wahl für ein bestimmtes Händlerprofil und die falsche Wahl für viele andere, die deutlich mehr ausgeben würden, um geringfügig bessere Ergebnisse zu erzielen.

Dieser Leitfaden erklärt, was Headless-Shopify eigentlich bedeutet, wenn Hydrogen (Shopifys offizielles React-basiertes Headless-Framework) die richtige Wahl ist, wie man damit baut und wie man vor dem Commit eine ehrliche Kosten-Nutzen-Bewertung durchführt.

Wichtige Erkenntnisse

• Headless Shopify entkoppelt die Storefront (Frontend) von der Commerce Engine (Shopify Backend) über die Storefront API
• Hydrogen ist Shopifys offizielles React-basiertes Framework für Headless Storefronts, das auf Remix basiert – Die meisten Geschäfte mit einem Jahresumsatz von weniger als 5 Millionen US-Dollar sind mit optimierten Shopify 2.0-Themen besser bedient als mit einer Headless-Architektur
• Headless ist gerechtfertigt, wenn: hochgradig individuelle UX-Anforderungen, Content-Commerce-Integration, Multi-Channel-Publishing oder extreme Leistungsanforderungen – Oxygen ist Shopifys Hosting-Plattform für Hydrogen-Apps – Bereitstellung ohne Konfiguration mit globalem Edge-Netzwerk
• Die Gesamtbetriebskosten für Headless sind bei laufender Wartung drei- bis fünfmal höher als für themenbasiertes Shopify – Die Storefront-API von Shopify bietet Zugriff auf Produkte, Sammlungen, Warenkorb, Kasse und Kundendaten – Remix (zugrunde liegendes Hydrogen) ermöglicht serverseitiges Rendering und Streaming von HTML für hervorragende Core Web Vitals

---

Was Headless Shopify eigentlich bedeutet

In einem traditionellen Shopify-Shop läuft alles auf der Shopify-Plattform: Produktdaten, das Storefront-Theme, der Warenkorb, die Kasse, Kundenkonten und die Bestellverwaltung. Die Liquid-Vorlagensprache rendert Produktseiten serverseitig in der Shopify-Infrastruktur.

In einer Headless Shopify-Architektur:

• Commerce-Engine (Shopify): Verwaltet Produkte, Inventar, Bestellungen, Kunden, Zahlungen und Erfüllung – unverändert
• Storefront (Ihr benutzerdefiniertes Frontend): Eine separate Anwendung – React, Next.js, Hydrogen oder ein beliebiges Web-Framework – die Daten von Shopify über die Storefront-API abruft und das kundenorientierte Erlebnis darstellt

Das Frontend kann überall ausgeführt werden: Vercel, Netlify, Cloudflare Workers, Shopifys eigene Oxygen-Plattform oder Ihre eigene Infrastruktur. Das Commerce-Backend bleibt Shopify.

Warum sollten Sie das tun?

Die Motivation für Headless ist immer eine oder mehrere der folgenden:

• Benutzerdefinierte UX, die in der Sektions-/Block-Theme-Architektur von Shopify nicht erreichbar ist
• Content-Commerce-Integration – Einbettung von Produkten in ein CMS wie Contentful, Sanity oder Prismic
• Multi-Channel-Publishing – dieselben Produktdaten, die eine Website, eine mobile App, Digital Signage und Voice Commerce unterstützen
• Leistung – volle Kontrolle über das JavaScript-Bundle, das Laden von Komponenten und die Rendering-Strategie
• Vorliebe des technischen Teams – ein Team von React-Entwicklern, die Liquid-Vorlagen als unangenehm empfinden

---

Wasserstoff: Shopifys offizielles Headless Framework

Hydrogen ist das React-basierte Framework von Shopify zum Aufbau kopfloser Shopify-Storefronts. Es basiert auf Remix (dem React-Framework, jetzt Teil von React Router 7) und ist für die Storefront-API von Shopify optimiert.

Was Wasserstoff bietet

Sauerstoff: Shopifys Edge-Hosting für Wasserstoff

Oxygen ist Shopifys globale Edge-Bereitstellungsplattform für Wasserstoff-Apps. Es ist ohne zusätzliche Kosten in Shopify Plus enthalten. Oxygen stellt Ihre Hydrogen-App im globalen Edge-Netzwerk von Cloudflare bereit – dieselbe Infrastruktur, die auch die eigenen Storefronts von Shopify nutzen.

Vorteile von Oxygen gegenüber Drittanbieter-Hosting:

• Konfigurationsfreie Bereitstellung über die Shopify-CLI
• Automatisches HTTPS auf Ihrer benutzerdefinierten Domain
• Globales CDN mit Edge-Caching
• Erstklassige Integration mit der Dateninfrastruktur von Shopify (reduzierte API-Latenz)
• Keine Egress- oder Compute-Preise für typisches Datenverkehrsaufkommen

Der Hauptgrund, sich für Vercel oder Netlify gegenüber Oxygen zu entscheiden: Sie benötigen eine Hosting-Funktion, die Oxygen nicht unterstützt (Datenbankverbindungen, externe API-Integrationen, die keine Edge-Laufzeit erfordern usw.) oder Sie nutzen Shopify Plus nicht.

---

Die Shopify Storefront API: Worauf Sie zugreifen können

Die Storefront-API ist die öffentliche API, die Hydrogen (und jede Headless-Implementierung) zum Abrufen von Daten verwendet. Es handelt sich um eine GraphQL-API mit öffentlichen Zugriffstokens – für grundlegende Vorgänge ist kein serverseitiges Geheimnis erforderlich.

Verfügbare Ressourcen

Was die Storefront-API nicht kann

Für die vollständige Commerce-Funktionalität in einem Headless-Setup benötigen Sie normalerweise sowohl die Storefront-API (öffentlich, clientseitig) als auch die Admin-API (privat, nur serverseitig) für Vorgänge auf Administratorebene.

---

Aufbau einer Wasserstoff-Storefront: Die Grundlagen

Projekterstellung

npm create @shopify/hydrogen@latest
# Select: Connect to existing Shopify store
# Enter your myshopify.com domain
# The CLI creates a Hydrogen project with Storefront API connected

Dies bildet das Gerüst eines vollständigen Wasserstoffprojekts mit:

• Remix v2-Routing (dateibasiertes Routing in /app/routes/)
• Shopify Storefront API-Client vorkonfiguriert
• Beispiele für Produkt-, Sammel- und Warenkorbrouten
• Konfiguration der Sauerstoffbereitstellung

Kernarchitekturmuster

Hydrogen verwendet das Lademuster von Remix für den serverseitigen Datenabruf:

In der Produktroute (/app/routes/products.$handle.tsx) ruft die Loader-Funktion Produktdaten von der Storefront-API auf dem Server ab, rendert mit React und streamt die HTML-Antwort. Dies unterscheidet sich grundlegend vom clientseitigen SPA-Rendering – der HTML-Code ist vollständig, wenn er im Browser ankommt, was für SEO und Core Web Vitals von entscheidender Bedeutung ist.

Der Warenkorb: Clientseitige Komplexität

Der Warenkorb in Hydrogen verwendet die Warenkorb-API von Shopify (ein serverbasierter Warenkorb, der nicht auf localStorage basiert). Hydrogen bietet einen CartProvider-Kontext und einen useCart-Hook, der den Warenkorbstatus verwaltet und mit der Warenkorb-API von Shopify synchronisiert. Warenkorbvorgänge (Hinzufügen, Aktualisieren, Entfernen) sind optimistisch – die Benutzeroberfläche wird sofort aktualisiert und der API-Aufruf erfolgt im Hintergrund.

Checkout-Weiterleitung

Der Standard-Checkout-Ablauf von Hydrogen leitet Kunden zur gehosteten Checkout-URL von Shopify weiter. Das bedeutet, dass Ihr benutzerdefiniertes Frontend das Storefront-Erlebnis übernimmt, der Checkout selbst jedoch weiterhin auf der Infrastruktur von Shopify läuft (mit allen integrierten Shopify Payments-, Trust- und Checkout-Optimierungen).

Für Händler auf Shopify Plus, die auch einen vollständig benutzerdefinierten Checkout wünschen, ist Checkout Extensibility der richtige Weg – und nicht den Aufbau eines benutzerdefinierten Checkouts außerhalb von Shopify.

---

Wenn sich Headless lohnt

Nutzen Sie diesen Entscheidungsrahmen:

Das Leistungsargument: Oft überbewertet

Viele Headless-Befürworter nennen die Leistung als Hauptgrund. Aber das Dawn-Theme von Shopify (und gut optimierte Premium-Themes) erzielen hervorragende Core Web Vitals-Werte. Der Unterschied in der Leistungsobergrenze zwischen einem gut optimierten nativen Theme und einer gut optimierten Hydrogen-App ist für den realen Datenverkehr oft marginal.

Wo Headless wirklich in Sachen Leistung gewinnt: sehr umfangreiche Produktkatalogseiten mit komplexer Filterung, medienreiche redaktionelle Erlebnisse mit Videos und Animationen und Websites, die aggressive Edge-Caching-Strategien erfordern, die das CDN von Shopify allein nicht optimieren kann.

Das Argument der Content-Commerce-Integration: Oft untergewichtet

Das stärkste Argument für Headless ist die Content-Commerce-Integration. Marken, die redaktionelle Inhalte neben Produkten veröffentlichen – Lookbooks, Rezepte, Anleitungen, die Produkte einbetten – profitieren enorm von einem einheitlichen Content-Modell. Ein Contentful- oder Sanity-CMS mit Produktreferenzen ruft Produktdaten aus der Storefront-API von Shopify ab und stellt Redaktion und Handel auf einer einheitlichen, SEO-optimierten Seite dar. Dies ist im nativen Shopify nicht ohne erhebliche Kompromisse möglich.

---

Headless vs. Native Theme: Gesamtkostenvergleich

Der Kostenunterschied ist real und erheblich. Für eine Marke mit einem Jahresumsatz von 2 Millionen US-Dollar könnte Headless Shopify 150.000 US-Dollar für die anfängliche Entwicklung und 50.000 US-Dollar pro Jahr für die Wartung kosten – was die Abonnementkosten für Shopify Plus in den Schatten stellt. Um dies zu rechtfertigen, muss die ROI-Berechnung erhebliche Umsatzauswirkungen der verbesserten UX aufzeigen.

---

App-Kompatibilität: Die Hidden Headless Challenge

Das Shopify-App-Ökosystem ist in erster Linie für native Liquid-basierte Storefronts konzipiert. Viele beliebte Shopify-Apps integrieren JavaScript in das Liquid-Theme – sie verfügen nicht über ein Storefront-API-Äquivalent.

Apps, die kopflos funktionieren

Apps, die nicht kopflos funktionieren

Die meisten Shopify-Apps, die die Liquid-Theme-Integration, ScriptTag oder checkout.liquid verwenden, sind nicht mit Headless-Storefronts kompatibel. Dazu gehören viele CRO-Tools, einige Treue-Apps und ältere Bewertungsplattformen.

Bevor Sie Headless verwenden, überprüfen Sie Ihren gesamten App-Stack auf Kompatibilität. Jede inkompatible App erfordert entweder: (1) das Finden einer Headless-kompatiblen Alternative, (2) das Erstellen benutzerdefinierter Funktionen oder (3) das Akzeptieren des Verlusts dieser Funktionalität.

---

Alternative: Der „hybride“ Ansatz

Anstatt völlig Headless zu nutzen, profitieren viele Händler von einem hybriden Ansatz:

• Standard-Shopify-Theme für den Großteil der Storefront (hohe App-Kompatibilität, geringer Wartungsaufwand)
• Benutzerdefinierte React-Anwendung für bestimmte hochwertige Seiten (Homepage, Produktseiten), bei denen es auf eine einzigartige UX ankommt
• Die Storefront-API von Shopify unterstützt die benutzerdefinierten Komponenten innerhalb des ansonsten nativen Themes

Dieses Hybridmodell reduziert Kosten und Komplexität und bietet gleichzeitig benutzerdefiniertes UX dort, wo es am wichtigsten ist.

---

Häufig gestellte Fragen

Benötige ich Shopify Plus für eine Headless Hydrogen-Implementierung?

Nein – Hydrogen und die Storefront API sind in allen Shopify-Plänen verfügbar. Für Oxygen Hosting (Shopifys Edge-Plattform für Wasserstoff) ist Shopify Plus erforderlich. Bei anderen Plänen hosten Sie die Hydrogen-App auf Vercel, Netlify, Cloudflare Workers oder einem beliebigen Node.js-kompatiblen Host. Der Storefront-API-Zugriff und das Hydrogen-Framework sind unabhängig vom Plan vollständig verfügbar.

Wie funktioniert SEO in einem Headless-Shop von Hydrogen?

Hydrogen verwendet das serverseitige Rendering von Remix, das vollständiges HTML auf dem Server erzeugt – der gleiche Ansatz wie die nativen Liquid-Themes von Shopify. Suchmaschinen-Crawler erhalten vollständig gerendertes HTML, in dem alle Produktinhalte sichtbar sind. Hydrogen umfasst SEO-Dienstprogramme für Meta-Tags, kanonische URLs und strukturierte Daten. Der SEO-Vorteil gegenüber CSR-SPAs (Client-Side-Rendering) ist erheblich; Im Vergleich zu nativen Shopify-Themes ist der Unterschied marginal, wenn beide richtig konfiguriert sind.

Was ist der Unterschied zwischen Hydrogen und Next.js Commerce für Shopify?

Bei beiden handelt es sich um React-basierte Frameworks für Headless Shopify. Hydrogen ist das offizielle Framework von Shopify, das auf Remix basiert und erstklassige Shopify Storefront-API-Integration, Oxygen-Hosting und Shopify-spezifische Helfer (Warenkorb, Kasse, Analyse) bietet. Next.js Commerce ist Vercels Open-Source-Starterkit für Headless-E-Commerce, das mehrere Plattformen unterstützt, einschließlich Shopify. Wasserstoff verfügt über eine tiefergehende Shopify-spezifische Optimierung; Next.js Commerce bietet mehr Flexibilität, wenn Sie die Commerce-Plattform wechseln oder Next.js-spezifische Funktionen benötigen.

Kann ich den Checkout von Shopify mit einem Headless-Frontend nutzen?

Ja – das ist das standardmäßige Headless-Muster. Ihr benutzerdefiniertes Hydrogen-Frontend verwaltet die Storefront und beim Bezahlen leiten Sie zur gehosteten Bezahl-URL von Shopify weiter (generiert aus dem Feld checkoutUrl der Warenkorb-API). Dadurch erhalten Sie eine vollständig benutzerdefinierte Benutzeroberfläche für die Produkterkennung und den Warenkorb sowie den optimierten, auf Conversions getesteten Checkout von Shopify für den Zahlungsschritt. Checkout-Erweiterbarkeit (Shopify Plus) ermöglicht die Anpassung des Shopify-Checkouts selbst mit Erweiterungen.

Wie lange dauert eine Wasserstoffimplementierung normalerweise?

Eine vollständig benutzerdefinierte Hydrogen-Storefront, die ein ausgereiftes Shopify-Theme ersetzt: 16–52 Wochen, je nach Komplexität. Eine einfachere Wasserstoff-Implementierung für die Eröffnung eines neuen Geschäfts ohne Altlastenkomplexität: 8–16 Wochen. Wichtige Faktoren für den Zeitplan sind: Komplexität des kundenspezifischen Designs, Anzahl der Produkttypen und Kataloggröße, erforderliche Ersetzungen des App-Ökosystems und Teamerfahrung speziell mit Wasserstoff.

---

Nächste Schritte

Headless Shopify mit Hydrogen ist eine leistungsstarke Architektur für den richtigen Händler – die Entscheidung erfordert jedoch eine ehrliche Bewertung Ihrer UX-Anforderungen, Entwicklerkapazität, Ihres Budgets und der Abhängigkeiten des App-Ökosystems.

Zu den Shopify Plus-Diensten von ECOSIRE gehören Headless-Architekturberatung, Hydrogen-Storefront-Entwicklung, Storefront-API-Integration und Oxygen-Bereitstellung. Wir helfen Händlern bei der Beurteilung, ob Headless die richtige Wahl ist, und führen die Implementierung zum richtigen Zeitpunkt durch – einschließlich hybrider Ansätze, die benutzerdefinierte UX zu geringeren Kosten als Full Headless bereitstellen.

Vereinbaren Sie eine Beratung zur Headless-Architektur, um Ihre spezifischen Anforderungen zu ermitteln und eine ehrliche Empfehlung zu erhalten, ob Headless Shopify die richtige Investition für Ihren Shop ist.