Hydrogen oder Liquid: Welches Shopify-Storefront passt zu Ihrem Shop?

Sie haben sich für Shopify entschieden. Dann folgt sofort die nächste Frage: Welches Storefront passt zu Ihrem Shop? Shopify bietet zwei Wege. Liquid, die vertraute Arbeit mit Themes, und Hydrogen, das headless Framework auf React-Basis. Beide sprechen über APIs mit derselben Shopify-Plattform, verlangen aber andere Arbeit, andere Leute und passen zu anderen Plänen. Wir stellen sie nebeneinander.

Der Weg über Liquid: bewährt und sofort einsatzbereit

Liquid ist die eigene Template-Sprache von Shopify. In .liquid-Dateien treffen HTML, CSS und die Einstellungen aus Ihrem Shopify-Admin aufeinander. Darunter läuft Ruby on Rails, ausgelegt auf einfache Handhabung und Tempo.

• Schnell live, niedrige Kosten
  Sie richten ein Theme ein und passen es im Shopify-Admin an. Für kleine und mittlere Shops reicht das.
  
  

• Das Shopify-Ökosystem funktioniert vollständig
  Apps, visuelle Builder und Templates aus dem Theme Store greifen ohne Umweg ineinander.
  
  

• Auch ohne Entwickler zu ändern
  Marketing und Design ändern Sektionen, Layouts und Einstellungen selbst im Shopify-Dashboard.
  
  

Die Dokumentation ist umfangreich und jeder Shopify-Entwickler kennt die Sprache. Für die meisten Shops ist Liquid deshalb der Ausgangspunkt.

Das Hydrogen-Framework: Sie bestimmen alles selbst

Hydrogen ist das React-Framework von Shopify für headless Storefronts. Es geht um Kontrolle: über den Aufbau, über das Design und über das Tempo der Seite.

• Eigene Oberfläche & Interaktion
  Sie bauen Komponenten, Animationen und persönliche Elemente genau so, wie Ihre Marke sie braucht.
  
  

• Außerhalb von Shopify gehostet = headless Storefront
  Sie gehen auf Oxygen, Vercel oder Netlify live und binden ein headless CMS sowie APIs an.
  
  

• Auf Tempo gebaut
  Sie steuern Ladezeit, Lighthouse-Werte und TTFB selbst. Dafür ist die technische Einrichtung aufwendiger.
  
  

Dieser Weg passt zu Marken, die eine eigene Oberfläche wollen und über mehrere Kanäle gleichzeitig verkaufen.

Was technisch unter Ihrem Shopify-Storefront steckt

Shopify hostet Ihren Shop selbst. Im Kern läuft ein Backend auf Ruby on Rails, das Produkte, Preise, Bestellungen und Kundendaten verwaltet. Bedient wird das alles über den Shopify-Admin, und dafür brauchen Sie keinen technischen Hintergrund. Aus diesem einen Dashboard steuern Sie Inhalte, Sortiment und das Aussehen Ihres Storefronts.

Das wichtigste Werkzeug in diesem System ist Liquid, die eigene Theme-Sprache von Shopify. Damit legen Sie Struktur und Design der Vorderseite fest. Liquid ähnelt HTML, bringt aber eine eigene Syntax mit, um Inhalte im Moment des Aufrufs zu laden. Es läuft mit HTML und CSS zusammen, sodass Sie den Shop nach Ihren Wünschen gestalten, ohne die Backend-Logik anzufassen. Jedes Shopify-Theme ist in Liquid gebaut, ob Sie es im Theme Store kaufen oder von Grund auf entwickeln lassen. Installiert wird direkt aus dem Dashboard, kostenlos oder kostenpflichtig. Das Backend verwaltet Shopify, Sie und Ihre Entwickler kümmern sich nur um die Vorderseite.

Hydrogen funktioniert anders. Es ist ein Frontend-Framework von Shopify, mit dem Entwickler ein eigenes Storefront in React bauen. Liquid ist eine Sprache für Templates, Hydrogen ein Framework auf JavaScript-Basis. Entwickler schreiben Komponenten in JSX, einer Mischung aus JavaScript und HTML, und damit werden interaktive Elemente und schnelles Rendering möglich. Diese andere Architektur öffnet Entwürfe, die mit einem gewöhnlichen Theme nicht zu machen sind.

