Headless E-Commerce mit Shopify: Dank Hydrogen und Oxygen mehr Flexibilität und Anpassungsfähigkeit

Um den Anforderungen der Kunden gerecht zu werden und wettbewerbsfähig zu bleiben, ist es für Onlinehändler unerlässlich, einen flexiblen und personalisierten Online-Shop bereitzustellen. Kunden wünschen sich heutzutage schnelle Ladezeiten, ein ansprechendes und intuitives Design sowie ein individuelles Einkaufserlebnis.

Shopify hat auf diese Bedürfnisse reagiert. Mit Hydrogen und Oxygen wurden zwei Technologien auf den Markt gebracht, die es Entwicklern auf der Shopify-Plattform ermöglichen, innovative und benutzerfreundliche Online-Shops zu erstellen. Beide Lösungen sind für die Shopify-Pläne Basic, Shopify, Shopify Advanced und Shopify Plus verfügbar.

Während Hydrogen als Frontend-Framework die Programmierung von Headless-Shops vereinfacht, indem es zahlreiche vordefinierte Funktionen anbietet, fungiert Oxygen als zugehöriger Server, auf dem das Headless-Frontend gehostet und betrieben wird.

In diesem Blogbeitrag werden wir uns mit diesen beiden Lösungen befassen, ihre Vorteile und Funktionen erläutern und mit Horando ein Fallbeispiel aufzeigen, wie man Hydrogen in der Praxis umsetzt.

Shopify Hydrogen: Ein leistungsstarkes Framework für individuelle Storefronts

Shopify Hydrogen ist ein React-basiertes Frontend-Framework für die Erstellung von individuellen und skalierbaren Online-Shops auf der Shopify-Plattform. Es ermöglicht Entwicklern, benutzerdefinierte Storefronts mit einer flexiblen und modularen Architektur zu erstellen. 

Das Framework bietet eine Sammlung von vordefinierten Komponenten, die speziell für E-Commerce-Anwendungen entwickelt wurden. Diese Komponenten erleichtern den Entwicklungsprozess und sorgen gleichzeitig für sauberen und gut organisierten Code. 

Darüber hinaus fördert Shopify Hydrogen die Nutzung von modernen Webstandards und Technologien wie Progressive Web Apps (PWA), was zu schnelleren Ladezeiten und besseren Benutzererfahrungen führt. Es ist zudem komplett entkoppelt von der bisherigen Shopify Liquid Programmiersprache. Daher empfiehlt sich der Einsatz eines eigenen CMS-Systems (z. B. Storyblok), damit das Marketing-Team Inhalte einfach einstellen und pflegen kann.  

Die Vorteile von Shopify Hydrogen auf einen Blick:

• Erstellung individueller Storefronts, die sich von der Masse abheben

• Steigerung der Entwicklungsgeschwindigkeit und -qualität durch vordefinierte Komponenten

• Nutzung modernster Webtechnologien und Standards, um optimale Benutzererfahrungen zu bieten

• Betreibung von mehreren, parallelen Storefronts für verschiedene Marken, aber nur ein Backend für alle Kundendaten

• Nutzung einer Vielzahl von Shopify Apps, die bereits mit Hydrogen fertig integriert sind

Shopify Oxygen: Serverseitiges Rendering für bessere Leistung und Skalierbarkeit

Shopify Oxygen ist der dazugehörige Server-Renderer für Hydrogen-basierte Anwendungen. Es handelt sich um eine Rendering-Infrastruktur, die speziell für Shopify entwickelt wurde. Damit wird die Time-to-First-Byte (TTFB) reduziert und die Ladezeit der Website verbessert, was zu höheren Konversionsraten führen kann.

Um die Leistung und Skalierbarkeit von Online-Shops zu optimieren, stellt Shopify Oxygen sicher, dass die von Hydrogen erstellten Storefronts optimal auf die Backend-Infrastruktur von Shopify abgestimmt sind.

Obwohl die Nutzung von Oxygen nicht verpflichtend ist, gibt es keinerlei Gründe, die gegen die kostenfreie Nutzung des Dienstes sprechen. Andernfalls müsste man sich nach einem externen Hoster umsehen und zusätzliche Kosten in Kauf nehmen.

Die Vorteile von Shopify Oxygen auf einen Blick:

