Shopify Checkout Extensibility: Wie man den neuen Checkout anpasst — 2026 Entwicklerleitfaden

Im August 2024 hat Shopify einen der größten technischen Umstellungen im E-Commerce vollzogen: die checkout.liquid-Datei wurde eingestellt. Jahrelang war diese Datei der Standard-Weg, um den Checkout auf Shopify-Plus-Shops anzupassen — und plötzlich funktionierte sie nicht mehr. An ihre Stelle trat eine völlig neue Architektur: Checkout Extensibility.

Das war kein routinemäßiges Update — Shopify hat seine Checkout-Architektur grundlegend neu entworfen. Das alte System war Liquid-basiert, verließ sich auf Full-Page-Reloads und hatte Performance-Einschränkungen. Das neue System ist React-basiert, wird serverseitig gerendert, ist Edge-optimiert und vollständig in das Shopify-Ökosystem integriert.

In diesem Leitfaden behandeln wir, was Checkout Extensibility ist, aus welchen Kernkomponenten es besteht, wie Sie vom alten checkout.liquid migrieren und wie Sie es in realen Szenarien einsetzen. Ein technischer Deep-Dive für Shopify-Plus-Entwickler, Merchants und Agenturen.

Was ist Checkout Extensibility?

Checkout Extensibility ist Shopifys Entwicklungsarchitektur der nächsten Generation zur Anpassung des Checkouts. Anders als der alte checkout.liquid-Ansatz ist dieses neue System modular, performant und vollständig in Shopifys Sicherheits- und Update-Pipeline integriert.

Alt vs Neu: Die wichtigsten Unterschiede

In der checkout.liquid-Ära (vor 2023):

• Checkout-HTML wurde über die Liquid-Template-Engine umgeschrieben
• JavaScript wurde über Inline-Script-Tags hinzugefügt
• Jedes Checkout-Update von Shopify konnte Anpassungen zerstören
• Echter Performance-Hit — konnte Conversion-Rates senken
• Security-Audits waren schwierig, PCI-Compliance riskant
• Nur Shopify-Plus-Merchants konnten anpassen

In der Checkout-Extensibility-Ära (nach 2024):

• React-basierte Komponenten werden an Checkout-Extension-Points hinzugefügt
• Business-Logik (Rabatte, Versand, Validierung) wird per Code mit Shopify Functions geschrieben
• Alles ist im Extension-Framework von Shopify verpackt und kann im App Store veröffentlicht werden
• Shopify-Plattform-Updates brechen Anpassungen nicht — vorwärtskompatibel
• Performance wird von Shopify garantiert, mit Edge-optimiertem Rendering
• PCI-DSS-Level-1-Compliance liegt in Shopifys Verantwortung

Die 4 Kernkomponenten von Checkout Extensibility

Die neue Architektur besteht aus vier verschiedenen Schichten. Jede ist für einen anderen Use Case entworfen; manche erfordern Shopify Plus, andere sind auf allen Plänen verfügbar.

1. Checkout UI Extensions (React + JavaScript)

UI Extensions werden verwendet, um visuelle, interaktive Komponenten zum Checkout hinzuzufügen. Sie werden in React geschrieben, nutzen eine von Shopify bereitgestellte UI-Komponentenbibliothek (auf Polaris basierend) und werden an bestimmten Checkout-Extension-Points platziert.

Beliebte Use Cases:

• Individuelle Eingabefelder: USt-ID, Steuernummer, Bestellnotiz, individuelle Nachrichtenfelder
• Promotion-Banner: dynamische Nachrichten wie „Kostenloser Versand ab 100 €"
• Upsell / Cross-Sell: Produktempfehlungen, Last-Chance-Ergänzungen
• Geschenkverpackungs-Vorschau: individuelle Geschenknotiz, Liefertermin
• Trust-Badges: Garantie, Rückgaberichtlinie, Zertifikats-Logos
• Individuelle Lieferhinweise: Wohnungsnummer, Etage, Sonderhinweise

Extension-Points entsprechen bestimmten Stellen im Checkout: in der Nähe der Bestellübersicht, vor dem Zahlungsschritt, innerhalb der Lieferoptionen usw. Jeder Extension-Point bietet Zugriff auf seinen eigenen Kontext.

2. Shopify Functions (Rust oder JavaScript)

