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.  

Vor- und Nachteile von Shopify Hydrogen

Die Vorteile:

• 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

Die Nachteile:

• Hydrogen ist speziell auf die Shopify-API zugeschnitten. Seine Komponenten sind eng mit verschiedenen Teilen der Shopify-API verknüpft. Dies gewährleistet eine nahtlose Integration und reibungslose Funktionen. Hydrogen ist ausschließlich für die Entwicklung von Shopify-Shops konzipiert und unterstützt keine anderen individuellen Storefronts wie mobile Apps.

• Die Verknüpfung mit einem nicht kompatiblen CMS oder einer App erfordert möglicherweise eine maßgeschneiderte Lösung durch ein Entwicklerteam.

• Das Hydrogen-Framework erfordert tiefere technische Kenntnisse und Entwicklungsarbeit. Alle Aspekte, angefangen von der Erstellung bis zur Wartung, müssen von deinem Entwicklungsteam oder einer erfahrenen Shopify Agentur übernommen werden. Personen ohne technisches Know-how können das Frontend nicht eigenständig verwalten.

Shopify Hydrogen Theme: Diese Templates bietet Shopify

Shopify Hydrogen bietet zwei leistungsstarke Vorlagen, die Händlern und Entwicklern dabei helfen, eine beeindruckende Storefront zu erstellen:

• Hello World: Hello World ist eine minimalistische Vorlage, die Entwicklern als Ausgangspunkt dient, um die Storefront von Grund auf neu zu erstellen.

• Demo Store: Demo Store ist die Standardvorlage für eine neue Hydrogen Storefront-Installation und nutzt hierbei Live-Produktdaten von Shopify. Mit dieser Vorlage können Händler und Entwickler eine funktionsfähige Codebasis als Ausgangspunkt für die eigene Nutzung verwenden.

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.

Vor- und Nachteile von Shopify Oxygen

Die Vorteile:

• 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

• Kostenfreie Nutzung

Die Nachteile:

• Die Nutzung von Shopify Oxygen erfordert solide Kenntnisse in der Entwicklung.

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.

SEO-Optimierung für Hydrogen-basierte Storefronts

Die SEO-Optimierung für Hydrogen-basierte Storefronts unterscheidet sich in einigen Aspekten von der SEO-Optimierung für traditionelle Shopify-Shops. Hydrogen ist ein React-basiertes Framework von Shopify, das speziell für die Erstellung maßgeschneiderter, Headless E-Commerce-Erlebnisse entwickelt wurde. Dies bringt sowohl Vorteile als auch spezifische Herausforderungen mit sich. Hier sind die wichtigsten Besonderheiten:

Server-Side Rendering (SSR) und SEO

Hydrogen nutzt serverseitiges Rendering (SSR), wodurch Seiteninhalte bereits beim Laden der Seite generiert werden. Dies verbessert die Geschwindigkeit und sorgt dafür, dass Inhalte von Suchmaschinen besser gecrawlt und indexiert werden können. Bei SSR ist die Implementierung von SEO-relevanten Inhalten (z.B. Meta-Tags, strukturierte Daten) in den Server-Rendering-Prozess von Anfang an wichtig.

SEO-freundliche URLs und Routing

Hydrogen ermöglicht vollständige Kontrolle über URLs und Routing, was zu SEO-freundlicheren Strukturen führen kann. Im Gegensatz zu Standardshops, bei denen URLs durch das Shopify-Backend gesteuert werden, müssen URL-Strukturen in Hydrogen manuell gepflegt und optimiert werden.

Performance-Optimierung

Hydrogen erlaubt eine sehr feingranulare Kontrolle über die Performance, was ein großer Vorteil für Core Web Vitals ist. Eine gute Performance erfordert jedoch eine sorgfältige Implementierung. Aspekte wie das Lazy-Loading von Bildern und die Optimierung von Skripten müssen genau überwacht werden, um die Ladezeiten niedrig zu halten.

Content-Management

Da Hydrogen keine traditionelle CMS-Funktionalität wie bei Standardshops bietet, muss das Content-Management extern oder über Headless CMS-Lösungen erfolgen. Es erfordert eine gute Integration des Headless CMS mit SEO-Aspekten wie Meta-Datenverwaltung und Inhaltsstrukturen.

Crawling und Indexierung

Da Hydrogen Shops nicht direkt auf den Shopify-Servern liegen, sondern auf externen Servern (z.B. Oxygen), müssen Crawler-Zugänge gut konfiguriert sein. Die Implementierung von Robots.txt, Sitemaps und anderen Indexierungssteuerungen muss manuell vorgenommen werden.

Strukturierte Daten

Mit Hydrogen können strukturierte Daten präzise auf den spezifischen Content zugeschnitten werden. Die Implementierung von Schema Markup erfolgt direkt im Code und erfordert daher ein tiefes Verständnis der entsprechenden SEO-Best Practices.

Integration von SEO-Tools

Tools und Plugins, die bei Standardshops einfach installiert werden können (wie Yoast oder Ahrefs-Plugins), sind bei Hydrogen nicht direkt nutzbar. SEO-Analysen und Überwachung müssen durch eigene Implementierungen oder externe Services (über API-Integrationen) erfolgen.

Client-Side Rendering (CSR) und SEO

Teile der Seite, die clientseitig gerendert werden (CSR), könnten SEO-Probleme verursachen, da Suchmaschinen-Crawler Probleme mit dem Rendering von JavaScript haben. Es ist entscheidend, den richtigen Mix aus SSR und CSR zu finden und sicherzustellen, dass wichtige SEO-Inhalte serverseitig gerendert werden.