• Schnellere Ladezeiten durch serverseitiges Rendering

• URL-Struktur kann individuell und mehrsprachig umgesetzt werden

• dadurch positive Auswirkungen auf SEO

• Server-Skalierung, die es ermöglicht, auch bei steigendem Traffic leistungsfähig zu bleiben

• Nahtlose Integration mit Hydrogen und der Backend-Infrastruktur von Shopify

Die perfekte Symbiose: Hydrogen, Oxygen und Headless Commerce vereint

Shopify Hydrogen und Oxygen stehen in direktem Zusammenhang mit dem Headless Commerce-Konzept, da sie die Entkopplung von Frontend und Backend fördern. Wie bereits eingangs erwähnt, unterstützt Hydrogen die Erstellung von individuellen Storefronts und Benutzererlebnisse unabhängig von der Backend-Infrastruktur von Shopify. Wohingegen Oxygen für eine nahtlose Integration zwischen den individuellen Storefronts und der Shopify-Backend-Infrastruktur sorgt.

Durch die Umsetzung von Headless Commerce mit Shopify Hydrogen und Oxygen ergeben sich für Shopify Online-Händler viele Vorteile:

• Schaffung von personalisierten Benutzererlebnissen, die auf spezifische Zielgruppen oder Marktanforderungen zugeschnitten sind. Mit der Erstellung individueller Storefronts können Händler auf alle Gegebenheiten reagieren und das beste Einkaufserlebnis umsetzen.

• Mehr Flexibilität durch die Integration neuer Technologien und Frameworks in Projekte, ohne auf eine bestimmte Plattform beschränkt zu sein. Die Entkopplung macht es möglich und gibt Händlern den Spielraum neue Tools zu testen und so noch besser auf die Kundenbedürfnisse einzugehen.

• Verbesserung der Leistung und Ladezeiten auch bei steigendem Traffic dank der Nutzung von serverseitigem Rendering und modernen Webtechnologien.

Diese Vorteile und die Tatsache, dass gleichzeitig die leistungsstarken Funktionen und Backend-Integrationen der Shopify-Plattform genutzt werden können, machen Hydrogen und Oxygen zu perfekten Lösungen bei der Umsetzung des Headless-Commerce-Ansatzes.  

Zwar lässt sich Headless auch mit anderen Lösungen verwirklichen und auch eine komplett individuelle Programmierung ist denkbar, aber wir empfehlen den Einsatz von Hydrogen und Oxygen. Bei dieser Variante ist bereits alles Nötige integriert und es gibt zudem eine Vielzahl an Apps, die für diesen Headless-Ansatz ausgelegt sind (z. B. Nosto). Das spart Zeit und ermöglicht Händlern eine schnellere Time-to-market.

Fallbeispiel Horando: Headless CMS mit Storyblok

Für unseren Kunden Horando, einer der führenden Online-Shops für Luxusuhren, haben wir eine Headless Commerce-Lösung mit Hydrogen implementiert. Dadurch konnten wir eine personalisierte und ansprechende Storefront erstellen, die perfekt auf die Markenidentität von Horando abgestimmt ist.

Zur besseren Pflege der bestehenden Inhalte kam hier das Content-Management-System (CMS) Storyblok zum Einsatz. Damit haben die Redakteure die Möglichkeit Inhalte intuitiv und mit Hilfe eines visuellen Editors zu bearbeiten. Das CMS bietet völlige Flexibilität und lässt sich dank seines Headless-Ansatzes mit nahezu allem verbinden. Für Horando konnte so ein mehrsprachiger Shop umgesetzt, den wir Backend-seitig mit dem bestehenden Shopify Shop verbunden haben.

Fazit: Headless E-Commerce mit Shopify

Die Entkopplung der Storefront vom Backend bietet Online-Händlern ein großes Potenzial, die eigene Marke noch besser auf die Bedürfnisse der Kunden und der aktuellen Marktanforderungen anzupassen. Dank Shopify Hydrogen und Oxygen erhalten Händler ein leistungsfähiges Set an Tools, um flexible, individuelle und skalierbare Online-Shops auf der Shopify-Plattform zu erstellen. Dadurch wird nicht nur die Nutzererfahrung und damit auch die Konversion verbessert, sondern auch die Leistungsfähigkeit des Shops optimiert.