.png?width=2000&height=862&name=Headless%20blog%20image%200%20(1).png "Headless Commerce on Shopify with Hydrogen and Remix")
Was ist Headless Commerce?
Als kurze Zusammenfassung: Headless Commerce bedeutet, dass alle Einschränkungen Ihrer E-Commerce-Plattform umgangen werden, indem das Frontend vom Backend entkoppelt wird, sodass das Frontend durch ein anderes Framework ersetzt werden kann. Dies bietet Ihnen viel Flexibilität bei der Gestaltung, während Sie die Funktionalität des Backends bei Bedarf weiterhin nutzen können.
Darüber hinaus – und das ist der große Vorteil von Headless-Architekturen, wenn Sie uns fragen – bedeutet die Umstellung auf ein Headless-System eine erhebliche Verbesserung in Bezug auf Ladegeschwindigkeit und Performance. Das ist wichtig, denn, wie Sie wissen, geht eine höhere Geschwindigkeit mit einer höheren Conversion Rate und damit mit mehr Umsatz einher. Wenn Sie die Conversion Rate Ihres Shops um nur 0,1 % verbessern, kann das zu deutlich mehr Umsatz führen.
Diese Schnelligkeit hat allerdings ihren Preis. Wouter erklärt es folgendermaßen: “Man kann die Umstellung auf ein Headless Commerce mit dem Kauf eines Ferraris vergleichen. Das Auto selbst ist teuer und wenn man mit der Konkurrenz mithalten will, braucht man Mechaniker:innen, die es warten. Es lohnt sich nicht, auf Headless zu setzen, wenn sich die Investition nicht amortisiert, wenn man diese Art von Geschwindigkeit nicht braucht oder wenn man sich die Wartung nicht leisten kann.”
Headless mit Shopify: Hydrogen und Oxygen
Dennoch stellt Headless die Spitzenklasse der E-Commerce-Performance dar. Und Shopify wird zu einem der Hauptakteure, wenn es darum geht, Headless-Architekturen zum Mainstream zu machen.
Mit dem Launch von Hydrogen und Oxygen in 2022 hat Shopify seinen eigenen React-basierten Headless-Commerce-Stack (Hydrogen) und seine eigene Hosting-Plattform (Oxygen) eingeführt. Damit haben Shopify-Händler die Möglichkeit, Headless ohne die Risiken zu nutzen, die mit einem selbst entwickelten Headless-Setup verbunden sind, wie z. B. die Wartung des Frameworks und die Bindung an eine Agentur.
Bei Hydrogen und Oxygen wird die Codebasis kontinuierlich von Shopify selbst gepflegt und aktualisiert. Dies garantiert die Kompatibilität mit dem Shopify-Backend und reduziert die Kosten, die mit der Aufrechterhaltung einer Headless-Architektur verbunden sind, erheblich (z. B. Framework-Updates bzgl. Leistung und Sicherheit, Hosting-Wartung, SEO-Optimierungen und Sicherstellung, dass Ihre Shopify-Analysen korrekt sind). Dadurch wird die Einführung einer Headless-Strategie für ein breiteres Spektrum von Marken realisierbar.
Hydrogen-powered by Remix als Headless-Toolkit
Im Sommer 2022 hat Shopify Hydrogen und Oxygen auf den Markt gebracht und seither kontinuierlich verbessert. Mit der Übernahme von Remix erwarb Shopify ein sehr schnelles und erstklassiges Web-Framework, mit dem Hydrogen noch weiter verbessert wurde.
Remix ist bekannt für sein brillantes Team, das für Entwickler:innen ein Top-Framework mit beeindruckender Performance geschaffen hat. Dabei handelt es sich um eine All-in-One-Lösung, die die Entwicklung von Webanwendungen schneller, einfacher und effizienter macht. Mit diesem klugen Schritt hat Shopify seine Headless-Lösung aufs Enterprise-Level gehoben.
Im Jahr 2024 sieht der Tech-Stack für Headless-Architekturen mit Shopify also wie folgt aus:
-
Backend: Shopify (Plus);
-
Frontend: Hydrogen als Headless-Framework, gewartet von Shopify;
-
Content Management: Ein API-basiertes CMS eines Drittanbieters, wie Builder.io, Storyblok, Contentful und Sanity;
-
Hosting: Oxygen als Hosting- und Deployment-Plattform, die ebenfalls von Shopify betrieben wird
Unser Ziel ist es immer, möglichst nah an Shopify zu bleiben. Wir sind überzeugt, dass wir unseren Kunden mit diesem Tech-Stack nun eine zukunftssichere Headless-Lösung anbieten können.
4 Gründe für Headless Commerce
1. Seitengeschwindigkeit
Wouter: “Theoretisch kann ein traditioneller (Liquid-)Shop alles, was Headless kann. Eine Headless-Architektur ermöglicht aber ein viel schnelleres Frontend, was wiederum zu einer höheren Conversion Rate führen kann.”
2. Content-Flexibilität
Besonders für Händler, die die volle Kontrolle über ihre Website und ihren Content haben möchten, kann die Umstellung auf ein Headless-CMS eine tolle Lösung sein. Ein möglicher Nachteil ist, dass man die einfache Handhabung von Shopifys “Sections Everywhere” verliert. Glücklicherweise bieten Headless-CMS wie Builder.io ähnliche Funktionen. Für Enterprise-Kunden mit großen Setups können Contentful, Sanity oder andere Headless-CMS die nötige Kontrolle bieten, um ihren Content über mehrere Stores (mit unterschiedlichen Sprachen) zu verwalten. Dadurch erhalten Händler die Flexibilität und Kontrolle, um individuelle und lokalisierte Erfahrungen zu ermöglichen.
3. Entwicklungsgeschwindigkeit
Mit einer Headless-Struktur wird nicht nur ihr Frontend schneller, es wird auch einfacher und schneller, neue Technologien zu integrieren. Damit können Sie kurzfristig auf Verbrauchertrends reagieren und sich ständig weiterentwickeln.
Senior Frontend-Entwickler Remco erklärt: “Theoretisch kann alles mit einer API mit Shopify verbunden werden – einfacher und besser wird es aber in einem Headless-Setup integriert. Wenn Sie Ihre gewünschten Ziele erreichen, dann bleiben Sie bei Liquid, die Extrakosten werden sich wahrscheinlich nicht lohnen. Wenn Ihre Brand jedoch ein ERP-System, ein altes Kundenbindungssystem, ein PIM-System, ein WMS-System usw. verwendet, wird die Integration all dieser Systeme in Liquid komplexer und mühsamer. Das gilt auch für das Angebot eines nahtlosen Omnichannel-Erlebnisses.”
4. Entwicklungskapazität
Was man außerdem nicht vergessen sollte, ist, dass Headless-Architekturen oft auf React basieren. Remco: “React gilt für viele Entwickler als der Heilige Gral. Liquid ist zwar eine Nischensprache, aber die meisten Entwickler sind mit moderner Webentwicklung und Tools wie React vertraut. Wenn Ihre Brand also zwanzig 'klassische' Shopify-Storefronts auf einmal einführen möchte, kann das kurzfristig etwas schwierig werden, weil es nur wenige auf Shopify und Liquid spezialisierte Entwickler gibt. Sie sind flexibler, wenn Sie diese Storefronts headless anlegen und sie von React-Entwicklern erstellen lassen.”
Der Business Case mit Headless: Berechnen Sie Ihr ROI
Wie bereits erwähnt ist die Seitengeschwindigkeit der wichtigste USP bei der Umstellung auf Headless. Wouter: “Mit Liquid erreichen unsere Entwickler:innen Ladegeschwindigkeiten von bis zu 2 Sekunden. Mit Headless geht es auf 1,2, 1,3 Sekunden oder sogar weniger als eine Sekunde runter (>40 % Geschwindigkeitssteigerung). Das mag zunächst unerheblich klingen, aber es fühlt sich viel schneller an, vor allem bei funktionsreichen Websites mit Produktkonfiguratoren. Sie können Shops mit vielen Funktionen erstellen, die sich trotzdem sehr knackig anfühlen. Das ist mit einem Liquid-Setup viel schwieriger zu erreichen.
Probieren Sie es mal selbst auf der Shopify Demoseite aus. Das ist kaum vergleichbar.”
→ Hier geht's zur Demoseite von Shopify Hydrogen🏎
Durch die gesteigerte Geschwindigkeit wird auch die User Experience besonders. Dabei sollte man natürlich zwischen Kosten und Geschwindigkeit abwägen. Schauen wir uns mal unsere Formel für E-Commerce-Umsatz an, um dies zu analysieren:
Umsatz = Traffic × Conversion Rate (CR) × Average Order Value
Die verbesserte Geschwindigkeit führt zu einer höheren CR, was sich damit direkt auf den Umsatz auswirkt. Angenommen, Sie erhöhen die CR von 1,0 % auf 1,1 %, so bedeutet dies eine Steigerung der Einnahmen um 10 %:
Umsatzzuwachs Headless = Umsatz × CR-Anstieg in %
Multipliziert man dies mit der Gewinnspanne (unter Berücksichtigung der direkten Produkt-, Logistik-, Marketing- und Vertriebskosten), so erhält man die Vorteile des Headless-Verfahrens (in Bezug auf die Seitengeschwindigkeit).
Vorteil der Umstellung auf Headless = Umsatz × CR-Anstieg in % × Gewinnspanne in %
Ein Beispiel: Bei einem Jahresumsatz von 1 Mio. € und einem Anstieg der CR von 5 % und der Gewinnspanne von 25 % ergibt sich folgendes Bild:
Vorteil der Umstellung auf Headless = 1 Mio. × 5 % × 25 % = 12.500 Euro jährlich
Der Umsatzzuwachs reicht natürlich nicht aus, um die Mehrkosten der Umstellung auf Headless zu kompensieren. Aber bei höheren Umsätzen und einem etwas höheren Anstieg der CR von 10 % (z. B. wenn Sie einen langsamen Shop mit vielen Features auf Headless umstellen), sieht die Sache schon deutlich positiver aus:
Vorteil der Umstellung auf Headless = 50 Mio. × 10 % × 25 % = 1,25 Mio. Euro jährlich
Das zeigt ganz gut, dass der Wechsel zu einer Headless-Option nicht für jedes Business passend ist. Man benötigt ein gewisses Umsatzniveau, um die Zusatzkosten zu kompensieren. Dann kann es aber wirklich Sinn ergeben.
Was kostet ein Headless Build auf Shopify?
Die Kosten für die (Neu-)Erstellung eines Headless Shops auf Shopify hängen stark von Ihren Bedürfnissen ab. Dabei spielen Faktoren wie die Komplexität Ihrer Architektur, der Funktionsreichtum Ihrer Website und Ihr Design eine Rolle. Wenn Sie eine schnelle Einschätzung für Ihren spezifischen Fall erhalten möchten, schreiben Sie uns gern über unser Kontaktformular.
Checkliste: Für welche E-Commerce-Marken ist ein Headless Build auf Shopify am besten geeignet?
Für welche Art von Brands eignet sich ein Headless-Setup mit Hydrogen, und wann sollte man lieber bei einem „traditionellen“ Shopify-Shop bleiben? Wir beraten Sie dazu, ob Headless der richtige Weg für Ihre Marke ist.
Trifft einer der folgenden Punkte auf Sie zu? Dann könnte sich ein Headless-Setup für Sie lohnen:
-
Sie sind eine große, etablierte Marke auf Enterprise-Niveau (oder stehen kurz davor);
-
Eine erhöhte Ladegeschwindigkeit wirkt sich so stark auf die Conversion Rate aus, dass die Kosten für die Erstellung und Wartung eines Headless-Setups gedeckt werden;
-
Sie möchten funktionsreiche Storefronts mit einer außergewöhnlichen Benutzererfahrung anbieten und dabei eine erstklassige Performance beibehalten;
-
Sie möchten Ihren Kund:innen eine nahtlose Omnichannel-Erfahrung bieten;
-
Sie müssen Ihre E-Commerce-Plattform in ein komplexes technisches System integrieren, das sich häufig ändert;
-
Sie haben komplexe, mehrsprachige, internationale Storefronts und benötigen ein effizientes Content Management;
-
Sie brauchen eine hohe Entwicklungsgeschwindigkeit und wollen nicht von der Verfügbarkeit von Shopify-Entwickler:innen abhängig sein.
Was würden wir E-Commerce-Brands raten, die Headless in Betracht ziehen?
Remco: “Jetzt ist der beste Zeitpunkt, um auf Headless umzustellen. Mit Headless können Unternehmen die neuesten Technologien und Designtrends nutzen, um ein E-Commerce-Erlebnis zu schaffen, das sich in einem umkämpften Markt abhebt. Code kann Ihnen bei dem Umstieg auf Headless auf dem bestmöglichen Niveau helfen.”
Implementierung von Headless Commerce auf Shopify mit Code
Sie sind zuversichtlich, dass die höhere Seitengeschwindigkeit und zusätzliche Flexibilität, die ein Headless-CMS mit sich bringt, einen Mehrwert für Ihren Umsatz bedeutet? Dann ist der nächste Schritt, eine zuverlässige Shopify-(Plus-)Agentur zu finden, die Ihren Headless-Shop für Sie erstellt und wartet. Wir haben uns intensiv mit der Erstellung von Headless-Shops mit Shopify Hydrogen beschäftigt und sind nun bereit, E-Commerce-Marken bei der Erstellung und Skalierung ihrer Headless-Shops zu unterstützen.
Unsere Kunden wissen, dass wir von Code niemals einen Store ganz von neu aufbauen. Wir arbeiten mit unserem eigenen Code Base Theme (CBT), in das all unsere jahrelange Erfahrung und Best Practices eingeflossen sind und das nach den höchsten Standards erstellt wird.
Unser neues Code Base Theme lässt sich nahtlos in die React-basierten Hydrogen- und Oxygen-Technologien von Shopify integrieren und ist so konzipiert, dass es regelmäßige Updates von Shopify erhält. Das bedeutet, dass Sie immer auf dem neuesten Stand der Innovationen und Features bleiben. Sie müssen sich nicht um Ihr eigenes Headless-Setup kümmern.
Headless bietet Ihnen die Geschwindigkeit, Flexibilität und Innovationskraft, um Ihre Ziele zu erreichen und Ihre Konkurrenz zu übertreffen.
Möchten Sie herausfinden, ob eine Headless-Lösung mit Code und Shopify (Plus) die beste Lösung für Ihre Brand ist? Dann nutzen Sie unser Kontaktformular und wir werden uns innerhalb von 24 Stunden mit Ihnen in Verbindung setzen.
