Shopify Checkout Extensibility

Shopify Checkout Extensibility: Was Entwickler jetzt wissen müssen

Wer schon länger auf Shopify entwickelt, kennt die alte Methode zur Checkout-Anpassung: checkout.liquid öffnen, hoffen, dass beim nächsten Shopify-Update nichts bricht, und akzeptieren, dass Shop-Pay-Kompatibilität praktisch ausgeschlossen war. Diese Ära ist vorbei.

Shopify Checkout Extensibility ist das neue Fundament, und für Entwickler verändert es alles: wie Checkout-Anpassungen gebaut, ausgeliefert und gewartet werden. Hier ist, was du wissen musst.


Was ist Checkout Extensibility?

Checkout Extensibility ist Shopifys Framework für Checkout-Anpassungen über ein modulares, App-basiertes System, anstatt Template-Dateien direkt zu bearbeiten. Es ersetzt checkout.liquid vollständig und ist heute der einzige unterstützte Weg, den Shopify-Checkout anzupassen.

Es besteht aus vier zentralen Tools, die zusammenarbeiten:

  • Checkout UI Extensions: Einbinden benutzerdefinierter UI-Komponenten an definierten Extension Points im Checkout-Ablauf
  • Shopify Functions: Erweiterung oder Ersatz von Shopifys serverseitiger Business-Logik (Rabatte, Versand, Zahlung, Warenkorbvalidierung)
  • Web Pixels: Tracking von Kundenereignissen für Analytics und Werbung in einer gesandboxten, datenschutzkonformen Umgebung
  • Branding API: Programmatische Kontrolle über das visuelle Erscheinungsbild des Checkouts, über den Checkout-Editor hinaus

Warum Shopify checkout.liquid abgekündigt hat

Die Probleme mit checkout.liquid waren bekannt. Anpassungen waren eng mit dem Checkout-HTML verknüpft, was bedeutete, dass jedes Shopify-Plattform-Update ein potenzielles Breaking Change war. Es war inkompatibel mit Shop Pay. Es konnte nicht sicher getestet werden. Und es verhinderte, dass Händler von Shopifys laufenden Performance- und Sicherheitsverbesserungen profitieren konnten.

Die Migration verlief in zwei Phasen:

  • 13. August 2024: checkout.liquid für die Schritte Kontaktdaten, Versand und Zahlung deaktiviert
  • 28. August 2025: checkout.liquid, Script-Tags und Additional Scripts für die Danke- und Bestellstatusseiten deaktiviert

Wer die Danke- und Bestellstatusseiten noch nicht migriert hat: Diese Frist ist bereits abgelaufen. Bestehende Legacy-Anpassungen auf diesen Seiten werden nicht mehr gerendert.


Checkout UI Extensions: Der zentrale Baustein

UI Extensions ermöglichen es, benutzerdefinierte UI in den Checkout-Ablauf einzubinden. Sie funktionieren über ein System von Extension Targets, vordefinierten Slots, an denen die Komponente gerendert werden kann.

Zwei Arten von Targets:

  • Statische Targets: gebunden an bestimmte Checkout-Schritte wie Kontaktdaten, Versandmethodenauswahl und Bestellübersichts-Positionen
  • Block Targets: rendern an jeder Stelle im Checkout und sind immer sichtbar, unabhängig davon, welche Schritte aktiv sind (z. B. für Bestellnotizen oder globale Vertrauensabzeichen)

Wichtige technische Details:

  • Extensions werden standardmäßig mit Preact aufgesetzt, Hooks wie useState und useEffect sind direkt verfügbar
  • Die UI wird über Polaris-Webkomponenten via Remote DOM gerendert, kein beliebiges HTML. <script>-Tags oder CSS-Overrides sind nicht möglich
  • Extensions laufen in einer isolierten Sandbox, kein Zugriff auf sensible Zahlungsdaten oder das Checkout-DOM
  • Alle Komponenten übernehmen automatisch die Branding-Einstellungen des Händlers — Schriftarten, Farben, Eckenradius, für ein konsistentes Checkout-Erlebnis
  • Entwicklung mit der Shopify CLI, erforderlich für Generierung, Entwicklung und Deployment von Extensions

Was sich damit bauen lässt:

  • Upsell- und Cross-Sell-Blöcke
  • Benutzerdefinierte Felder (Geschenknachrichten, Bestellnotizen, Lieferhinweise)
  • Vertrauensabzeichen und Treuepunktanzeigen
  • Adressvalidierung und individuelle Versandmethoden-Nachrichten
  • Nachkauf-Umfrageseiten
  • Lokalisierte Inhalte für mehrsprachige und Mehrwährungs-Stores

Shopify Functions: Backend-Logik ohne Server

Functions sind WebAssembly-basierte Module, die auf Shopifys Infrastruktur laufen und es ermöglichen, Shopifys native serverseitige Logik zu ersetzen oder zu erweitern. Sie gehören zu den leistungsstärksten Teilen des Extensibility-Frameworks für Entwickler mit komplexen Anforderungen.

Was Functions heute leisten können:

  • Rabattlogik: gestaffelte Rabatte, Bundle-Preise, Kauf-X-Erhalte-Y-Regeln, Mindestbestellwert-Aktionen
  • Versandanpassungen: Versandoptionen anzeigen, ausblenden, umsortieren oder umbenennen, basierend auf Warenkorbinhalt, Kunden-Tags oder Geografie
  • Zahlungsanpassung: Zahlungsmethoden bedingt ein- oder ausblenden (z. B. Nachnahme bei digitalen Produkten ausblenden)
  • Warenkorbvalidierung: Checkout blockieren, wenn bestimmte Bedingungen nicht erfüllt sind (Mindestbestellmengen, eingeschränkte Produktkombinationen)

