Veränderungen am Checkout eines Onlinestores sind ein heikles Thema. Denn immerhin finden laut den Zahlen des Baymard Instituts bis zu 70 Prozent aller Warenkorbabbrüche genau dort statt. Die Anbieter:innen von Shopsystemen erlauben Eingriffe in den Checkout daher nur höchst ungern und überlassen sie wenn, dann nur den IT-Profis.

Bis jetzt. Denn in den vergangenen Monaten hat Shopify einen neuen Kurs eingeschlagen. Der alte Shopify Checkout-Code checkout.liquid wird durch die sogenannte Checkout Extensibility ersetzt. Mit ihrer Hilfe sollen selbst Laien in der Lage sein, den Kassenbereich ganz ohne Code einzurichten.

In diesem Beitrag werfen wir einen ausführlichen Blick auf das neue System. Was kann die Shopify Checkout Extensibility wirklich und was kann sie (noch) nicht? Wie lässt sie sich effizient nutzen, wo lauern Probleme und welche Kinderkrankheiten gibt es?

Um das Thema „Shopify Warenkorb anpassen” von allen Seiten professionell zu beleuchten, haben wir uns zwei Profis mit ins Boot geholt: Unser Senior Shopify Developer Lukas Klappert wirft mit uns einen Blick auf die technischen Aspekte der Checkout Extensibility. Für den Bereich der Analyse und des Trackings zeichnet sich Tim Schneider, Analytics Consultant bei Analyticsfreaks, verantwortlich.

 

checkout.liquid vs. Checkout Extensibility – Was ist los bei Shopify?

Der hauseigene Checkout war für Shopify über lange Zeit so etwas wie eine heilige Kuh. Nahezu unberührbar ließ er sich nur im Profitarif Shopify Plus an die Wünsche der Shopbetreibenden anpassen – und auch dort nur mithilfe fundierter IT-Kenntnisse und tiefen Eingriffen in den Code der checkout.liquid-Datei.

Zum einen, weil Veränderungen am Kassenbereich mit einem großen Risiko verbunden sind: Ein zerschossener Checkout kann zu gewaltigen Umsatzeinbrüchen führen. Zum anderen, weil das System von Haus aus bereits gut durchdacht, sehr performant und extrem sicher ist – ein schlagkräftiges Verkaufsargument für Shopify, auf das die Kanadier:innen gerne hinweisen.

Was ist Checkout Extensibility?

Seit einigen Monaten stellt Shopify für Plus-Kunden die Möglichkeit bereit, von der alten checkout.liquid auf Checkout Extensibility upzugraden. In diesem neuen System wird der Checkout des Onlineshops hinter den Kulissen komplett anders dargestellt: Weg vom großen Block der checkout.liquid, in dem der gesamte Code des Checkouts lag, hin zu einem modularen Aufbau, inklusive eines Drag-and-Drop-Editors.

In naher Zukunft geht Shopify dann noch einen Schritt weiter: Ab dem 13. August 2024 wird die checkout.liquid komplett eingestellt. Genutzt werden kann dann nur noch Checkout Extensibility. Am 28. August 2025 folgt das endgültige Aus für die Order Status Page.

 

Nerds am Nerden: Shopify-Warenkorb anpassen mit Checkout Extensibility

Shopify-Händler:innen müssen also eher früher als später auf das neue System umsatteln. Betroffen sind dabei nicht nur Kund:innen im Shopify Plus-Plan: Da auch die Order Status Page betroffen ist, werden außer Shopify Starter alle Pläne von den Veränderungen tangiert.

Die Checkout Extensibility selbst besteht aus fünf Modulen, auf die wir gleich einen detaillierten Blick werfen. Zur Verfügung gestellt werden sie wie folgt:

Modul #1: UI Extensions

Die UI Extensions kümmern sich um den Teil des Checkouts, der Besucher:innen am ehesten ins Auge fällt: Den grundlegenden Aufbau der Seite. Wie sind einzelne Frames, Buttons und Formularfelder angeordnet? Wie heißen sie und welchen Text beinhalten sie?

Genau an dieser Stelle greift auch der neue Editor, den Shopify-User:innen in ähnlicher Form bereits aus anderen Teilen ihres Shops kennen. Zukünftig lassen sich auch die Bausteine des Checkouts per Drag-and-drop beliebig verschieben, in ihrer Größe anpassen und völlig neu platzieren. Lukas erklärt dazu:

