In dieser Woche haben wir auf der Shopify Unite eines unserer bisher größten Updates angekündigt: den Online Store 2.0.
Online Store 2.0 eröffnet Entwicklern im Rahmen der Theme- und App-Entwicklung für Shopify-Händler enorme Möglichkeiten. Wir haben die Onlineshop-Erfahrung von Grund auf neu aufgebaut. Im Rahmen dessen werden wir eine Reihe neuer Entwickler-Tools einführen, mit deren Hilfe du fantastische Erlebnisse für Händler und Kunden erschaffen kannst.
In diesem Artikel werfen wir einen Blick auf diese neuen Tools und Funktionen, um zu verdeutlichen, wie sie deine Arbeit bereichern und welche Möglichkeiten sie bieten. Außerdem werden wir die Anforderungen erläutern, die du erfüllen musst, um deine Themes und Apps bis Ende des Jahres auf den Online Store 2.0-Standard zu bringen.
Werfen wir also einen genaueren Blick auf die Funktionen von Online Store 2.0 und wie diese deine Arbeit als Entwickler beeinflussen.
Inhaltsverzeichnis
1. Verbesserte Theme-Architektur für Shopify Onlineshops
Wir haben die Theme-Architektur für den Onlineshop verbessert und bieten Händlern einfachere und flexiblere Anpassungsmöglichkeiten. Zudem gibt es neue Optionen für Entwickler, Themes und Integrationen zu erstellen, die von Händlern einfach an ihre Bedürfnisse angepasst werden können.
Abschnitte auf jeder Seite – nicht nur auf der Startseite
Bisher waren Händler in Bezug auf die Darstellung ihres Business auf Shopify eingeschränkt. Die Flexibilität von Abschnitten war nämlich nur auf die Startseite beschränkt. Um einen ähnlichen Effekt auch auf anderen Seiten zu erzielen, waren Codeänderungen, aufwendige Workarounds mit Blöcken oder sogar benutzerdefinierte Apps erforderlich.
Mit Abschnitten auf jeder Seite gehört all dies der Vergangenheit an. Jetzt können Händler Abschnitte auf allen Seiten hinzufügen, nicht nur auf der Startseite. Und das eröffnet eine Reihe neuer Möglichkeiten, jeden Aspekt eines Shopify Onlineshops zu personalisieren.
So funktionieren Abschnitte auf jeder Seite
Die Änderung wird durch einen neuen Ansatz beim Rendering von Vorlagen über die Storefront erreicht. Jeder Seitentyp kann jetzt mit einer JSON-Vorlagendatei gerendert werden. Hierüber werden die Abschnitte der entsprechenden Seite aufgeführt und Einstellungsdaten in Bezug auf jeden zusätzlichen Abschnitt gespeichert, der von einem Händler hinzugefügt oder bearbeitet wird.
Shops können über mehrere Vorlagendateien verfügen, die verschiedenen Produkten, Kategorieseiten, benutzerdefinierten Seiten, Blog-Posts und so weiter zugeordnet sind. So können Händler spielend einfach verschiedene Produkt-, Kategorie- und andere Seiten im selben Shop einsetzen.
In den neuen JSON-Vorlagendateien kannst du festlegen, welche Abschnitte standardmäßig erscheinen sollen, wenn dein Theme zum ersten Mal installiert wird. Auch die Reihenfolge der angezeigten Abschnitte kann vorab festgelegt werden. Sobald die JSON-Vorlage hinzugefügt wurde, kann sich ein Händler in den Theme-Editor begeben und einen beliebigen Abschnitt hinzufügen, der Voreinstellungen enthält. Dies funktioniert genau so, wie du zuvor dynamische Abschnitte zur Homepage hinzugefügt hast.
Ein Modell einer möglichen Einrichtung findest du im Verzeichnis /`templates´ unseres neuen Themes „Dawn“ (mehr dazu weiter unten) im GitHub-Repo. Alternativ kannst du aber auch unsere Entwicklerdokumentation zu JSON-Vorlagen lesen.
Im Video unten wird eine Demo von Vorlagen präsentiert.
Theme-App-Erweiterungen mit App-Blöcken
Mit der aktualisierten Theme-Architektur geht auch ein Update für die Integration von Apps in die Storefront einher. Derzeit gibt es keine strukturierte, durchgängige Lösung für die einfache Integration von Apps in Themes. Die Entwickler müssen die Integrationslogik für jedes bestehende Theme selbst erstellen und entsprechende Assets hosten. Dass wiederum macht die Entwicklung von Funktionen schwierig, die über alle Themes hinweg einheitlich funktionieren und überall auf der Welt schnell laufen.
Um diese Schwierigkeiten zu beheben, führen wir Theme-App-Erweiterungen ein, durch die sich Apps mithilfe von App-Blöcken in die Themes von Händlern integrieren lassen.
Ein App-Block wird im aktualisierten Theme-Editor zu einer Produktseite hinzugefügt.
Integrierte Modularität für ein optimales Onboarding
App-Blöcke stellen eine grundlegende Veränderung in der Art und Weise dar, wie Apps innerhalb von Themes eingebunden werden. App-Entwickler können jetzt UI-Komponenten erstellen, die direkt über den Theme-Editor hinzugefügt, entfernt und konfiguriert werden können – und das, ohne den Code eines Themes anzutasten. Dies bedeutet gleichzeitig, dass saubere Deinstallationen möglich werden, da sogenannter „Ghost-Code“ automatisch entfernt wird.
Theme-App-Erweiterungen können dabei, wie andere App-Erweiterungen, einfach über die Shopify-CLI erstellt, veröffentlicht und aktualisiert (mit Versionierung) werden.
Diese Modularität bedeutet, dass du nicht mehr für jedes vorhandene Theme eine Integrationslogik aufbauen musst. Und da es nicht mehr notwendig ist, den Theme-Code für die manuelle Installation deiner App zu öffnen, musst du dir keine Sorgen mehr über Änderungen machen, die Fehler verursachen - was wiederum weniger Zeitaufwand für die Problembehandlung mit Anwendern bedeutet. Win-win.
Um festzustellen, ob ein Händler ein Theme verwendet, das mit deinen Theme-App-Erweiterungen kompatibel ist, solltest du die Theme API und Assets-API verwenden. Denn wenn du weißt, welche Art von Theme verwendet wird, kannst du Händlern ein optimales Onboarding-Erlebnis bieten, um die App in ihr Theme zu integrieren.
Assets hosten und verwalten
Du kannst die unterstützenden Assets deiner App ebenfalls zu deinen Theme-App-Erweiterungen hinzufügen, um sie schnell über das CDN von Shopify zu hosten. Die Assets können dann einfach auf die App-Blöcke deiner Theme-Erweiterung Bezug nehmen.
Ein Beispiel für einen App-Block, der in einer Theme-App-Erweiterung enthalten ist.
Um deine ersten Theme-App-Erweiterungen zu erstellen und deine Apps mit Online Store 2.0 kompatibel zu machen, solltest du dir die Migrationsinformationen in unserer Dokumentation anschauen.
2. Flexible Shop-Inhalte
Mit Online Store 2.0 müssen Entwickler Metafelder nicht fest in Themes einprogrammieren oder sich für die Änderung von Produktseiten auf APIs verlassen. Theme-Entwickler können nun dynamische Quellen verwenden, um standardmäßige Metafelder und bekannte Ressourceneigenschaften als Einstellungsvorgaben einzubinden.
Mit verbesserten Metafeldern genau die Informationen hinzufügen, die benötigt werden
Der aktualisierte Theme-Editor ermöglicht es Händlern somit, Metafelder und Eigenschaften ohne die Verwendung von APIs oder Code hinzuzufügen. Das bedeutet, dass Händler genau die Inhalte auf der Produktseite hinzuzufügen können, die sie benötigen, etwa die Integration einer Größentabelle oder einer Zutatenliste. Alles, was nicht im eigentlichen Shop-Editor erscheint, kann nun über Metafelder hinzugefügt werden. Auf der Entwicklungsebene haben wir diese in drei wichtigen Punkten überarbeitet:
In unserer Dokumentation erfährst du mehr über Metafelder.
Mit der Dateiauswahl Bilder sofort verwenden
Metafelder unterstützen jetzt Medien wie Bilder oder PDF-Dateien. Anstatt ein Asset fest in ein Theme zu programmieren, macht es die Metafeld-Dateiauswahl einfach, Medien auf Produktseiten hochzuladen und auszuwählen. Alle deine im Bereich Einstellungen/ Dateien gespeicherten Bilder können dadurch sofort verwendet werden.
Wenn Händler etwa eine Produktgarantie oder eine Größentabelle auf einer Produktseite zum Download bereitstellen möchten, kann diese Datei mithilfe der Dateiauswahl und einer einfachen Benutzeroberfläche ausgewählt werden. Anschließend kann sie an der Stelle eingefügt werden, an der das Datei-Metafeld im Theme platziert ist.
Zugriff auf Inhalte aus dem Einstellungsbereich mit der Dateien-API
Über die neue Dateien-API erhalten Entwickler Zugriff auf die Inhalte unter Einstellungen/ Dateien. Diese GraphQL-API ermöglicht es Apps, vorhandene Medieninhalte aus dem genannten Bereich hochzuladen oder auszuwählen. Apps können nun vom Zugriff auf die Sektion Einstellungen/ Dateien des Adminbereichs profitieren, einschließlich des Platzierens von Inhalten in Medien-Metafeldern.
So können Apps diesen Bereich für Dateien und Bilder nutzen, die nicht direkt mit einem Produkt verbunden sind, einschließlich Bilder, die in Themes verwendet werden. In unserer Dokumentation erfährst du was du über die Dateien-API wissen möchtest.
3. Verbesserungen im Theme-Editor
Damit Händler die Vorteile unserer Verbesserungen und Aktualisierungen nutzen (und Entwickler von einer intuitiveren Navigation profitieren), haben wir auch den Theme-Editor erheblich verbessert.
Anstatt sich in verschiedene Abschnitte zu vertiefen, zeigt der Editor nun eine hierarchische Ansicht aller Seiteninhalte in der Seitenleiste an. Von dieser aus können Händler die meisten Blöcke ausblenden, mit Ausnahme des Headers und Footers. Diese beiden Elemente können zwar Blöcke enthalten, die verschoben oder ausgeblendet werden, aber nicht selbst ausgeblendet werden können. Die Änderungen ermöglichen es Händlern, die Hierarchie einer Seite spielend einfach zu aktualisieren. 
Der aktualisierte Theme-Editor in Aktion.
Direkt aus dem Editor: Einstellung der Liquid-Eingabe
Ein zusätzliches Update für den Theme-Editor ist die neue Einstellung für die Liquid-Eingabe. Damit können Händler benutzerdefinierten Liquid-Code direkt aus dem Editor zu einer Seite hinzuzufügen. Die Liquid-Einstellung ähnelt dem HTML-Einstellungstyp. Der Unterschied ist, dass sie den Zugriff auf Liquid-Variablen erlaubt. Händler können demnach auf globale und vorlagenspezifische Liquid-Objekte zugreifen.
Diese Einstellung kann Händlern das manuelle Ändern des Codes eines Themes ersparen, insbesondere beim Hinzufügen von Code für Apps, die Liquid verwenden. Entwickler haben die Möglichkeit in unserer Dokumentation nachzulesen, wie man diese Einstellung zu einem Abschnitt oder Block hinzufügt, oder sich im Abschnitt `custom-liquid´ unseres Themes „Dawn“ ein Implementierungsbeispiel ansehen.
Diese Änderungen erleichtern es Händlern, mit den neuen Funktionen von Online Store 2.0 zu arbeiten und Entscheidungen über ihren Online-Shop zu treffen, ohne sich erst mit einem Entwickler abstimmen zu müssen. Und das gibt ihnen die Zeit, sich auf den Aufbau kreativer Integrationen und Lösungen zu konzentrieren.
4. Neue, nahtlos integrierbare Entwickler-Tools
Online Store 2.0 bietet Entwicklern eine völlig neue Möglichkeit, Apps und Themes für Shopify-Händler zu erstellen. Um diesen Wandel zu unterstützen, führen wir eine Reihe neuer Entwickler-Tools ein, die sich nahtlos in Shopify integrieren und den Prozess der Entwicklung, des Testens und der Bereitstellung von Themes noch effektiver machen.
Mit der Einführung der Shopify-GitHub-Integration, einem aktualisierten Shopify-CLI-Tool und dem Theme Check (dazu später mehr) profitierst du auf verschiedenen Ebenen: eine robustere Theme-Entwicklung mit Versionskontrolle, eine bessere Sandbox-Umgebung für die lokale Entwicklung von Themes und eine optimierte Entwicklung mit einem auf Shopify-Themes abgestimmten Echtzeit-Linter.
Im Folgenden sehen wir uns an, was jedes dieser Tools für dich bedeutet:
Shopify-Github-Integration: Einfachere Wartung und Entwicklung
Wir führen eine neue Integration mit GitHub ein, um die Entwicklung und Wartung von Themes einfacher zu verfolgen und zu verwalten. Durch die Verbindung deines GitHub-Benutzerkontos oder deiner Organisation mit einem Onlineshop werden Änderungen sowohl in ein Github-Repository gepusht als auch daraus abgerufen. Dieses Repository ist stets mit dem aktuellen Stand ausgewählter Themes synchronisiert.
Die GitHub-Integration mit Themes erlaubt Entwicklern eine sichere Zusammenarbeit bei der Bearbeitung von Themes. Ermöglicht wird dies durch die Einführung einer nativen Unterstützung für die Versionskontrolle. Bei der Arbeit am Shop eines Händlers können Entwickler dadurch Workflows implementieren, bei denen Änderungen an Themes auf GitHub überprüft und zusammengeführt werden müssen, bevor sie in ein Live-Theme übernommen werden.
Wird die CI zur Durchführung von Linting, Tests und Dateitransformationen vor der Bereitstellung in einen Onlineshop verwendet (wie z. B. das Ausführen von Theme Check oder das Kompilieren von SCSS in CSS), kann die Github-Integration in Kombination mit Git-Subtrees verwendet werden, um die produktionsfertigen Dateien zu synchronisieren. Weitere Informationen dazu findest du in unserer Dokumentation.
Shopify CLI auf Themes anwenden
Wir haben außerdem wesentliche Änderungen am bestehenden Shopify CLI-Tool vorgenommen. App-Entwickler haben die CLI bereits verwendet, um schnell Node.js- und Ruby on Rails-Apps und App-Erweiterungen zu generieren. Nun haben wir den Anwendungsbereich des Tools auf Themes erweitert.
Die Shopify CLI beschleunigt deine Theme-Entwicklung, weil sie jetzt Folgendes leisten kann:
- Sicheres Entwickeln, Anzeigen und Testen von Änderungen an Themes innerhalb von Entwicklungs-Themes
- Hot-Reload von CSS- und Liquid-Abschnittsänderungen während der Entwicklung dank des neuen Dev-Servers
- Initialisieren eines neues Theme-Projekts mit unserem neuen Theme „Dawn“ als Ausgangspunkt
- Veröffentlichung von Themes über die Kommandozeile
- Ausführen des Theme Check für dein Theme
- Eingabe von Testdaten für dein Theme, einschließlich Produkten, Kunden und Bestellentwürfen.
Entwicklungs-Themes: Änderungen in Echtzeit sehen
Entwicklungs-Themes sind temporäre, ausgeblendete Themes, die mit dem Shopify-Shop verbunden sind, den du für die Entwicklung verwendest. Wenn du `shopify theme serve´ aufrufst, erstellt die Shopify CLI automatisch ein Entwicklungs-Theme innerhalb des Shops, an dem du arbeitest. Anschließend wird dieses Theme jedes Mal wiederverwendet, wenn `shopify theme serve´ ausgeführt wird. Du brauchst dir dabei aber keine Sorgen machen, dass jemand anderes dies sehen oder Änderungen vornehmen kann, da Entwicklungs-Themes nicht auf der Seite `admin/themes´ sichtbar sind.
Entwicklungs-Themes werden nicht auf dein Theme-Limit angerechnet und werden nach sieben Tagen Inaktivität aus dem Shop gelöscht. Zudem werden sie entfernt, wenn du `shopify-logout´ ausführst. Falls du also einen Vorschaulink benötigst, der auch nach der Abmeldung noch funktioniert, solltest du dein Theme stattdessen in den Shop übertragen.
Mithilfe von Entwicklungs-Themes kannst du Änderungen an einem Theme in Echtzeit anzeigen lassen, das du lokal entwickelst. Das Theme lässt sich zudem mit dem Theme-Editor anpassen.
Diese Tools wurden entwickelt, um deinen Entwicklungsprozess zu vereinfachen und dir einen schnellen Start mit Online Store 2.0 zu ermöglichen.
Theme Check: der Sprachserver für Liquid und JSON
Theme Check ist ein Sprachserver für Liquid und JSON, der Themes auf Fehler untersucht und Best Practices für Shopify-Themes und Liquid hervorhebt. Dieses Tool kann in Texteditoren wie Visual Studio Code integriert werden und identifiziert verschiedene Arten von Problemen innerhalb deines Theme-Codes, einschließlich Liquid-Syntaxfehlern, fehlenden Vorlagen, Leistungsproblemen etc.
Damit du Probleme mit dem Theme schnell beheben kannst, enthalten die Fehlermeldungen einen Link zur Dokumentation der fehlerhaften Funktionsprüfung. Theme Check ist auch mit dem Shopify CLI-Tool kombiniert, sodass es nicht separat installiert werden muss.
In unserer Entwicklerdokumentation erfährst du wie du Theme Check installieren und beim Testen deiner Themes verwenden kannst.
Unten findest du ein Video des neuen Code-Editors in Aktion.
Kennst du schon unser Affiliate Programm?
5. Ein neues Referenz-Theme: Dawn
Zum Start von Online Store 2.0 führen wir ein brandneues Standard-Theme ein, das alle oben beschriebenen Funktionen miteinander verbindet. Wir nennen es „Dawn.“
Dawn ist das erste auf Open-Source basierte Referenz-Theme von Shopify mit OS 2.0-Flexibilität und dem Fokus auf Geschwindigkeit. Es ist mit semantischem Markup mit HTML und CSS aufgebaut, anstatt sich auf Polyfills und externe Bibliotheken zu stützen. So werden hervorragende Erfahrungen auf allen Browsern gewährleistet.
Dawn wurde entwickelt, um die Flexibilität unseres Systems zu maximieren und gleichzeitig die Komplexität zu minimieren. Das bedeutet, dass wir ein Gleichgewicht zwischen der Gestaltung unseres Designs und der Möglichkeit für Händler zum Vornehmen von benötigten Änderungen schaffen.
Das Ergebnis ist, dass Dawn standardmäßig schnell ist, egal was passiert. Es lädt 35 Prozent schneller als Debut, das Theme, das heute mehr als die Hälfte der Händler verwenden.
Dawn: Das neue Shopify Referenz-Theme.
Da Dawn bereits über JSON-Vorlagen für alle seine Seiten verfügt, kannst du es als Vorlage verwenden, wenn du Abschnitte in deinen eigenen Themes freischaltest. Es wird zukünftig das neue Standard-Theme für alle neuen Shops sein und damit Debut ablösen.
In unserem Artikel auf dem Shopify UX Blog erfährst du mehr darüber, wie wir Dawn aufgebaut haben.
Minimale Verwendung von JavaScript: schneller denn je
Ein weiterer entscheidender Aspekt von Dawn ist, dass wir untersucht haben, wie weit man mit einem Ansatz kommen kann, bei dem JavaScript, nur wenn es wirklich notwendig ist, eingesetzt wird. Der Hintergrund hierfür ist, dass wir den Faktor Geschwindigkeit mehr denn je priorisieren. So wollen wir eine Grundlage schaffen, um die Wahrscheinlichkeit zu erhöhen, dass die Shops der Händler möglichst schnell geladen werden.
Uns war jedoch klar, dass die Entwicklung mit minimalem JavaScript keine Kompromisse bei der Benutzererfahrung für Händler und Käufer bedeuten durfte. In manchen Fällen ist JavaScript notwendig, auch wenn es nicht die leistungsfähigste Wahl ist. Doch wo es sinnvoll war, haben wir uns auf native Browser-Funktionen statt auf JavaScript-Bibliotheken und Polyfills gestützt.
Wir ermutigen Entwickler, wo immer möglich die Vorteile der nativen Browser-Funktionalität zu nutzen, um HTML- und CSS-Layouts zu rendern.
6. Wiedereröffnung des Shopify Theme Stores
Wir freuen uns, bekannt geben zu können, dass wir zusätzlich zu den Verbesserungen mit Online Store 2.0 auch den Shopify Theme Store am 15. Juli 2021 wieder für Partner öffnen werden. Ab diesem Stichtag kannst du deine neuen Themes zur Überprüfung einreichen. Genehmigte Themes werden dann im Anschluss und nach unserer Prüfung veröffentlicht.
Was noch besser ist: Im September werden wir die Umsatzbeteiligung an der ersten Million Dollar, die du jährlich mit dem Shopify Theme Store verdienst, streichen. Wenn du also weniger als 1 Million US-Dollar mit deinen Themes verdienst, wirst du null Prozent Umsatzbeteiligung zahlen. Die entsprechenden Zahlen werden jedes Jahr zurückgesetzt. Und wenn du mehr als 1 Million US-Dollar einnimmst, zahlst du trotzdem nur eine Umsatzbeteiligung von 15 Prozent auf die zusätzlichen Einnahmen.
Für die Anmeldung im Shopify Theme Store wird eine einmalige Anmeldegebühr in Höhe von 99 US-Dollar pro Konto erhoben. Hinzu kommt eine Bearbeitungsgebühr von 2,9 Prozent auf alle Transaktionen. In Kürze wird es weitere Informationen zu diesem Update geben.
Mit mehreren Millionen Händlern, die Shopify zum Führen ihrer Geschäfte nutzen, ist es an der Zeit, Themes für diese globalen Entrepreneure zu entwickeln. Der Shopify Theme Store war drei Jahre lang geschlossen. Dies ist also eine Gelegenheit, früh einzusteigen und sich als vertrauenswürdiger Theme-Entwickler zu etablieren.
Erfahre jetzt was du über unsere aktualisierten Richtlinien zum Einreichen deines Themes im Shopify Theme Store wissen musst. Falls noch nicht geschehen, kannst du dich unten für ein Shopify-Partnerkonto anmelden und mit der Erstellung deines ersten Themes beginnen.
7. Aktualisierung deiner Themes und Apps
Um in vollem Umfang von diesen Verbesserungen zu profitieren, solltest du deine Themes und Apps so bald wie möglich auf die aktualisierten Anforderungen von Online Store 2.0 migrieren – vor allem, wenn Händler die Flexibilität von OS 2.0 erwarten.
Bis Ende des Jahres wird es erforderlich sein, dass alle Themes im Shopify Theme Store und Apps im Shopify App Store unsere neue Infrastruktur nutzen.
Erfahre auf unseren Seiten zur Migration deiner Themes auf OS 2.0 und zur Entwicklung von Theme-App-Erweiterungen, alles, was du benötigst, um deine Apps mit OS 2.0 Themes kompatibel zu machen.
Aktualisierte Dokumentation
Um dich bei der Aktualisierung deiner Themes und Apps zu unterstützen, haben wir die Entwicklerdokumentation für den Shopify Onlineshop überarbeitet. Unsere Dokumentation enthält jetzt:
- Anleitungen für Entwickler-Workflows und -Prozesse im Zusammenhang mit Themes
- Best Practices für E-Commerce-Komponenten mit Best Practices für das Semantic Web
- Antworten dazu, wie Apps in die neue Online-Shop-Architektur integriert werden sollten und wie deine App mit älteren Themes funktioniert
Besuche jetzt unsere neue Dokumentation, um mehr über das Aktualisieren deiner Apps und Themes zu erfahren. Außerdem solltest du dich für unseren monatlichen Newsletter „What's New for Developers“ anmelden, um über alle Shopify-Neuigkeiten in Sachen Entwicklung auf dem Laufenden zu bleiben.
Abonniere unseren deutschen Newsletter
Gestalten der Zukunft des Handels
Online Store 2.0 markiert eine umfassende Überholung der Art und Weise, wie Themes bei Shopify erstellt werden. Mit Abschnitten auf jeder Seite, App-gesteuerten Blöcken, flexibler Datenspeicherung und robusten Entwickler-Tools ist die Theme-Entwicklung auf Shopify jetzt einfacher als je zuvor. Die App-Entwicklern gebotene Erweiterbarkeit, bedeutet mehr Möglichkeiten, Integrationen für Händler zu erstellen und deine Lösung direkt im Onlineshop zu präsentieren.
Aktualisiere also deine Themes und erstelle Theme-App-Erweiterungen für deine Apps, um diese Updates in vollem Umfang nutzen zu können. So wirst du auch weiterhin und besser als je zuvor für Händler auf der ganzen Welt entwickeln können.