Shopify Functions sind serverseitige Business-Logik, die während des Checkouts läuft. Unabhängig vom React-UI-Layer laufen sie in Millisekunden im Backend und treffen kritische Entscheidungen:

• Discount Functions: komplexe Rabattregeln (gestaffelt, bedingt, Bundle-basiert)
• Cart/Checkout Validation: Mindestwarenkörbe, Produktkombinations-Beschränkungen
• Delivery Customization: Versandoptionen filtern, umordnen, umbenennen
• Payment Customization: Zahlungsmethoden abhängig von Bedingungen ein-/ausblenden
• Order Routing: bestimmen, aus welchem Lager eine Bestellung versendet wird

Sie können in Rust oder JavaScript geschrieben werden, werden zu WebAssembly kompiliert und laufen auf Shopifys Edge-Nodes. Sub-Millisekunden-Ausführung.

3. Checkout App Blocks

App Blocks sind UI-Komponenten, die Merchants per Drag-and-Drop aus dem Shopify Admin in den Checkout einfügen können. Ein Entwickler schreibt sie einmal, und Merchants platzieren sie am gewünschten Extension-Point.

Dieser Ansatz ist besonders mächtig für Drittanbieter-Apps. Zum Beispiel kann eine „Trust Badges"-App einen Merchant in die Lage versetzen, Abzeichen an beliebiger Stelle im Checkout zu platzieren.

4. Branding API

Die Branding API ermöglicht es, die visuelle Identität des Checkouts (Farben, Schriftarten, Abstände, Radius, Button-Stile) über eine JSON-Konfigurationsdatei zu definieren. Nicht per Shopify Admin, sondern per Code verwaltet, mit vollständiger Versionskontrolle.

Praktische Beispiele: Checkout-Extension-Points

Shopify stellt 30+ Extension-Points zur Verfügung. Die meistgenutzten:

• purchase.checkout.block.render: individueller Block an beliebiger Stelle
• purchase.checkout.cart-line-item.render-after: zusätzliche Infos nach jeder Warenkorbzeile
• purchase.checkout.delivery-address.render-before: über der Lieferadresse (z. B. USt-ID-Eingabe)
• purchase.checkout.shipping-option-list.render-after: nach den Versandoptionen
• purchase.checkout.payment-method-list.render-before: vor den Zahlungsmethoden
• purchase.checkout.reductions.render-after: nach dem Rabattcode-Feld
• purchase.thank-you.block.render: Danke-Seite

Beispiel: Wie fügt man ein USt-ID-Eingabefeld hinzu?

Für B2B-Kunden in der EU ist das Hinzufügen eines USt-ID-Felds zum Checkout eine gängige Anforderung. In alter checkout.liquid wurde dies per Liquid + jQuery gemacht. Im neuen System schreiben Sie eine React-UI-Extension.

Der grundlegende Workflow:

1. Erstellen Sie mit Shopify CLI eine neue Extension: shopify app generate extension
2. Wählen Sie „Checkout UI" als Extension-Typ
3. Schreiben Sie eine React-Komponente — verwenden Sie die Bibliothek @shopify/ui-extensions-react/checkout
4. Definieren Sie das Extension-Target (z. B. purchase.checkout.delivery-address.render-after)
5. Fügen Sie Text-Input, Validierung und Error-Handling hinzu
6. Speichern Sie die USt-ID per applyMetafieldChange als Order-Metafield
7. Testen Sie lokal mit einem Shopify-Development-Store
8. Deploy: shopify app deploy
9. Platzieren Sie die Extension im Checkout via Shopify Admin → Einstellungen → Checkout → Customize → Add app

Im Backend können Sie nach dem Anlegen der Bestellung die USt-ID per Webhook abfangen und an Ihren Rechnungs-Integrator senden. Die türkische Variante dieser Integration behandeln wir im Shopify E-Rechnungs-Leitfaden.

Migrationsplan vom alten Checkout.liquid

Für Shopify-Plus-Shops, die noch checkout.liquid-Anpassungen nutzen, ist die Migration Pflicht. Ein typisches Migrationsprojekt dauert 4–8 Wochen und läuft in folgenden Phasen ab:

Phase 1: Inventur bestehender Anpassungen (1 Woche)

Was enthält Ihre alte checkout.liquid? Listen Sie jedes Liquid-Snippet, jeden JavaScript-Block, jedes Drittanbieter-Script und Asset auf. Dokumentieren Sie Zweck, Wirkungsbereich und Geschäftswert jeder Anpassung.