„Mit Checkout Extensibility wird es auch für Laien möglich, sich zumindest rudimentär einen individuellen Kassenbereich zu basteln. Viele Use Cases werden tatsächlich codefrei abgedeckt und lassen sich schnell und einfach mit ein paar Klicks umsetzen.

Du versprichst dir eine bessere Conversion Rate, wenn auf dem Bestell-Button cooles Englisch steht? Du möchtest zur Adresse auch das Geburtsdatum abfragen oder es am Checkout noch ein letztes Mal mit einem Upselling-Angebot versuchen? Alles kein Problem. Schwieriger allerdings wird es, wenn die Wünsche der Shopbetreibenden über die einfachen Basics hinausgehen.“

 

Lesetipp: So verbesserst du ohne großen Aufwand die Konversionsrate deines Shops

 

Denn alles, was komplexer ist, als die Position einiger Frames zu ändern oder Standardelemente hinzuzufügen, wird vom Editor nicht berücksichtigt. Wer mehr möchte, benötigt doch wieder Programmierkenntnisse oder muss sein Glück im Shopify App Store suchen. Lukas dazu:

„Alles, was an zusätzlichem Code früher im checkout.liquid gelandet ist, wird zukünftig über eine App an den Checkout angebunden. Das ist natürlich prima, wenn es bereits eine App mit der gewünschten Funktionalität gibt. Denn ein Zusatzprogramm zu abonnieren ist einfacher und oft auch günstiger, als sich alles von der Pike auf programmieren zu lassen. Allerdings gibt es tatsächlich noch nicht für alles eine App, da die UI Extensions noch so neu sind.“

Um dir an zwei Beispielen einen tieferen Eindruck zu vermitteln:

Die Auswahl einer Packstation für Kund:innen in Deutschland wird nativ nicht von Shopify unterstützt. Hier müssen Kund:innen den Namen der Station mühsam von Hand eingeben. Aber „jemand“ (wink, wink) war schnell und hat eine App programmiert, die die praktische Auswahl einer Packstation in der Nähe per Dropdown als UI Extension ergänzt.

Eine andere oft nachgefragte Option existiert dagegen bislang nicht: die Anzeige des Streichpreises am Checkout – also etwa „Statt 49,99 €, jetzt nur 19,99 €“. Händler:innen, die diesen Marketingtrick bislang via Code im checkout.liquid implementiert haben, schauen vorerst in die Röhre.

Mit UI Extensions wird für User:innen also vieles einfacher, für zahlreiche Wünsche führt aber auch zukünftig kein Weg an der IT vorbei.

 

Modul #2: Branding API

Die Branding API arbeitet Hand in Hand mit UI Extensions und erlaubt es vor allem, Look and Feel des Checkouts an das eigene Corporate Design anzupassen. Dazu gehören natürlich Farben und Schriftarten, aber auch kleinere Designelemente wie abgerundete Ecken an Formularfeldern.

Größere Überraschungen oder Fallstricke lauern hier nicht. So gut wie jedes Element lässt sich ohne viel Aufwand über den Editor anpassen. Lediglich für sehr ausgefallene Designs braucht es Programmierkenntnisse – etwa für Textboxen mit schnörkeliger Umrandung oder animierte Schriftarten.

 

Lesetipp: Schrecken Schnörkel Kund:innen ab? Finde es heraus mit A/B-Testing

 

Modul #3: Shopify Functions

Functions kümmern sich insbesondere um die Logik des Checkouts – also um alles, was sich eher hinter den Kulissen abspielt und Kund:innen erfolgreich ins Ziel führt. Ähnlich wie bei den UI Extensions hält Lukas die momentane Implementierung der Functions für ein zweischneidiges Schwert:

„Bestimmte Basics rund um Shopify Functions lassen sich mithilfe der Checkout Extensibility noch relativ leicht anpassen. Ich denke dabei zum Beispiel an die Reihenfolge oder den Namen der Zahlungsoptionen. Wenn etwa PayPal prominent ganz oben in der Liste stehen soll oder „Klarna“ zu „Kauf auf Rechnung (Klarna)“ werden soll, ist das schnell gemacht.

 

Lesetipp: Mit einfachen Marketing-Tricks besser verkaufen 

 

Einige Logiken wiederum würde ich nur mit Unterstützung durch ITler anfassen. Zum Beispiel, wenn bestimmte Bezahl- oder Versandoptionen je nach Warenart oder Bestellwert ausgeblendet werden sollen. Denn wenn dabei etwas schiefgeht, wird es womöglich teuer.