Diese Kontrolle hat ihren Preis: Der Bauprozess verläuft anders. Ein Hydrogen-Storefront läuft nicht auf den Servern von Shopify. Shopify führt keine JavaScript-Frameworks wie React aus, also geht die Seite woanders live: auf Oxygen, dem Hosting von Shopify für Hydrogen, auf Vercel oder in einer anderen Umgebung, die mit JavaScript umgehen kann. Die Verbindung zum Shopify-Backend läuft über APIs, für Inhalte kommt oft ein headless CMS wie Storyblok dazu. Produkte und Bestand bleiben mit Ihrem Shopify-Admin synchron, doch das Ganze ist technischer und braucht dauerhaft Entwickler.

Die Wahl zwischen Liquid und Hydrogen hängt davon ab, was das Projekt verlangt. Für die meisten Shops ist Liquid die Antwort: schnell live, zuverlässig und leicht zu pflegen. Es kostet weniger und Sie brauchen kein festes Entwicklungsteam. Hydrogen gibt Ihnen mehr Freiheit und mehr Zugriff auf das Tempo, kostet aber mehr und ist komplizierter. Das lohnt sich bei schnell wachsenden Marken und Enterprise-Shops mit eigener UI/UX, mehreren Verkaufskanälen und harten Anforderungen an die Ladezeit. Am Ende ist nicht die Frage, was besser ist, sondern was zu Ihren Zielen, Ihren Leuten und Ihrem Zeitplan passt.

Das richtige Shopify-Frontend wählen

Wann Sie Liquid wählen

• Sie wollen schnell live gehen und die Kosten niedrig halten.

• Ihr Team arbeitet nicht täglich mit JavaScript oder React.

• Sie setzen auf Shopify-Apps und Themes aus dem Theme Store.

• Sie wollen wenig Wartung und alles in einem System.
  
  

Wann Sie zu Hydrogen greifen

• Sie haben ein eigenes React-Team und API-Wissen im Haus.

• Ihr Projekt verlangt eine interaktive, headless Oberfläche über mehrere Kanäle.

• Sie steuern auf technische Leistung und wollen alles selbst bestimmen.

• Sie sind bereit, Infrastruktur und Inhalte über ein headless CMS zu verwalten.
  
  

Kosten & Komplexität im Überblick

• Liquid: niedrigere Kosten, weniger Wartung und passend zu der Arbeitsweise, die Shopify-Teams gewohnt sind.

• Hydrogen: mehr Geld für Entwicklung, Infrastruktur und laufende Betreuung, dafür bekommen Sie Freiheit in Gestaltung und Technik zurück.

Zum Schluss

Für die meisten Shops ist Liquid die vernünftige Wahl. Schnell live, breit unterstützt und bezahlbar.

Denken Sie an Hydrogen, wenn Sie React-Wissen im Haus haben, eine eigene Oberfläche brauchen oder über mehrere Kanäle verkaufen. Es kann viel, doch ohne diesen konkreten Bedarf schießen Sie über das Ziel hinaus.

Als E-Commerce-Agentur bauen wir beide Varianten. Unsere Empfehlung folgt deshalb aus dem, was Ihr Shop braucht, und nicht aus dem, was wir am liebsten bauen.

Nehmen Sie Kontakt auf, dann finden wir es gemeinsam heraus.

Häufig gestellte Fragen

Funktionieren Shopify-Apps auch in einem Hydrogen-Shop?
Viele nicht. Ein headless Aufbau mit Hydrogen unterstützt nicht alle UI-Hooks, auf die klassische Shopify-Apps setzen. Über APIs ist eine Anbindung aber möglich.

Bremst Liquid die Geschwindigkeit der Seite?
Liquid ist schnell genug. Hängt Ihr Umsatz an scharfen Werten für TTFB und Lighthouse, gibt Hydrogen Ihnen mehr Stellschrauben, bei höheren Entwicklungskosten.

Welche Hosting-Optionen gibt es für Hydrogen?
Shopify bietet Oxygen, Sie können aber auch auf Vercel, Netlify oder einem eigenen Server hosten.

Mein Shop wächst schnell, sollte ich zu Hydrogen wechseln?
Nur wenn es einen echten Anlass gibt: eine headless Architektur, eine interaktive Oberfläche oder harte Anforderungen an die Ladezeit. Sonst stecken Sie Ihr Geld in die Optimierung Ihres Liquid-Themes.

Kann ich später von Liquid zu Hydrogen wechseln?
Ja, aber dann bauen Sie die Vorderseite neu. Schauen Sie deshalb voraus: Sind headless und Ladezeit jetzt schon wichtig, starten Sie mit Hydrogen. Wenn nicht, wachsen Sie mit Liquid weiter und prüfen es später erneut.