Phase 2: Mapping auf die neue Architektur (1 Woche)

Ordnen Sie jede Anpassung ihrer Entsprechung in der neuen Architektur zu:

• UI-Änderungen → Checkout UI Extensions
• Rabattlogik → Shopify Functions (Discount)
• Versand-Filter → Shopify Functions (Delivery Customization)
• Zahlungs-Filter → Shopify Functions (Payment Customization)
• Visuelles Branding → Branding API
• Drittanbieter-Scripts → Pixel API oder App Extensions

Phase 3: Entwicklung (2–4 Wochen)

Schreiben Sie neue Extensions mit Shopify CLI. Testen Sie in einem Development-Store. Führen Sie Code Review und QA durch. Halten Sie sich an Shopifys ESLint-Regeln für jede Extension.

Phase 4: Staging-Deployment und Tests (1 Woche)

Deployen Sie auf Staging, testen Sie den Checkout End-to-End. Prüfen Sie alle Zahlungsmethoden, Versand-Szenarien und Edge Cases. Nutzen Sie Shopifys „Checkout Profile"-Feature, um den neuen Checkout A/B zu testen.

Phase 5: Produktions-Rollout (1 Woche)

Rollen Sie schrittweise aus — zuerst 10% des Traffics, dann 50%, dann 100%. Überwachen Sie die Conversion-Rate in Shopify Analytics und rollen Sie bei Anomalien zurück.

Grenzen und Dinge, auf die Sie achten sollten

Wie jedes neue System hat auch Checkout Extensibility seine Grenzen. Dinge, die Sie vor dem Start wissen sollten:

Grenzen

• Nicht alle Anpassungen lassen sich portieren: einige exotische Liquid-Anpassungen (Full-Template-Rewrites) erfordern ein Redesign
• Begrenzte Extension-Points: Es gibt 30+ Points, aber nicht jeder Bereich des Checkouts ist offen. Shopify fügt nach und nach weitere hinzu
• Shopify Plus erforderlich: Fortgeschrittene Anpassungen (individuelle Zahlungsmethoden, tiefes Branding) sind nur in Plus verfügbar
• Rate Limits: Shopify Functions haben eine Ausführungsgrenze von 11ms pro Invocation — schwere Berechnungen können nicht am Edge laufen
• Drittanbieter-Integrationen: Einige ältere Drittanbieter-Apps waren an checkout.liquid gebunden — wahrscheinlich aktualisiert, aber immer prüfen

Performance-Überlegungen

Obwohl die neue Architektur performanceorientiert ist, können schlecht geschriebene UI Extensions den Checkout immer noch verlangsamen:

• Jede Extension ist ein eigenständiges JavaScript-Bundle — viele Extensions blähen die Gesamtgröße auf
• Externe API-Aufrufe innerhalb von Extensions müssen asynchron und mit robuster Fehlerbehandlung umgesetzt sein
• Verwenden Sie Shopifys Komponentenbibliothek, vermeiden Sie nach Möglichkeit Custom CSS
• Optimieren Sie React-Re-Renders — nutzen Sie useMemo und useCallback

Checkout Extensibility Migration Checkliste

• ✅ Inventur bestehender checkout.liquid-Anpassungen abgeschlossen
• ✅ Jede Anpassung auf ihre Entsprechung in der neuen Architektur gemappt
• ✅ Shopify CLI installiert und Development-Store bereit
• ✅ UI Extensions in React + TypeScript geschrieben
• ✅ Shopify Functions (Discount, Delivery, Payment) entwickelt
• ✅ Visuelle Identität per Branding API definiert
• ✅ Alle Extensions bestehen die Shopify-ESLint-Regeln
• ✅ End-to-End-Tests im Staging (alle Zahlungsmethoden, Versand-Szenarien)
• ✅ Drittanbieter-App-Kompatibilität geprüft
• ✅ A/B-Testing per Checkout Profile eingerichtet
• ✅ Schrittweiser Produktions-Rollout geplant (10% → 50% → 100%)
• ✅ Analytics-Tracking (Conversion-Rate, Abandonment) aktiv
• ✅ Rollback-Plan bereit

Kritische Warnung für Shopify-Plus-Merchants