Andere Dinge, die über Shopify Scripts noch möglich waren, lassen sich im neuen System gar nicht mehr realisieren. Zumindest zum jetzigen Zeitpunkt. Komplexe Rabatte etwa. Wenn eine Händlerin Produkt X kauft, einen Preisnachlass von 20 % darauf bekommt und einen Gratisartikel obendrauf, existiert aktuell keine Möglichkeit, dies als einen Rabatt umzusetzen. Hier liefert Shopify hoffentlich bald nach.“

Summa summarum: Functions können eine einfache Möglichkeit sein, die innere Logik des Checkouts anzupassen. Allerdings werden die Hürden schnell hoch; bestimmte Wünsche lassen sich im Moment gar nicht oder nur mit Mühe realisieren. Gut gemeint ist nicht immer gut gemacht.

 

Modul #4: Post Purchase Extension

Die Post Purchase Extensions betreffen, sofern aktiviert, die Seite vor der Thank You Page. Also vor jener Seite, die von vielen Händler:innen dazu genutzt wird, einen Text wie: „Vielen Dank für deinen Einkauf. Deine Bestellung ist bald auf dem Weg zu dir“, zu nutzen.

Momentan befindet sich dieses Modul noch in der Betaphase. Zur Erinnerung: Seine endgültige Einführung erfolgt erst im August 2025. Allerdings lässt sich bereits jetzt erahnen, was für Shopbetreibende nach dem Kauf möglich wird, wie Lukas erzählt:

„Momentan arbeitet Shopify daran, Cross-Selling auch als Post Purchase zu ermöglichen. In der Praxis könnte das so aussehen: Nach Bestellabschluss wird ein letztes Mal ein Artikel angeboten, der in einem direkten Zusammenhang zu den gekauften Produkten steht. Die Docking Station zum Laptop zum Beispiel.

Kund:innen haben dann ein kurzes Zeitfenster, dieses Zubehör noch zu ihrer Bestellung hinzuzufügen. Häufig gibt es außerdem einen kleinen Rabatt. Das ist Incentive und FOMO genug, sodass viele doch noch zuschlagen.“

 

 

Zum Ease of Use der Post Purchase Extensions können wir zu diesem Zeitpunkt leider nicht viel sagen. Dafür ist die Implementierung in Shopifys Liveversion noch nicht weit genug fortgeschritten. Allerdings haben wir einen wichtigen Hinweis:

Da sich die Order Status Page (OSP) bislang auch ohne Checkout Extensibility in allen Shopify-Plänen außer Starter anpassen lässt, wird sie mit der Umstellung zum neuen System für viele Händler:innen zur Baustelle. 

Änderungen an der OSP sind ab August 2025 einfach weg, wenn Händler:innen nicht intervenieren. Arbeite dich also rechtzeitig in die Thematik ein oder hole dir professionelle Unterstützung. Noch ist ein wenig Zeit dafür.

 

Modul #5: Web Pixel Extension

Die Web Pixel Extension soll im Checkout zukünftig alle Arbeiten übernehmen, die im Zusammenhang mit Datentracking und -analyse stehen. Dabei lässt der Name des Moduls bereits erahnen, was Shopify hier plant: In einem einzigen Zählpixel wird der gesamte Javascript-Code für das Tracking gebündelt. Aus Tims Sicht kein unproblematischer Vorgang:

„Etliche Händler:innen haben ihre Tracking-Skripte bislang einfach im Code des checkout.liquid untergebracht. Dazu gehören fast immer die Snippets des Google Tag Managers, die Anbindung von Google Analytics 4 oder auch Data Layer, die Informationen zu Checkout-Events im Browser verfügbar macht.

 

Lesetipp: Erste Schritte mit dem wichtigsten aller Analysetools Google Analytics 4

 

Dieser Code muss jetzt in den Tracking-Pixel umziehen. Dabei reicht es allerdings nicht, alles zu copy-pasten, denn Shopify behandelt den Checkout aus Datenschutzgründen zukünftig als eine Sandbox.

Das bedeutet, der Checkout wird zu einer nahezu hermetisch abgeschlossenen Umgebung, aus der kaum noch etwas nach außen dringen kann. War es bislang zum Beispiel möglich, den Google Tag Manager frei über den gesamten Shop laufen zu lassen, können Daten aus dem Checkout nicht mehr ohne Weiteres mit Informationen und aus dem Rest des Stores verknüpft werden. 

