Wasserstoff und Sauerstoff sind zwei der aufregenden neuen Funktionen von Shopify, die auf dem Unite 2021-Gipfel vorgestellt wurden. Die beiden Produkte arbeiten zusammen, um die Produktion von benutzerdefinierten Schaufenstern zu rationalisieren.

Shopify Hydrogen ist ein React-Framework, das die Erstellung benutzerdefinierter Storefronts für Shopify-E-Commerce-Plattformen vereinfacht. Dazu gehören gängige E-Commerce-Komponenten wie der Warenkorb, die Variantenauswahl und die Mediengalerie. Diese können direkt in Ihrem Geschäft zusammengestellt werden und erfordern nur minimalen bis keinen Code.

Shopify Oxygen ist eine ergänzende Funktion, die Hydrogen-Storefronts direkt auf Shopify hostet. Das System ist extrem schnell, global und für den Handel optimiert.

In diesem Artikel sehen wir uns an, wie Sie Shopify Hydrogen and Oxygen für ein optimiertes E-Commerce-Erlebnis verwenden.

Shopify Unite 2021 Ankündigungen

Shopify veranstaltet ein jährliches Gipfeltreffen, das Feature-Releases und Ankündigungen von Systemverbesserungen gewidmet ist. Shopify Unite 2021 hat uns nicht enttäuscht; Viele aufregende neue Funktionen, die sich sowohl an Händler als auch an Shopify-Partner richten, wurden vorgestellt.

Was sind die wichtigsten Änderungen, die kommen werden?

2021-Updates beinhalten Änderungen an Shopify Checkout, ein elegantes neues Shopify-Partner-Dashboard, ein massiver Rückgang des Umsatzanteils von Shopify und zusätzliche Funktionen für Shopify-CLI.

Zwei dieser großen Fortschritte sind Shopify Hydrogen und Oxygen. Das Wasserstoff-Framework und seine Sauerstoff-Ergänzung ermöglichen es Benutzern, ihre Storefronts anzupassen und den Prozess erheblich zu vereinfachen Erstellen von Apps für den Shopify App Store.

Shopify Wasserstoff und Sauerstoff

Shopify ist eine extrem schnell wachsende Plattform, die Amazon im Jahr 2021 in Bezug auf den Online-Verkehr sogar übertrifft. Da der Traffic von Shopify zunimmt, untermauern zwei Faktoren ihren anhaltenden Erfolg:

1. Kunden können schnell und reibungslos durch die Geschäfte navigieren.
2. Händler können problemlos neue Shops einrichten und bestehende aktualisieren.

Genau hier kommen Shopify Hydrogen und Oxygen ins Spiel. Hier ist eine Aufschlüsselung dessen, was jede dieser Funktionen tun kann.

Shopify Wasserstoff

Wasserstoff erfordert nur minimales technisches Know-how, was bedeutet, dass die über 1.7 Millionen Händler von Shopify ihre Shops effektiv selbst gestalten und aktualisieren können, auch ohne Programmierkenntnisse.

Shopify-Schaufenster haben traditionell einen deutlichen „Shopify“-Look. Als moderne und schick aussehende Seite ist das natürlich keine schlechte Sache. Nicht jedes Unternehmen möchte jedoch, dass sein Shop so aussieht, als wäre er Teil einer bestimmten E-Commerce-Franchise.

Vor allem größere Unternehmen wünschen sich für ihre Online-Präsenz in der Regel ein maßgeschneidertes, firmenintern gestaltetes Ambiente. Bis vor kurzem ging diese Anpassbarkeit auf Kosten von Geschwindigkeit und Zuverlässigkeit. 

Hydrogen wurde entwickelt, um den Wunsch der Benutzer nach Flexibilität bei ihrem Design zu erfüllen und gleichzeitig die nativen Geschwindigkeiten von Shopify beizubehalten. Dieses Framework basiert sowohl auf React als auch auf JavaScript und bietet zahlreiche neue Tools und Komponenten, die Händler frei verwenden können, um ihre eigenen einzigartigen Storefronts zu erstellen. Zu diesen React-Komponenten gehören der Warenkorb, die Variantenauswahl und die Inhaltsgalerie. All diese sind so konzipiert, dass sie sich perfekt in jede Art von Shopify-Storefront integrieren lassen.