Wenn Sie noch checkout.liquid verwenden, wird es von Shopify nicht mehr aktiv unterstützt. Neue Features kommen nicht mehr, Sicherheitslücken werden nicht gepatcht und Shopifys neue Checkout-Features (Shop Pay, One-Page Checkout, Shopify Magic) funktionieren auf dem alten System nicht.

Neue Shopify-Plus-Shops, die nach 2024 eingerichtet werden, haben die checkout.liquid-Option gar nicht mehr. Für bestehende Merchants hat Shopify einen offiziellen Migrationszeitplan und entsprechende Dokumentation veröffentlicht. Ein Aufschub der Migration schadet nur Ihrer Checkout-Conversion-Rate.

34Devs Checkout-Migrationsdienst

Wir bei 34Devs haben seit 2024 über 20 Shopify-Plus-Checkout-Migrationen abgeschlossen. In jedem Projekt haben wir bestehende Anpassungen inventarisiert, auf die neue Architektur gemappt, UI Extensions und Shopify Functions geschrieben, im Staging gründlich getestet und die Produktion ohne Downtime ausgerollt.

Wenn Sie noch auf checkout.liquid sind und keine Migration geplant haben, ist es Zeit zu handeln. Wenden Sie sich für eine kostenlose Beratung an unsere Shopify-Plus-Agentur. Im ersten 45-minütigen Gespräch analysieren wir Ihren aktuellen Checkout, besprechen die Migrations-Machbarkeit und einen geschätzten Zeitrahmen.

Für die Shopify-Plus-B2B-Konfiguration und individuelle Workflows werfen Sie einen Blick in unseren B2B-Wholesale-Portal-Leitfaden.

Häufig gestellte Fragen

Funktioniert checkout.liquid noch?

Shopify hat checkout.liquid im August 2024 offiziell eingestellt. Bestehende Setups laufen noch eine Weile, aber es werden keine neuen Anpassungen akzeptiert und Shopifys neue Checkout-Features erscheinen im alten System nicht mehr. Die Migration sollte nicht aufgeschoben werden.

Welche Kenntnisse brauche ich, um Checkout UI Extensions zu schreiben?

Grundkenntnisse in React und TypeScript reichen aus. Shopifys Bibliothek @shopify/ui-extensions-react stellt eigene Komponenten bereit (Polaris-ähnlich). Außerdem müssen Sie Shopify CLI und den Development-Store-Workflow lernen.

Sind Shopify Functions kostenpflichtig?

Nein. Shopify Functions ist ein kostenloses Feature, erfordert in der Praxis jedoch Entwickler-Ressourcen. Jede Invocation hat eine Ausführungsgrenze von 11ms und kommt mit einer täglichen Invocation-Quote.

Werden meine alten checkout.liquid-Anpassungen brechen?

Shopify sagt, das alte System läuft noch eine Weile, aber neue Checkout-Features erscheinen dort nicht mehr und manche Updates könnten alte Anpassungen brechen. Die Migrationsplanung sollte jetzt starten.

Wie viel kostet die Migration?

Eine einfache Migration (3–5 Anpassungen) liegt im Bereich von 8.000–15.000 €. Komplexe Setups (B2B, individuelle Zahlungs-Flows, mehrsprachiger Checkout) liegen bei 20.000–40.000 €. Der tatsächliche Preis hängt von Anzahl und Komplexität der Anpassungen ab.

Funktioniert Checkout Extensibility auf allen Shopify-Plänen?

Nein. Checkout-Anpassung ist ein Shopify-Plus-Feature. Reguläre Shopify-Pläne verlassen sich auf Drittanbieter-Apps zur Checkout-Anpassung, aber auch diese Apps nutzen intern das Checkout-Extensibility-Framework.

Sind alte Checkout-Apps im Shopify App Store kompatibel?

Die meisten vor 2024 geschriebenen Apps wurden aktualisiert. Lassen Sie die von Ihnen genutzte App vom Herausgeber prüfen — Apps, die noch von checkout.liquid abhängen, sollten entfernt oder migriert worden sein.

Was soll ich für A/B-Tests verwenden?

Shopifys integriertes „Checkout Profile"-Feature erlaubt es, verschiedene Checkout-Varianten gleichzeitig an verschiedene Kundensegmente auszuspielen. Drittanbieter-Tools wie Google Optimize funktionieren nicht auf Checkout-Ebene.