Die einfachste Art die Storefront-API zu verstehen, ist es, sie mit dem Schaufenster eines Einzelhandelsgeschäfts zu vergleichen.
Ein ansprechend gestaltetes Schaufenster erfüllt einen wichtigen Zweck: vorbeilaufende Kunden in den Laden zu locken. Dort sehen sie sich um und lassen sich anschließend im Shop beraten. Wenn Händler*innen auf die Bedürfnisse ihrer Kunden eingehen und diese sich im Store wohlfühlen, sind sie gewillt die Produkte zu kaufen und das Geschäft erneut zu besuchen.
Mit Apps können Händler*innen Funktionen integrieren, die eine einzigartige User Experience schaffen.
In ähnlicher Weise unterstützt die Storefront-API die Aktionen, die Kunden in einem digitalen Geschäft ausführen. Sie durchstöbern das Sortiment, fügen Artikel zum Warenkorb hinzu, checken aus und bezahlen. Mit Apps können Händler*Innen Funktionen integrieren, die eine einzigartige User Experience schaffen und es ihnen erleichtern, das zu finden, was sie suchen.
In diesem Artikel erklären wir, wie Händler*innen ihre Storefront mit App-Erweiterungen zukünftig ganz einfach eigenständig gestalten und anpassen können. Damit werden der Entwicklungsprozess und die Übergabe für dich und deine Kunden vereinfacht. Denn sie können selbst entscheiden, welche Inhalte sie präsentieren möchten und wo diese erscheinen.
Lesetipp: wie der Uhren-Anbieter Tastemaker es mit Start-up Budget geschafft hat, seine Mobile User Experience zu optimieren, erfährst du in unserem Beitrag „Individuelles Design mit Startup-Budget: So optimierte Tastemaker seine Mobile User Experience.“
So gestaltest du das Storefront-Erlebnis für deine Kunden
In der Vergangenheit war es eine frustrierende Angelegenheit, Apps in die Shopify Storefront zu integrieren oder aus dieser zu entfernen. Denn Händler*innen mussten den Quellcode manuell in das Theme einfügen oder einen Entwickler bitten, diese Aufgabe für sie zu erledigen. Diese hatten es wiederum schwer zu verstehen, wo sie diesen Code einfügen müssen.
Das neue Design-Erlebnis, das wir im vergangenen Jahr auf der Shopify Unite vorgestellt haben, löst genau dieses Problem. Mit App-Sektionen und App-Snippets können Händler*innen neue Inhalte im Onlineshop mit wenigen Klicks hinzufügen, verschieben und wieder entfernen – ganz ohne technische Programmierkenntnisse.
Die neuen App-Erweiterungen werden im Laufe dieses Jahres allen Händler*innen zur Verfügung stehen. Als Shopify Partner kannst du sie schon jetzt in der Entwicklervorschau deines Development Shops testen.
Lesetipp: In unseren Blogbeitrag erfährst du, was die Highlights der Shopify Unite 2019 waren und was sie für Händler*innen bedeuten.
App-Sektionen erleichtern den Umgang mit Apps
Bereits seit ein paar Jahren nutzen Händler*innen dynamische Sektionen, um ihre Seiten zu konfigurieren. Diese sind in sich geschlossene Dateien, die aus Liquid-Code und einem Schema bestehen, das sowohl die Struktur als auch die konfigurierbaren Optionen des jeweiligen Abschnitts definiert. Dabei bildet der Liquid-Code die Brücke zwischen einer HTML-Datei und dem Shop.
Jede Liquid-Datei ermöglicht den Zugriff auf bestimmte Variablen. Händler*innen können sich beispielsweise von Shopify eine Variable mit allen Produkten aus einer bestimmten Kollektion befüllen lassen, ohne etwas über das eigentliche Produkt wissen zu müssen. Das product.liquid-Template erlaubt den Zugriff auf alle Details, die sich auf das aktuelle Produkt beziehen.
Stell dir die Shopify-Sektionen als individuelle, anpassbare Komponenten eines Themes vor. Innerhalb jedes Abschnitts können du oder deine Kunden im Onlineshop-Editor Produkte, Diashows, Videos oder Sammlungen hinzufügen, neu anordnen und entfernen. Damit entsteht eine Seite, die leicht konfigurierbar ist.
Sektionen können statisch in die Vorlagen eines Themes (wie beispielsweise in der Kopf- und Fußzeile) aufgenommen oder dynamisch auf der Seite hinzugefügt und entfernt werden.
Mit der neuen Theme-Architektur modulare Seiten erstellen
Das neue Design-Erlebnis erleichtert es Händler*innen zukünftig App-Sektionen zu einer Seite hinzuzufügen und damit benutzerdefinierte Bereiche für Apps zu erstellen.
Anstatt den Code manuell an jeder Stelle einzufügen, an der die App angezeigt werden soll, kannst du jetzt den Onlineshop-Editor nutzen. Füge App-Sektionen an jeder beliebigen Stelle ein oder schiebe sie nach dem Drag-and-Drop-Prinzip auf der Seite hin und her. Sobald du die App wieder deinstallierst, wird der App-Abschnitt automatisch von der Seite entfernt.
Weiterer Vorteil des neuen Design-Erlebnisses: jetzt können Sektionen nicht mehr nur auf der Startseite, sondern auch auf allen Unterseiten des Shops genutzt werden, um den Inhalt und das Layout der Seite zu verändern. App-Sektionen können momentan nur auf der Produktseite getestet werden. Weitere Seiten folgen in den kommenden Monaten. 
Der App-Abschnitt wird auf der Produktseite dargestellt
Tipp: Alle wichtigen Informationen zu App-Sektionen findest du in unserem Leitfaden (Englisch).
Mit App-Snippets müssen deine Kunden keinen Code mehr bereinigen
Mit der Einführung von App-Snippets erleichtern wir außerdem die Deinstallation von Apps aus der Storefront.
Wird eine App deinstalliert, wird ihr der API-Zugriff sofort entzogen. Der anwendungsspezifische Code, der dem Theme bei der Installation der App hinzugefügt wurde, bleibt jedoch erhalten.
Bei Apps, die Änderungen an der Storefront vornehmen, führte das bislang zu Problemen. Der „verwaiste“ Code in der Storefront musste manuell entfernt werden, da sonst fehlgeschlagene Remote-Aufrufe oder die fehlerhafte Wiedergabe der Seiteninhalte die Performance des Shops beeinträchtigt haben.
Standardablauf für eine App bei Änderungen an der Storefront
Mit App-Snippets wird die Art und Weise, wie Shopify mit diesen Code-Schnipseln umgeht, grundlegend verändert. Bisher mussten Apps bei der Installation API-Anfragen an Shopify stellen, um Code-Snippets zu erhalten, jetzt stellt Shopify das App-Snippet automatisch bereit.
Verwende App-Snippets für deine Apps
App-Snippets können verwendet werden, um kleine Code-Blöcke zu bestehenden Seiten- und Inhaltsabschnitten hinzuzufügen. Sie können sogar in Themes integriert werden, für die keine Sektonen aktiviert wurden. Dadurch wird die alte Methode ersetzt, Snippet-Dateien mit der Asset-API in ein Theme einzufügen.
Nun kannst du einen Code-Block in deinem Partner-Dashboard sehen. Dieser wird dann automatisch verwendet, wenn deine Apps in bestehenden Themes installiert werden. 
Neuer Ablauf der Deinstallation von Apps mit App-Snippets
Sobald du die App wieder deinstallierst, wird das Code-Snippet automatisch aus dem Shop entfernt und es bleibt lediglich ein Verweis auf das App-Snippet übrig. Dieser teilt dem Theme mit, dass es keine Inhalte mehr gibt, die wiedergegeben werden müssen. Das wirkt sich positiv auf die Performance aus.
Du möchtest mehr darüber erfahren, wie du App-Snippets nutzen und Themes sauber halten kannst? Dann schaue dir unsere Dokumentation zu App-Snippets an.
Mit App-Sektionen und App-Snippets sparst du Zeit
App-Sektionen und App-Snippets sind eine zukunftsweisende Möglichkeit für Händler*innen Apps in die Storefront zu integrieren, deren Anordnung beliebig zu verändern oder sie zu entfernen: ganz einfach im Onlineshop-Editor, ohne manuell den Code einfügen zu müssen. So erstellst du Storefronts, die deine Kunden begeistern und ihnen genau das bieten, was sie suchen.
Titelbild von Emre Can. Weitere Bilder von Shopify.
Bring dein Geschäft mit dem Shopify-Partnerprogramm voran
Ganz gleich, ob du Services im Bereich Marketing, kundenspezifische Anpassungen, Webdesign oder Entwicklung anbietest, das Shopify-Partnerprogramm hilft dir dabei, erfolgreicher zu sein. Melde dich kostenlos an und erhalte Zugriff auf Möglichkeiten zur Umsatzbeteiligung, Tools zum Ausbau deines Unternehmens und eine begeisterte Commerce-Community.
Anmelden