Verwaltung von Meta-Tags

Die Verwaltung von Meta-Tags ist vollständig anpassbar, was eine präzise Kontrolle über Titel, Beschreibungen und Keywords ermöglicht. Diese Flexibilität erfordert eine manuelle Konfiguration, die technisch anspruchsvoller ist als in Standardshops, wo diese Tags oft automatisch generiert werden.

Analytics und Tracking

Tracking- und Analyse-Tools (wie Google Analytics) müssen sorgfältig eingebunden werden, da Hydrogen eine komplett kundenspezifische Codebasis verwendet. Die Einrichtung von Tags und Skripten muss manuell erfolgen, oft über den Google Tag Manager, wobei eine saubere Integration für SEO und Performance essenziell ist.

Hydrogen-basierte Storefronts bieten also mehr Flexibilität und Kontrolle über SEO-Aspekte, benötigen aber eine präzisere und technisch anspruchsvollere Implementierung. Der Hauptunterschied liegt in der Art und Weise, wie Inhalte gerendert, URLs strukturiert und Performance-Optimierungen vorgenommen werden.

So profitieren Händler von der Nutzung von Hydrogen

Schnelle Entwicklung

Shopify Hydrogen nutzt Frameworks und UI-Komponenten für beschleunigte Frontend-Entwicklung. Die Integration von Drittanbieter-Software wird vereinfacht, was kostspielige und komplexe Prozesse eliminiert. Shopify Hydrogen ermöglicht besten Headless-Commerce ohne langwierige Entwicklung.

Überlegene Website-Leistung

Der Headless-Ansatz von Shopify Hydrogen ermöglicht erstklassige Website-Geschwindigkeit und -Performance. Die Trennung von Frontend und Backend erlaubt eine blitzschnelle Seitenladegeschwindigkeit und dynamische Inhalte im Backend. Die Umstellung auf Shopify Hydrogen reduziert Seitenladezeiten von Sekunden auf Millisekunden, optimiert Core Web Vitals und gewährleistet eine zufriedenstellende Nutzererfahrung.

Verbesserte Skalierbarkeit

Shopify Hydrogen löst das Dilemma zwischen Geschwindigkeit und Skalierbarkeit mit Shopify Oxygen – der globalen Hosting-Lösung. Oxygen bietet über 100 Server Standorte weltweit für sofortiges Laden unabhängig vom Kundenstandort. Die neue Infrastruktur behebt Geschwindigkeits- und Skalierbarkeitsprobleme und ermöglicht schnelle Kommunikation zwischen Storefront-Inhalten und Handelsstrukturen.

Maximale Gestaltungsfreiheit

Der Headless-Ansatz eröffnet vielfältige Gestaltungsmöglichkeiten für eine einzigartige UX/UI. Spezialisierte Tools erleichtern das Erstellen und Anpassen von Storefronts, ohne Programmierkenntnisse. Kommunikation zwischen Front- und Backend über die API ermöglicht flexibles Frontend-Design, ohne Backend-Funktionen zu beeinträchtigen.

Exzellente Handelserfahrung

Shopify Hydrogen bietet leicht zugängliches, personalisiertes Marketing. Die Kombination von Hydrogen und Oxygen ermöglicht volle Kontrolle über Storefront-Design und Inhaltsverwaltung für ein herausragendes Einkaufserlebnis. Millisekunden-Seitenladegeschwindigkeit und Stabilität sind gewährleistet.

Insgesamt bietet Shopify Hydrogen eine erhebliche Steigerung der Website-Leistung, Gestaltungsfreiheit und Benutzerfreundlichkeit, optimale Skalierbarkeit und ein erstklassiges Handelserlebnis. Diese Lösung eignet sich für Händler, die einen schnellen, flexiblen und effizienten Weg zur Implementierung von Headless-Commerce suchen.

Shopify Hydrogen Beispiel: Headless Commerce mit Shopify

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 werden, den wir Backend-seitig mit dem bestehenden Shopify Shop verbunden haben.

Hunter und stylecats®

Sowohl Hunter als auch stylecats® haben ihre Shops erfolgreich von Shopware zu Shopify Plus migriert. In beiden Fällen wurde auf Headless Commerce mit Shopify Hydrogen gesetzt, wodurch zwei Storefronts über ein gemeinsames Shopify-Backend realisiert wurden.

Dieses Konzept bringt auch für die Kunden Vorteile mit sich, da beide Shops einen gemeinsamen Login nutzen. Kunden können so mühelos zwischen den Shops wechseln und den geteilten Warenkorb nutzen. Zudem sind beide Shops an das Headless-CMS Storyblok angebunden.

Updates der Shopify News auf einen Blick

Shopify arbeitet stetig an der Weiterentwicklung und Optimierung - so auch bei Hydrogen und Oxygen.

Erst kürzlich hat Shopify hier die Features und Funktionen von Hydrogen erweitert. Die neue Version ermöglicht es Ihnen, mithilfe von .env-Dateien individuelle Entwicklungs-, Vorschau- und Debugging-Umgebungen für jeden Ihrer Shops zu definieren. Ein nahtloser Wechsel zwischen diesen Umgebungen ist dabei jederzeit durchführbar.

Das Hydrogen-Update erweitert diese Funktionalität um weitere Features, wie eine optimierte Währungsformatierung, die Behebung von Problemen im Google-Web-Cache sowie eine neue Funktion, die die Erstellung von Kontexten vereinfacht.

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.