Hydrogen ist hochdynamisch und unterstützt selbst die grafiklastigsten Shops. Dabei behält es seine blitzschnelle Auftragsabwicklungsgeschwindigkeit bei: Der aktualisierte Shopify Checkout eines Shops, der mit Shopify Hydrogen and Oxygen aufgebaut wurde, kann fast 40,000 verkaufte Artikel pro Minute verarbeiten!

Shopify Sauerstoff

Einer der wichtigsten Faktoren, der bestimmt, wie schnell eine Verbindung ist, ist die Entfernung zwischen einem Serverstandort und dem Kunden. Aus diesem Grund verteilen globale Cloud-Unternehmen ihre Serverfarmen auf der ganzen Welt. Shopify ist da keine Ausnahme.

Sobald ein Händler seine benutzerdefinierte Storefront in Shopify Hydrogen erstellt hat, kümmert sich Oxygen um den Hosting-Prozess. Für maximale Geschwindigkeit nutzt Oxygen über 100 Serverstandorte auf der ganzen Welt.

Neben den Storefronts selbst hostet Oxygen alle Inhaltsformate auf seinen Servern. Dies hat zwei wesentliche Implikationen.

Erstens haben Händler eine größere Flexibilität bei der Gestaltung benutzerdefinierter Storefronts.

Zweitens werden alle Inhalte in der Nähe der Kunden gespeichert, wodurch Ladenfronten innerhalb von Millisekunden geladen werden können.

Wie funktioniert Shopify Hydrogen auf technischer Ebene?

Während Shopify Hydrogen den Codierungsbedarf im Storefront-Designprozess erheblich reduziert, ist ein gewisses technisches Know-how dennoch von Vorteil, um das Beste aus dieser neuen Funktion herauszuholen.

Lassen Sie uns durchgehen, wie Wasserstoff auf technischer Ebene funktioniert.

Struktur

E-Commerce-Websites verwenden große Mengen dynamischer Inhalte, darunter Kundeninformationen, Produktdetails, Sprachen und Währungen, um nur einige zu nennen. Dies macht es unglaublich kompliziert, eine komplette E-Commerce-Website von Grund auf neu zu erstellen.

Shopify Hydrogen macht diesen Prozess so einfach und schmerzlos wie möglich, indem es alle Komponenten bereitstellt, die Benutzer benötigen.

Insgesamt behält Hydrogen die Standardordnerstruktur von React bei. Es verwendet ein öffentliches Verzeichnis für statische Assets und ein Quellverzeichnis (src) für den Anwendungscode. Das System ist intuitiv und leicht zu erlernen, insbesondere für Händler und Entwickler, die bereits mit React vertraut sind.

Shopify enthält den „ShopifyServerProvider“ React Provider, der für die Verwendung von Token und die Verbindung mit der Storefront-API von Shopify vorkonfiguriert ist. Das bedeutet, dass Händler Hydrogen nicht manuell konfigurieren müssen, um mit Shopify zu arbeiten!

Dynamik vs. Leistung

Die Balance zwischen Dynamik und hoher Leistung ist eine große Herausforderung für die meisten E-Commerce-Plattformen.

Traditionell haben React-Entwickler clientseitiges Rendering verwendet, um die Dynamik zu erhalten, aber das ging zu Lasten der Site-Performance. Dies gilt insbesondere für Geschäfte, die auf Mobilgeräten aufgerufen werden, die zunehmend das beliebteste Gerät für Online-Shopping sind.

Shopify Hydrogen hingegen verwendet eine neue Technologie namens React Server Components (RSCs). Dieses System verbessert die Leistung und behält gleichzeitig die Dynamik aller erforderlichen Funktionen bei, ohne auf komplexe Optimierungsverfahren angewiesen zu sein.

Wie?

RSCs kennzeichnen alle Komponenten entweder als .server oder .client. Jetzt werden .server-Komponenten in der Cloud ausgeführt, während .client-Komponenten im Client-Browser ausgeführt werden. Dadurch wird die zum Laden von Storefronts erforderliche Zeit drastisch reduziert, während alle dynamischen Funktionen, die in einem modernen Shop erwartet werden, beibehalten werden.

Diese Verbesserungen bedeuten auch, dass es Händlern freisteht, noch dynamischere Multi-Channel-Storefronts zu erstellen, ohne sich Gedanken über Ladezeiten machen zu müssen. 