Zudem ist die Sandbox für das Testen und Debuggen problematisch, da sie etwa der Pixel Helper oder auch der GTM-Vorschu-Modus dafür nicht mehr funktionieren.“

Händler:innen stehen bald also vor zwei Herausforderungen: Erstens, ihren Tracking-Code in den Pixel zu migrieren und zweitens, diesen Code so an die neuen Gegebenheiten anzupassen, dass er auch in der neuen Sandbox-Umgebung weiterhin alle gewünschten Informationen liefert.

 

Lesetipp: Ohne Conversion Tracking kein erfolgreicher Shop

 

Tim schlägt drei Lösungen vor:

Custom coden

„Die einfachste Option wäre es, den Custom-Code zu nutzen, den Shopify für die Anbindung des Tag Managers und anderer Tools zur Verfügung stellt. Wir selbst haben damit allerdings keine guten Erfahrungen gemacht. Der Code arbeitet nicht sauber und da sich die Anforderungen der externen Programme fortwährend ändern, ist er schnell veraltet.

Mit Apps tracken

Möglichkeit zwei sind professionelle Analyse-Apps, die selbst einen Tracking-Pixel anbieten. Dazu gehören zum Beispiel Elevar oder Analyzify. Für die meisten Händler:innen ist dies vermutlich der gangbarste Weg, da sich diese Lösung schnell umsetzen lässt.

Am besten fahren Shops allerdings, wenn sie sich von Profis betreuen lassen, die das Tracking in der neuen Umgebung für sie umsetzen. So können sie sich nicht nur darauf verlassen, dass der Code immer aktuell ist, sondern auch sichergehen, dass genau die Daten getrackt werden, die sie brauchen.“

Datentracking ist also auch zukünftig in vollem Umfang möglich, seine Realisierung allerdings ist deutlich aufwändiger als bislang. Ohne Hilfe von außen – sei es durch eine App oder eine Agentur – müssen zahlreiche Shopbetreibende zunächst auf wertvolle Daten verzichten.

 

Lesetipp: Google Tag Manager und Shopify – Hassliebe oder Friends with Benefits?

 

Noch eine Schwierigkeit mit Checkout Extensibility: Das Consent Management

Die Umstellung auf das neue Checkout-System könnte sich für viele Shops also sehr holprig gestalten. Für Lukas und Tim zeichnet sich allerdings noch ein weiteres Problem am Horizont ab: Das Consent Management.

Denn nach europäischem Recht müssen die Besucher:innen einer Webseite in der Lage sein, jedes genutzte Tracking-Skript einzeln abwählen zu können. Ja, das ist realitätsfremd, denn 99,99 Prozent der User:innen klicken laut unseren Experten entweder auf „Annehmen“ oder „Alles ablehnen“, aber so haben es die Damen und Herren Bürokrat:innen entschieden.

 

Lesetipp: Schneller, als der Gesetzgeber erlaubt – So tunest du deine Shopgeschwindigkeit

 

Durch die Sandbox und die Eigenheiten der dort von Shopify genutzten Consent-API ergibt sich laut Tim nun folgende Problematik:

„Damit die Web Pixel Extension zündet, muss Shopify natürlich erst das Okay der Nutzenden für alle oder auch ausgewählte Analyse- und Marketingmaßnahmen erhalten. Das geschieht wie gehabt über das Cookie-Banner.

Wird der Web Pixel von einem externen Tool zur Verfügung gestellt, zum Beispiel Usercentrics, muss dieser die Nachricht, welche Informationen gesammelt und weitergeleitet werden dürfen, natürlich zunächst erhalten. Hierfür stellt Shopify zukünftig eine eigene Schnittstelle zur Verfügung: die Customer Privacy API.

So weit, so unproblematisch; bis es in die Sandbox des Checkouts geht: Dort liegt mit großer Sicherheit ebenfalls ein Web Pixel, der hier allerdings nicht mehr ordentlich mit der API kommunizieren kann.

Haben die Nutzenden ihren Consent nun nicht für alle, sondern nur für ausgewählte Marketingmaßnahmen erteilt, weiß die Schnittstelle jetzt nicht mehr, wie sie sich verhalten soll. Durch den eingeschränkten Informationsfluss in die Sandbox und aus ihr heraus kennt sie nun nämlich nur noch die Zustände Alle Akzeptieren oder Alle Verweigern.