Functions werden in Sprachen geschrieben, die zu WebAssembly kompilieren, JavaScript/TypeScript ist dabei die gängigste Wahl für Shopify-Entwickler. Sie werden schnell ausgeführt, ohne Cold Starts und ohne eigene Infrastrukturverwaltung.


Web Pixels: Tracking ohne Script-Tags

Einer der größten Schmerzpunkte in der checkout.liquid-Ära war das Conversion-Tracking. Benutzerdefinierte Script-Tags im Additional-Scripts-Feld waren die einzige Option, fehleranfällig, schwer zu debuggen und oft in Konflikt miteinander.

Web Pixels lösen dieses Problem durch eine gesandboxte Umgebung für das Tracking von Kundenereignissen. GA4, Meta, Google Ads und andere Plattformen bieten inzwischen kompatible Pixel-Apps, die dieses Framework nutzen. Für individuelle Tracking-Anforderungen ermöglicht Shopifys Customer-Events-System den Aufbau von Pixel-Extensions, die bei Standard-E-Commerce-Events mit Zugriff auf strukturierte Checkout-Daten feuern.


Was das konkret für Entwickler bedeutet

Die Vorteile:

  • Update-sicher by Design: der Extension-Code ist vom Checkout-HTML entkoppelt. Wenn Shopify die Plattform aktualisiert, funktionieren Anpassungen weiterhin
  • Als Apps verteilbar: einmal bauen, für beliebige Händler deployen. Öffentliche Apps können im Shopify App Store gelistet werden; private Apps lassen sich auf bestimmten Stores installieren
  • Shop-Pay-kompatibel: Extensions funktionieren auf allen Checkout-Oberflächen von Shopify, einschließlich des beschleunigten Shop-Pay-Flows
  • Über 860 Extensibility-basierte Checkout-Apps existieren bereits im Ökosystem, mit umfangreicher Dokumentation und Community-Tooling

Die Einschränkungen, die man kennen sollte:

  • Kein beliebiges HTML oder CSS: die Arbeit erfolgt innerhalb von Polaris-Komponenten; Abweichungen von den Branding-Einstellungen des Händlers sind nicht möglich
  • UI Extensions für Kontaktdaten-, Versand- und Zahlungsschritte sind nur für Shopify Plus verfügbar: auf niedrigeren Plänen sind Anpassungen auf Danke- und Bestellstatusseiten beschränkt
  • Gesandboxte Umgebung: kein Zugriff auf das Checkout-DOM, keine globalen Web-APIs. Wer bisher auf DOM-Manipulation gesetzt hat, muss den Ansatz grundlegend überdenken
  • Functions erfordern WebAssembly: JavaScript kompiliert problemlos, aber die Laufzeitumgebung unterscheidet sich von dem, was die meisten Entwickler kennen; lokales Testen erfordert die Shopify CLI

Customer Account Extensions: Was 2025 neu ist

In Shopifys Summer 2025 Edition wurden die Checkout-Extensibility-APIs auf den Kundenkontobereich ausgeweitet. Entwickler können jetzt direkt im Kundenkonto-Dashboard benutzerdefinierte Bereiche, Tabs und Tools einbauen, Treuepunktanzeigen, vergangene Bestelldetails, Abonnementverwaltung, ohne ein externes Portal oder eine separate Storefront zu benötigen.

Das ist eine bedeutende Erweiterung für Agenturen, die Treueprogramme, Abo-Flows und B2B-Self-Service-Portale auf Shopify aufbauen.


Erste Schritte

Der empfohlene Einstieg für Entwickler, die neu mit Checkout Extensibility arbeiten:

  • Shopify CLI einrichten, sie ist für die gesamte Extension-Entwicklung erforderlich
  • Die Checkout UI Extensions Dokumentation auf Shopify.dev für die aktuelle API-Version lesen
  • Den Checkout-Anpassungsbericht im Shopify Admin nutzen, um zu prüfen, welche Legacy-Anpassungen noch migriert werden müssen (admin.shopify.com/store/DEIN-STORE-NAME/settings/checkout/customizations-report)
  • Mit dem ersten Extension auf der Dankeseite beginnen, geringere Komplexität, auf allen Plänen verfügbar, ideal um das Extension-Modell zu verstehen, bevor man Plus-exklusive Checkout-Schritte angeht

Fazit: Der alte Weg ist Geschichte, der neue ist besser

Checkout Extensibility ist kein Workaround und kein Kompromiss, es ist eine grundlegend bessere Architektur für Checkout-Anpassungen. Die Einschränkungen, die zunächst limitierend wirken (kein beliebiges CSS, kein DOM-Zugriff), sind genau das, was Extensions update-sicher, performant und sicher macht.

Für Entwickler ist das die Reifung des Shopify-Ökosystems. Das Tooling ist solide, die Dokumentation ist umfassend, und es wächst eine Bibliothek an Patterns und Referenz-Apps. Wer noch checkout.liquid-Code für einen Kunden pflegt, sollte jetzt mit der Planung der Migration beginnen.

Shopify expert team collaborating over a project on a laptop in a modern office

Bereit, die richtige Entscheidung für deinen Shop zu treffen?

Plattformentscheidungen, Migrationen und Architekturentscheidungen sind komplex, und die Kosten eines Fehlers summieren sich schnell. Bei shoplab arbeiten wir mit Händlern und Marken aus ganz Europa zusammen, um das Wesentliche herauszufiltern und Shopify-Stores zu bauen, die wirklich skalieren.

Ob du eine Migration evaluierst, ein Upgrade auf Shopify Plus planst oder einfach eine Expertenmeinung zu deinem aktuellen Setup möchtest, wir sind für dich da.

Kostenloses Beratungsgespräch buchen