Was sind die Vorteile der Verwendung von Shopify Hydrogen and Oxygen?

Hier sind einige der Hauptvorteile der Verwendung von Shopify Hydrogen and Oxygen, aber diese Liste ist keineswegs vollständig. Shopify Hydrogen und Oxygen haben die Entwicklung und das Hosting von Storefronts wirklich revolutioniert.

Gestaltungsfreiheit

Wie oben erwähnt, verwendet Shopify Hydrogen React Server Components (RSCs), um die Ladegeschwindigkeiten zu verbessern, insbesondere für mobile Geräte. Auf diese Weise können Designer noch dynamischere Storefronts erstellen, ohne sich Gedanken über langsame Ladegeschwindigkeiten machen zu müssen, die ihre Suchrankings beeinträchtigen. 

Hydrogen schafft auch mehr Flexibilität bei der Gestaltung, indem die Kundenbereiche vom Rest des Ladens getrennt werden. Designer können mit neuen Looks, Inhaltsstrategien usw. herumspielen, während sie das Backshop-System und die Daten von diesen Experimenten fernhalten.

Ein Frontend kann auch als Shopify Hydrogen App erstellt werden,
und anschließend mit Sauerstoff mit dem gesamten Team geteilt. Da Frontend und Backend einer Hydrogen-Website mit Hooks und APIs kommunizieren, kann dieses neue Frontend problemlos gepusht werden. Dadurch entfällt die Angst, dass ein neues Update einen Store kaputt macht, was zu erheblichen Umsatzeinbußen führen könnte, bis der Fehler behoben ist.

Bessere Leistung

Die Unabhängigkeit von Client- und Serverkomponenten führt zu einer erheblich verbesserten Leistung. Das liegt daran, dass weniger von der Website clientseitig geladen werden muss. Dies ist besonders vorteilhaft für mobile Benutzer.

Darüber hinaus verwendet Shopify Hydrogen sehr wenig JavaScript. Dadurch wird die zum Laden einer Seite erforderliche Bandbreite weiter reduziert.

Darüber hinaus bringt Oxygen mit über 100 Servern weltweit Websites näher an die Kunden heran, was die Seitenladezeiten von Sekunden auf Millisekunden verkürzt.

Einfachere Personalisierung

Durch den Aufbau einer React-basierten Storefront mit Shopify Hydrogen können Designer das Einkaufserlebnis für Kunden personalisieren. Beispielsweise können dynamische Inhalte und Layouts basierend auf dem Kundentyp, seinem Standort, früheren Interaktionen mit dem Geschäft und seinen früheren Bestellungen geändert werden.

Dies ist äußerst wichtig, da personalisierte Websites zu mehr Verkäufen für größere Beträge führen.

Eine neue Art, maßgeschneiderte E-Commerce-Erlebnisse zu gestalten

E-Commerce-Shops breiten sich aus, was es für einzelne Geschäfte schwieriger macht, sich abzuheben. Der beste Weg für das Wachstum eines Shops besteht darin, jedem Kunden ein unterhaltsames, schnelles und personalisiertes Erlebnis zu bieten.

Shopify Hydrogen und Oxygen arbeiten zusammen, um genau das zu erreichen. Hydrogen hilft Händlern bei der Gestaltung eines dynamischen, einzigartigen Shops, während Oxygen ihn auf über 100 Servern weltweit für rekordverdächtige Ladegeschwindigkeiten einsetzt.

Verfolgen Sie die Leistung Ihres Shopify-Shops mit Baremetrics

Wenn Sie nach echten Einblicken in die Leistung Ihrer Shopify-App suchen, ist Baremetrics der richtige Service für Sie. Unsere Plattform lässt sich vollständig in Shopify integrieren, sodass Baremetrics-Benutzer mehr als 26 relevante Geschäftskennzahlen wie MRR, Abwanderungsrate und Konversionsraten in einem einzigen Dashboard überwachen können.

Unabhängig davon, ob Sie selbst Händler sind oder Händlern einen Service anbieten, ist die Nachverfolgung Ihrer Daten mit spezieller Software der beste Weg zu nachhaltigem Wachstum.

Um mit Baremetrics zu beginnen und Zugang zu datengestützten Geschäftserkenntnissen zu erhalten, Starten Sie noch heute eine kostenlose Testversion.