Die Deadline rückt näher
Shopify hat Checkout 1.0 deprecated. Das bedeutet: Alle Shops, die noch den alten Checkout nutzen, müssen auf Checkout 2.0 (Checkout Extensibility) migrieren. Für Shops mit einem Standard-Checkout ist das ein überschaubares Update. Für Shops mit einem stark angepassten Checkout ist es eine vollwertige Migration.
Ich habe diese Migration für ESN und More Nutrition durchgeführt — zwei der größten Supplement-Marken in Deutschland mit einem hochgradig customized Checkout. Hier ist, was ich dabei gelernt habe.
Was sich zwischen 1.0 und 2.0 fundamental ändert
Das alte Modell: Template-Overrides
Checkout 1.0 erlaubte es (auf Shopify Plus), das Checkout-Template direkt zu bearbeiten. checkout.liquid war eine Datei wie jede andere im Theme — man konnte HTML ändern, CSS anpassen, JavaScript einbinden. Die Möglichkeiten waren quasi unbegrenzt.
Das Problem: Diese Freiheit führte zu fragilen Lösungen. Custom-Code war direkt an die DOM-Struktur des Checkouts gekoppelt. Wenn Shopify etwas am Checkout-Layout änderte, konnte Custom-Code ohne Vorwarnung brechen. Es gab keine API, keine Versionierung, keine Garantien.
Das neue Modell: Checkout Extensions
Checkout 2.0 funktioniert fundamental anders. Statt das Template direkt zu bearbeiten, entwickelt man Extensions — kleine, isolierte UI-Komponenten, die an definierten Stellen im Checkout eingebettet werden.
Das bringt Einschränkungen mit sich:
- Kein direkter DOM-Zugriff: Man arbeitet mit einer React-basierten UI-Library, nicht mit HTML/CSS
- Vordefinierte Einfügepunkte: Extensions können nur an von Shopify vorgesehenen Stellen platziert werden
- Sandbox-Umgebung: Extensions laufen isoliert und können nicht auf den globalen Scope zugreifen
- Shopify Functions: Serverseitige Logik (Discounts, Shipping, Payment) wird über Functions abgebildet, nicht über Frontend-Code
Was das für stark customized Checkouts bedeutet
Wenn Ihr Checkout nur ein angepasstes Logo und eine andere Hintergrundfarbe hat, ist die Migration trivial. Das geht über den Checkout-Editor im Admin.
Wenn Ihr Checkout hingegen Custom-Felder, angepasste Validierungen, spezielle Geschenk-Logiken und dynamische Rabattanzeigen hat — wie bei ESN — dann stehen Sie vor einer echten Herausforderung.
Jede Customization muss neu bewertet werden
Der erste Schritt ist nicht Code schreiben, sondern Inventur machen. Listen Sie jede Anpassung auf, die im alten Checkout existiert, und bewerten Sie sie:
Kann Checkout 2.0 das nativ? Viele Anpassungen, die früher Custom-Code erforderten, sind heute native Features. Custom-Branding, Order-Notes, Geschenkoptionen — vieles davon gibt es out of the box.
Brauchen wir eine Extension? Für Custom-Felder, spezielle UI-Elemente oder zusätzliche Informationsblöcke müssen Checkout-UI-Extensions entwickelt werden.
Ist eine Shopify Function nötig? Serverseitige Logik wie Custom-Discounts, Shipping-Regeln oder Payment-Einschränkungen werden jetzt über Shopify Functions abgebildet.
Ist es überhaupt noch nötig? Manche Customizations wurden irgendwann eingebaut und nie hinterfragt. Die Migration ist eine gute Gelegenheit, aufzuräumen.
Die Discount-Logik ist der härteste Teil
Bei ESN war die wöchentlich wechselnde Angebotslogik die größte Herausforderung. Im alten Checkout wurde die Rabattanzeige über direktes DOM-Manipulation gesteuert — Strikethrough-Preise, Geschenk-Hinweise, dynamische Schwellenwerte.
Im neuen System wird das über eine Kombination gelöst:
- Shopify Functions berechnen die Rabatte serverseitig. Das ist zuverlässiger als clientseitige Berechnung und kann nicht durch Browser-Extensions manipuliert werden.
- Checkout-UI-Extensions zeigen die Rabatte korrekt an — an den von Shopify vorgesehenen Stellen.
- Metafields steuern die Konfiguration, sodass das Marketing-Team Angebote ändern kann, ohne Code anfassen zu müssen.
Häufige Fehler bei der Migration
1. Zu spät anfangen
Die Migration ist aufwändiger als die meisten denken. Planen Sie für einen stark customized Checkout mindestens 4-8 Wochen ein — inklusive Testing. Ein Checkout-Bug im Live-Betrieb kostet direkt Umsatz.
2. Alles 1:1 nachbauen wollen
Der Reflex ist nachvollziehbar: "Unser alter Checkout konnte X, also muss der neue das auch können." Aber Checkout 2.0 hat andere Stärken und andere Einschränkungen. Manchmal gibt es für ein altes Feature eine bessere native Lösung. Manchmal ist ein Feature schlicht nicht mehr nötig.
3. Testing unterschätzen
Der Checkout ist der sensibelste Bereich Ihres Shops. Jeder Bug hier kostet direkt Geld. Testen Sie die Migration nicht nur funktional, sondern auch:
- Cross-Browser: Chrome, Safari, Firefox, Edge — Desktop und Mobile
- Payment-Provider: Jeder Zahlungsanbieter einzeln
- Edge Cases: Rabatte, Geschenkkarten, verschiedene Shipping-Optionen, Multi-Currency
- Performance: Der neue Checkout sollte mindestens so schnell sein wie der alte
4. Die Shopify Functions ignorieren
Viele Entwickler konzentrieren sich auf die UI-Extensions und vergessen die Functions. Aber gerade die serverseitige Logik — Discount Functions, Shipping Functions, Payment Customizations — ist oft der komplexere Teil. Planen Sie hier genug Zeit ein.
Der Vorteil, den keiner sieht
Die Migration fühlt sich an wie eine erzwungene Aufgabe. Und ja, sie ist aufwändig. Aber der neue Checkout ist objektiv besser:
Performance: Checkout Extensions laden schneller als injiziertes JavaScript im alten Template.
Stabilität: Extensions sind von Shopify-Updates isoliert. Was heute funktioniert, funktioniert auch nach dem nächsten Shopify-Update.
Sicherheit: Die Sandbox-Umgebung verhindert, dass Custom-Code versehentlich den Checkout-Prozess bricht.
Zukunftssicherheit: Neue Shopify-Features (wie Shop Pay Installments oder lokale Zahlungsmethoden) werden nur für Checkout 2.0 entwickelt.
Fazit
Die Checkout-Migration ist kein einfaches Update — sie ist ein Architekturwechsel. Wer einen stark customized Checkout hat, muss jede Anpassung neu denken, nicht nur portieren.
Aber wer die Migration als Chance begreift — aufräumen, vereinfachen, die neuen Möglichkeiten nutzen — steht am Ende mit einem besseren, schnelleren und wartbareren Checkout da.
Mein Rat: Fangen Sie jetzt an. Machen Sie die Inventur. Bewerten Sie Ihre Customizations. Und planen Sie genug Zeit fürs Testing ein. Der Checkout ist nicht der Ort für Überraschungen.
