Shopify ist mit über 450 Millionen Kunden weltweit eine der wichtigsten Plattformen für Online-Shops. Seit dem 29. Juni 2021 ist die aktuellste Version auf dem Markt, die einige Erleichterungen für Sie als Händler und Anwender bereithält. Mit der Version OS 2.0 (Online Store 2.0) eröffnet Shopify seinen Anwendern eine ganze Reihe neuer Optionen. Zahlreiche neue Entwickler-Tools und Themes sorgen für ein neues Online-Shop-Erlebnis. Wir zeigen was sich verändert hat.
<h2 id="Shopify Onlinestore 20" data-headline="Der neue Shopify Onlinestore"><span class="first_id_number">1.</span>Shopify Online Store 2.0 im Überblick</h2>
Das Backend des neuesten Updates der Low Code Plattform erinnert zunächst an die Vorgänger-Version, doch zeigen sich die Unterschiede bereits beim Blick auf den Theme Editor deutlich. Mit er Version OS 2.0 wird es für Anwender erheblich leichter, Storefronts aufzubauen. Einige Funktionalitäten, die bislang noch etwas Codierungsarbeit bedeuteten, lassen sich inzwischen unmittelbar im Backend erledigen. Das nun als Standard-Theme eingeführte Theme Dawn ist gegenüber dem bisherigen Standard-Theme um 35 Prozent schneller. Bei Online Store 2.0 handelt es sich um ein allumfassendes Update. Die neue Version gibt jedem Nutzer die Möglichkeit, einen Online-Shop zu erstellen, diesen anzupassen, zu skalieren und fortlaufend zu optimieren.
Mit der Version OS 2.0 richtet sich der Anbieter nicht nur an kleine und mittlere Unternehmen, sondern adressiert bewusst auch Großkonzerne. Beispielsweise erhielt das Unternehmen Netflix einen besonders frühen Zugang zum Update auf OS 2.0. Der Streaming-Dienst konnte auf dieser Basis seinen ersten Online-Shop erstellen.
<h2 id="Vorteile" data-headline="Vorteile"><span class="first_id_number">2.</span>Shopify Online Store 2.0 und seine Vorteile im Überblick</h2>
Das Update auf Shopify OS 2.0 ist zusammengefasst mit einer ganzen Reihe von Vorteilen verbunden. In erster Linie profitieren Sie von einer höheren Flexibilität sowie einer optimierten Skalierbarkeit.
Einige der gängigen Verwaltungs-Funktionen in Shopify werden mit dem Update auf Shopify OS 2.0 einfacher.
Das Shopsystem profitiert in der neuen Version zudem von einer höheren Performance.
Inhalte lassen sich in das neue System einfacher einpflegen, als dies zuvor der Fall gewesen ist.
Die Erstellung sowie die Bedienung von Storefronts fällt mit der neuen Version ebenfalls leichter als noch mit dem Vorgänger.
Weiterhin profitieren Anwender von der App-Modularität der neuen Version.
Ebenfalls bietet Shopify in der Version OS 2.0 eine native Metafield-Funktion.
<h2 id="Themenarchitektur" data-headline="Themenarchitektur"><span class="first_id_number">3.</span>Shopify Online Store 2.0 und seine neue Themenarchitektur</h2>
Vorgänger-Versionen Shopifys hatten eine engere Begrenzung der verfügbaren Blöcke und Vorlagen. Händler waren damit eingeschränkt in der Anzahl der verfügbaren Blöcke im Shop. Es gab eine begrenzte Anzahl Vorlagen, die meist konkreten Produkten zugeordnet waren. Mit dem Update gibt es umfassendere und flexible Anpassungsfähigkeiten. Überdies bietet Online Store 2.0 eine Reihe neuer Optionen für Entwickler, Themes sowie Integrationen zu erstellen. Ab der Version Online Store 2.0 haben Sie als Händler die Option, jeder neuen Seite neue Abschnitte hinzuzufügen, während Sie zuvor nur der Startseite Abschnitte hinzufügen konnten.
Die Vorlagen jeder Seite lassen sich mittels einer JSON-Vorlagendatei aktivieren. Diese Vorlagendatei legt die jeweiligen Einstellungen für die Seite fest. Damit lassen sich sämtliche Seiten-Abschnitte sowie auch benutzerdefinierte Seiten, Sammlungsseiten, Blog-Posts und andere Inhalte auflisten. Über die Vorlagendateien lässt sich festlegen, welche der Abschnitte standardmäßig angezeigt werden sollen und in welcher Reihenfolge sie in dem von Ihnen ausgewählten Design erscheinen. Nach dem Hinzufügen der Vorlage können Sie dynamische Abschnitte hinzufügen. Hierfür bedienen Sie sich des Themen-Editors.
Änderungen lassen sich über einen neuen Rendering-Ansatz der Vorlagen über die Storefront erreichen. Sämtliche Seitentypen lassen sich mit einer solchen JSON-Vorlagendatei rendern. Darüber lassen sich die Abschnitte der entsprechenden Seite aufführen sowie Einstellungsdaten bezüglich neuer Abschnitte speichern, wenn Sie diese hinzugefügt oder bearbeitet haben.
Dank dieses Verfahrens können Shops mit mehreren Vorlagenseiten ausgestattet werden, die wiederum unterschiedlichen Produkten, Kategorieseiten, Blog-Posts sowie anderer Seiten zugeordnet werden können.
Diese neuen Funktionalitäten für Entwickler macht es einfacher, die Darstellung und Inhalte des Shops an eigene Anforderungen anzupassen. Bislang waren aufwändigere Eingriffe, benutzerdefinierte Apps oder sogar Eingriffe in den Quellcode erforderlich, wenn ein ähnlicher Effekt erzielt werden sollte.
<h2 id="App modularitaet" data-headline="App-Modularität"><span class="first_id_number">4.</span>App-Modularität in Shopify Online Store 2.0</h2>
Eine weitere zentrale Neuerung in der Version Online Store 2.0 betrifft die App-Modularität. Mit Modularität ist gemeint, dass Sie als Anwender problemlos verschiedene UI-Komponenten unmittelbar über den Theme-Editor hinzufügen oder entfernen können. Hierbei ist es nicht mehr erforderlich, auf den Quellcode der Themes zuzugreifen.
Somit ist es möglich, unterstützende Assets der Apps auf simple Art und Weise zu verwalten. Über die integrierte Modularität ist für ein ein vereinfachtes Onboarding gesorgt. Auch die Entfernung beziehungsweise Deinstallation der Apps und Komponenten ist problemlos möglich. Die Deinstallation erfolgt sauber und ohne, dass Ghost-Code übrigbleibt.
Erweiterungen der Theme-App lassen sich dabei ebenso wie andere App-Erweiterungen über die Shopify-CLI erstellen. In der Praxis bedeutet diese Modularität, dass Sie nicht für jedes Theme eine separate Integrationslogik aufbauen müssen. Da keine Modifikation des Theme Codes via manueller Installation mehr erforderlich ist, sinkt zudem die Fehleranfälligkeit. Damit verbunden ist ein zeitlicher Vorteil, da die Problembehandlung entfällt.
<h2 id="App bloecke" data-headline="App-Blöcke"><span class="first_id_number">5.</span>App-Blöcke für die Design-App-Erweiterung</h2>
Shopify Online Store 2.0 bietet Ihnen überdies Design-App-Erweiterungen. Diese Entwickler-Tools unterstützen Sie dabei, zahlreiche Erweiterungen sowie Funktionen hinzuzufügen. Damit lässt sich die Seiten-Funktionalität des Händlers erweitern.
In der Vorgänger-Version war keine Möglichkeit gegeben, Apps in Themes unmittelbar zu integrieren. Daher waren Entwickler darauf angewiesen, eine besondere Integrationslogik zu programmieren, die sich in bestehende Themes einfügt. Aus diesem Grund war es problematisch, solche Funktionen zu entwickeln, die unabhängig vom Theme beziehungsweise in mehreren verschiedenen Themes problemlos funktionierten. Diese Problematik entfällt mit der neuen Version.
<h2 id="Metafelder" data-headline="Metafelder"><span class="first_id_number">6.</span>Flexible Inhalte durch Änderungen an den Metafeldern</h2>
Mit der Version OS 2.0 müssen Metafelder nicht erst fest in Themes einprogrammiert werden. Ebenso sind Entwickler für die Änderung der Produkt-Seiten nicht mehr zwingend auf APIs und Schnittstellen angewiesen. Mit der neuen Shopify-Version können Theme-Entwickler dynamische Quellen nutzen, um Standard-Metafelder oder bekannte Ressourcen einzubinden.
Zu diesem Zweck können Händler den aktualisierten Theme-Editor nutzen, um direkt Metafelder oder Eigenschaften hinzuzufügen. Hierfür sind nun keine APIs und keine Codierungsarbeit mehr erforderlich.
Sie können als Händler unmittelbar auf der Produktseite gewünschte Inhalte hinzufügen sowie zusätzliche Informationen ergänzen. Hierbei kann es sich etwa um hilfreiche Angaben für potenzielle Kunden handeln, beispielsweise Größentabellen. Sämtliche Aspekte, die nicht im Store-Editor zu finden sind, lassen sich über die Metafelder aktualisieren.
Die Metafelder sind nun flexibler gestaltet, womit Händler ihre Handelsdaten einfach und sicher importieren können. Es gibt Standard-Metafelder, mit denen sich benutzerdefinierte Vorlagen und Designs einfach in unterschiedliche Geschäfte oder Marktsegmente einfügen lassen. Für verschiedene Branchen und Angebote finden sich schnell passende Standard-Metafelder.
Ebenso besteht die Möglichkeit, den Metafeldern bestimmte Präsentationshinweise hinzuzufügen. Auf diese Weise lassen sich Geschäftsdaten rendern.
Die Dateiauswahl über Metafields unterstützt in Shopify Online Store 2.0 nun eine Vielzahl verschiedener Dateiformate. Auch Medien wie PDF-Dateien oder Bilder lassen sich damit auswählen und bearbeiten. Statt der festen Codierung bestimmter Dateitypen in ein Theme, können Sie als Händler oder Entwickler über die Metafield-Dateiauswahl jederzeit ausgewählte Medien direkt auf die Produktseite laden. Bilder und andere Dateien sind über die Bereiche Einstellungen / Dateien zu finden und lassen sich sofort nutzen. Wenn Sie eines der Metafields häufiger verwenden, etwa eine Größentabelle, unterstützt die Dateiauswahl die Auswahl der konkreten Dateien über einfache UX, sodass das entsprechende Metafield unterhalb des Themas selbst platziert wird.
<h2 id="Dateien-API" data-headline="Dateien-API"><span class="first_id_number">7.</span>Dateien-API in Shopify Online Store 2.0</h2>
Ab der API-Version 2021-07 ist es möglich, mit der File API verschiedene generische Dateien zu generieren, zu verwalten und zu aktualisieren. Auf diese Weise ist es Händlern möglich, unterschiedliche Dateien für verschiedene Apps wiederzuverwenden. Diese Dateien lassen sich der Dateiseite im Inneren hinzufügen.
Der Zugriff auf die neue Datei-API erfolgt über den Bereich Einstellungen / Dateien. Der Upload oder die Auswahl der existierenden Dateien über diesen Bereich wird in der neuen Shopify-Version durch die neu eingeführte GraphQL-API erleichtert. Apps profitieren vom Zugriff auf diese Sektion im Administrator-Bereich, auch hinsichtlich der Platzierung der Inhalte in den Medien-Metafeldern. Damit haben Apps die Möglichkeit, den vorhandenen Speicherplatz für Dateien sowie Bilder zu nutzen, die nicht unmittelbar mit einem konkreten Produkt verknüpft sind. Dies betrifft auch Bilder, die in den Designs genutzt werden.
<h2 id="Liquid Einstellungen" data-headline="Liquid Einstellungen aus dem Editor"><span class="first_id_number">8.</span>Einstellungen der Liquid-Eingabe unmittelbar aus dem Editor</h2>
Der Theme-Editor hat in der neuen Shopify-Version weiterhin das Update erfahren, dass die Liquid-Eingabe über neue Einstellungen verfügt. Als Händler können Sie nun benutzerdefinierte Liquid-Codes unmittelbar aus dem Editor zu einer Produktseite hinzufügen. Diese Liquid-Einstellung hat Ähnlichkeiten mit dem HTML-Einstellungstypen. Von diesem unterscheidet sie sich doch darin, dass sie Zugriffe auf Liquid-Variablen ermöglicht. Als Händler können Sie nun auf verschiedene Liquid-Objekte zugreifen, sowohl vorlagenspezifische als auch globale.
Aufgrund dieser Einstellung bleibt Anwendern die manuelle Modifikation der den Themes zugrunde liegenden Codes erspart. Dies gilt im Besonderen für das Hinzufügen von Code für Liquid-basierte Apps. Die Änderungen unterstützen Händler dabei, mit den neuen Funktionalitäten von Shopify OS 2.0 zu arbeiten, ohne dass hierbei eine aufwändige Abstimmung mit Entwicklern angewiesen zu sein.
<h2 id="Neuartige Entwickler Tools" data-headline="Neuartige Entwickler-Tools"><span class="first_id_number">9.</span>Neuartige Entwickler-Tools in Shopify OS 2.0</h2>
Mit der aktuellen Shopify-Version kommt eine Reihe neuer, problemlos integrierbarer Entwickler-Tools. Damit bietet der Hersteller eine neuartige Möglichkeit, Themes sowie Apps für Shopify-Seiten zu erstellen. Die Entwickler-Tools lassen sich in Shopify integrieren, um auf diese Weise den Prozess der Erstellung, Testung und Bereitstellung der Themes effektiver zu gestalten. Die Shopify-Integration für GitHub, ein aktualisiertes CLI-Tool sowie der Shopify-Theme Check sorgen auf mehreren Ebenen für Vorteile. Die Theme-Entwicklung erfolgt robuster und verfügt über eine Versionskontrolle. Die stabile Sandbox-Umgebung vereinfacht die lokale Entwicklung von Themes. Weiterhin wird die Entwicklung optimiert durch den Echtzeit-Linter, der speziell auf Shopify-Themes abgestimmt ist.
<h2 id="GitHub-Integration" data-headline="GitHub-Integration"><span class="first_id_number">10.</span>GitHub-Integration</h2>
Die Shopify-Integration für GitHub ermöglicht eine deutlich vereinfachte Wartung und Entwicklung. Themes lassen sich damit einfacher erstellen, warten sowie verwalten. Eine Verknüpfung des GitHub-Benutzerkontos mit Ihrem Shop ermöglicht es, Änderungen in ein GitHub Repository zu pushen sowie hieraus abzurufen. Das GitHub Repository wird jederzeit auf dem aktuellen Stand gehalten und mit ausgewählten Themes synchronisiert.
Aufgrund dieser GitHub-Integration der Themes ist Entwicklern eine besonders sichere Kooperation in der Bearbeitung der Themes gegeben. Dies ist durch Neueinführung einer nativen Unterstützung für die Versionskontrolle möglich. Bei der Shop-Arbeit können Entwickler Workflows implementieren. Änderungen an Themes können dabei auf GitHub überprüft sowie zusammengeführt werden, bevor es zur Übernahme in ein Live-Theme kommt.
Bei der Nutzung von CI zur Durchführung von Tests, Linting und Transformationen, lässt sich die GitHub-Integration auch im Zusammenspiel mit Git-Subtrees nutzen, um produktionsfertige Dateien zu synchronisieren.
<h2 id="CLI-Tool" data-headline="Änderungen am CLI-Tool"><span class="first_id_number">11.</span>Änderungen am Shopify CLI-Tool</h2>
Mit dem neuen Shopify CLI-Tool können Sie als Entwickler benutzerdefinierte Designs erstellen. Bislang nutzten Entwickler das CLI-Tool, um Node.js- und Ruby-on-Rails-Apps zu nutzen. Mit den Änderungen am Shopify CLI-Tool wächst der Funktionsumfang.
Änderungen an den Designs lassen sich innerhalb des Bereichs Entwicklungsdesigns vornehmen. Die Änderungen lassen sich in der Vorschau anzeigen und testen.
CSS- sowie Liquid-Abschnittsänderungen können mittels Entwicklungsserver vorgenommen werden und lassen sich im laufenden Betrieb neu laden.
Neue Designs lassen sich über die Befehlszeile pushen sowie veröffentlichen. Neue Designs können zudem einer Designprüfung unterzogen werden.
Themen, die sich noch in der Erstellung befinden, können als Entwicklungsthemen angelegt werden. Es handelt sich hierbei um temporär unsichtbare Themen, die nicht auf der Startseite angezeigt werden. Diese in der Entwicklung befindlichen Themen sind nicht auf der Admin-Seite zu sehen. Daher werden Besucher die noch unfertigen Themen nicht versehentlich sehen.
Entwicklungsthemen lassen sich ebenso nutzen, um aktuelle Änderungen an einem solchen lokal entwickelten Theme in Echtzeit anzeigen zu lassen. Insgesamt erhalten Nutzer ein hohes Maß an Kontrolle darüber, wie das endgültige Thema letztlich aussehen soll und angezeigt wird. Entwicklungsthemen werden in Shopify OS 2.0 nach sieben Tagen der Inaktivität gelöscht.
<h2 id="Fazit" data-headline="Fazit"><span class="first_id_number">12.</span>Themencheck in Shopify OS 2.0</h2>
Ein weiterer integrierter Bestandteil in Shopify OS 2.0 ist der Theme Check. Dieser untersucht die Themes auf Fehler. Nach Abschluss des Fehler-Scans hebt dieses Entwickler-Tool die Best Practices hervor.
Der Themen-Check ist eine Art Sprachserver für Liquid und JSON. Dieses Entwickler-Tool lässt sich problemlos in Texteditoren wie Visual Studio Code. Zu den identifizierbaren Problemen innerhalb des Codes gehören Liquid-Syntaxfehler, Leistungsprobleme oder fehlende Vorlagen. Damit für eine rasche Behebung der identifizierten Probleme gesorgt ist, beinhalten die Fehlermeldungen auch einen Link zur Dokumentation der jeweiligen Funktionsprüfung. Der Themencheck ist direkt mit dem Shopify CLI-Tool kombiniert, sodass hier keine separate Installation erforderlich ist.