Das bedeutet also, entweder wird das Tracking komplett eingestellt und Shopbetreibende verlieren Informationen, für die eigentlich eine Zustimmung vorliegt. Oder es werden Informationen getrackt, für die es gar keinen Consent gibt und das wäre illegal.“

Ein gewisses Gefahrenpotenzial ist hier also gegeben. Webseiten wurden schon wegen ganz anderer Dinge abgemahnt. Wir behalten die Entwicklung auf jeden Fall im Blick und informieren dich, sobald Shopify hier nachbessert.

 

Lesetipp: An dieser Metrik solltest du unbedingt arbeiten – Average Order Value

 

Warenkorb-Migration zu Checkout Extensibility: Praktikabilität und Kosten

Wenn du deinen Checkout zukünftig anpassen möchtest oder bereits vorgenommene Anpassung nicht verlieren willst, führt an der Checkout Extensibility kein Weg vorbei. Dabei ist klargeworden, dass sich basale Veränderungen zwar durchaus codefrei vornehmen lassen, komplexe Use Cases allerdings noch einmal deutlich komplexer geworden sind.

Die einfachste Möglichkeit, mit dieser Problematik umzugehen, sind natürlich Apps aus dem Shopify App Store. Pain identifizieren, das passende Programm suchen, installieren, fertig. Allerdings ist dabei Vorsicht geboten, denn Apps werden schnell zur Kostenfalle. 

Die Gebühr für eine App richtet sich häufig nach dem Umsatz eines Shops. Umsatzstarke Shops wiederum sind so erfolgreich, weil sie durch Datenanalyse und Kundenservice gezielt ihre Conversion Rate verbessern – setzen also auf zahlreiche Tools, beziehungsweise Anpassungen. Erkennst du den Teufelskreis? Besonders schmerzhaft wird es, wenn die Appentwickler:innen sich direkt am Umsatz beteiligen lassen.

Kostengünstiger – und oft auch deutlich effizienter – ist daher die Kooperation mit einer Agentur, die sich auf Shopify spezialisiert hat und gleichzeitig in der Lage ist, ihre eigenen Apps zu entwickeln. Denn befinden sich diese Apps erst einmal im Portfolio besagter Agentur, kann sie diese Werkzeuge all ihrer Kundschaft anbieten. In der Regel zu einem deutlich günstigeren Bundle-Preis, als es einzeln der Fall ist und immer mit dem guten Gefühl, als Shopinhaber:in einen persönlichen Ansprechpartner zu haben.

Wer solch einen Partner bereits an seiner Seite hat, darf sich also entspannt zurücklehnen. Alle anderen sollten besser schnell zum Telefon greifen, denn nach wie vor: Die Umstellung zur Checkout Extensibility ist Pflicht und da draußen gibt es vermutlich tausende Shops, die gerade Schützenhilfe beim Umzug benötigen. Der frühe Vogel fängt den ITler.

 

Lesetipp: Google Tag Manager und Shopify – Alles, was du wissen solltest

 

Shopify Warenkorb anpassen: Checkout Extensibility in der Quintessenz

Anpassungen am Checkout in Shopify waren noch nie unproblematisch. Mit der Checkout Extensibility werden Feld-und-Wiesen-Veränderungen in Zukunft zwar einfacher, tiefgehende Veränderungen im Kassenbereich allerdings deutlich komplizierter. Auch das Data Tracking wird auf absehbare Zeit zum Problemfall und kann nicht einfach eins zu eins übernommen werden.

Viele dieser Klippen lassen sich zwar mithilfe von Apps umschiffen, allerdings können die schnell kostspielig werden. Der beste Weg, auch in Zukunft erfolgreich zu sein, führt für die meisten Shopify Plus Stores daher über eine Agentur. Spätestens nächstes Jahr, wenn auch Shops aus den kleineren Plänen betroffen sind, wird sich die Problematik noch einmal zuspitzen. Schnell sein beim Hilfeholen lohnt sich also.

Deshalb wie immer an dieser Stelle und heute besonders eindringlich der Hinweis: Wenn du deinen Shop in der Spur halten möchtest und der Übergang zur Checkout Extensibility nicht zum Sargnagel werden soll, kontaktiere uns. Wir helfen dir sehr gerne weiter.

 

Cover Bild und weitere Bilder: Unsplash