Shopify Checkout-Erweiterbarkeit: Vollständiger Leitfaden für 2026

Shopify verarbeitet über seinen Checkout einen jährlichen GMV von über 235 Milliarden US-Dollar. Mit der Abschaffung von checkout.liquid und der vollständigen Einführung von Checkout Extensibility muss jeder Shopify-Händler verstehen, wie das neue System funktioniert, was es ermöglicht und wie eine Migration ohne Verlust von Conversions durchgeführt werden kann.

Dieser Leitfaden behandelt alle wichtigen Komponenten der Shopify Checkout-Erweiterbarkeit: UI-Erweiterungen, Shopify-Funktionen, die Branding-API, Checkout-Blöcke, Zahlungs- und Versandanpassungen und die Strategien, die den Checkout in einen Wettbewerbsvorteil verwandeln.

Wichtige Erkenntnisse

• Checkout Extensibility ersetzt checkout.liquid durch eine sichere, upgradesichere Architektur, die auf UI-Erweiterungen und Shopify-Funktionen basiert – Checkout-UI-Erweiterungen werden in einer Sandbox-Umgebung mit reaktionsbasierten Komponenten ausgeführt, die über Checkout-Ziele gerendert werden
• Mit den Shopify-Funktionen können Sie die Rabattlogik, die Filterung von Zahlungsmethoden und die Bearbeitung der Versandkosten serverseitig ohne externe API-Aufrufe anpassen – Die Checkout Branding API bietet eine detaillierte Kontrolle über Farben, Typografie, Abstände und Layout, ohne den Erweiterungscode zu berühren
• Die Migration von checkout.liquid ist für Shopify Plus-Händler obligatorisch und sollte systematisch geplant werden, um Conversion-Einbrüche zu vermeiden – Benutzerdefinierte Checkout-Abläufe können die Konversionsraten um 8–15 % steigern, wenn sie mit geeigneten UX-Tests implementiert werden

Was ist Checkout-Erweiterbarkeit?

Checkout Extensibility ist das Shopify-Framework zum Anpassen des Checkout-Erlebnisses. Es ersetzt den alten checkout.liquid-Ansatz durch ein System, das auf drei Säulen basiert:

1. Checkout-UI-Erweiterungen --- Reaktionsbasierte Komponenten, die an bestimmten Stellen innerhalb des Checkout-Ablaufs gerendert werden
2. Shopify-Funktionen --- Serverseitige Logik, die innerhalb der Shopify-Infrastruktur ausgeführt wird, um Geschäftsregeln anzupassen
3. Checkout Branding API --- Eine GraphQL-API zur Steuerung des visuellen Erscheinungsbilds des Checkouts

Im Gegensatz zu checkout.liquid, das Händlern die volle Kontrolle über HTML/CSS/JS gab, aber Upgrade- und Sicherheitsrisiken mit sich brachte, bietet Checkout Extensibility die Anpassung innerhalb einer kontrollierten Umgebung, die Shopify weiter optimieren kann.

Checkout-UI-Erweiterungen

Wie sie funktionieren

Checkout-UI-Erweiterungen werden mithilfe des Shopify-UI-Erweiterungsframeworks erstellt. Sie werden innerhalb vordefinierter Erweiterungsziele (auch Erweiterungspunkte genannt) innerhalb des Checkout-Ablaufs gerendert. Jedes Ziel entspricht einem bestimmten Ort: vor der Auswahl der Versandart, nach der Bestellübersicht, im Zahlungsbereich usw.

Erweiterungen nutzen einen begrenzten Satz von UI-Komponenten, die von Shopify bereitgestellt werden:

| Komponente | Zweck | Häufige Anwendungsfälle | |-----------|---------|-----------------| | Banner | Benachrichtigungen oder Werbeaktionen anzeigen | Kostenlose Versandschwellen, zeitlich begrenzte Angebote | | BlockStack / InlineStack | Layout-Container | Benutzerdefinierte Felder und Inhalte organisieren | | TextField | Sammlung von Texteingaben | Geschenknachrichten, individuelle Anweisungen | | Kontrollkästchen | Boolesche Auswahlen | Newsletter-Anmeldung, Annahme der Nutzungsbedingungen | | Wählen Sie | Dropdown-Auswahl | Lieferterminpräferenzen | | Überschrift / Text | Typografie | Abschnittsüberschriften, Hilfstext | | Bild | Visueller Inhalt | Vertrauensabzeichen, Markenelemente | | Teiler | Visuelle Trennung | Abschnittsumbrüche |

Erweiterungsziele im Checkout-Ablauf

Der Checkout-Ablauf bietet Dutzende von Erweiterungszielen, gruppiert nach Abschnitten:

Vor und nach dem gesamten Checkout --- Purchase.checkout.header.render-after und Purchase.checkout.footer.render-after ermöglichen es Ihnen, Inhalte rund um den gesamten Checkout hinzuzufügen.

**Abschnitt „Lieferadresse“ --- Rendern Sie Inhalte vor oder nach dem Formular „Lieferadresse“ mit den Zielen „purchase.checkout.shipping-address.render-before“ und „render-after“.

**Abschnitt „Versandart“ --- Fügen Sie Banner, Informationen oder eine benutzerdefinierte Benutzeroberfläche vor oder nach der Liste der Versandoptionen hinzu.

**Abschnitt „Zahlungsmethode“ --- Fügen Sie Vertrauensabzeichen, Zahlungsinformationen oder benutzerdefinierte Felder rund um die Zahlungsmethodenauswahl ein.

Bestellzusammenfassung --- Fügen Sie Upsells, Cross-Sells oder Informationsinhalte neben den Warenkorbpositionen und der Bestellsumme hinzu.

Erstellen einer Checkout-UI-Erweiterung

Ein typisches Checkout-UI-Erweiterungsprojekt wird mithilfe der Shopify-CLI mit dem Erweiterungstyp checkout_ui erstellt. Der Erweiterungseinstiegspunkt verwendet die Funktion „reactExtension“, um eine Komponente an einem bestimmten Zielort im Checkout-Ablauf zu registrieren.

Beispielsweise würde eine Banner-Erweiterung für kostenlosen Versand den Hook „useCartLines“ verwenden, um die Zwischensumme des Warenkorbs zu berechnen, sie mit Ihrem Schwellenwert für kostenlosen Versand zu vergleichen und eine Banner-Komponente zu rendern, die entweder eine Erfolgsmeldung anzeigt oder wie viel mehr der Kunde hinzufügen muss. Diese einzelne Erweiterung erhöht in der Regel den durchschnittlichen Bestellwert um 5–12 %.

Erweiterungs-API-Hooks

Shopify bietet zahlreiche Hooks für den Zugriff auf den Checkout-Status:

• useCartLines() --- Zugriff auf alle Artikel im Warenkorb mit Preisen, Mengen und Produktmetadaten
• useBuyerJourney() --- Checkout-Fortschritt abfangen und validieren, ungültige Übermittlungen blockieren
• useShippingAddress() --- Lesen Sie die Lieferadresse für die bedingte Logik
• useApplyDiscountCodeChange() --- Rabattcodes programmgesteuert basierend auf Bedingungen anwenden
• useApplyMetafieldChange() --- Speichern Sie benutzerdefinierte Daten zur Bestellung für Fulfillment-Workflows
• useExtensionApi() --- Greifen Sie auf die vollständige Erweiterungs-API zu, einschließlich Lokalisierungs- und Sitzungstokens

Praktische Erweiterungsbeispiele

Sammlung von Geschenknachrichten: Platzieren Sie eine TextField-Komponente im Ziel „shipping-address.render-after“. Verwenden Sie useApplyMetafieldChange, um die Nachricht als Auftragsmetafeld zu speichern. Das Fulfillment-Team liest das Metafeld beim Verpacken.

Lieferdatumsauswahl: Verwenden Sie eine Auswahlkomponente mit verfügbaren Daten, die aus den SLA-Daten Ihres Versanddienstleisters berechnet werden. Speichern Sie das ausgewählte Datum als Metafeld und verwenden Sie es für die Erfüllungsplanung.

Loyalty points display: Show returning customers their available loyalty points and let them apply points as a discount using useApplyDiscountCodeChange.

Shopify-Funktionen

Welche Shopify-Funktionen ersetzen

Vor Shopify Functions erforderte die benutzerdefinierte Geschäftslogik externe API-Aufrufe, die zu Latenz und Fehlerpunkten beim Bezahlvorgang führten. Funktionen werden direkt in der Shopify-Infrastruktur ausgeführt und in weniger als 5 Millisekunden ohne Netzwerk-Overhead ausgeführt.

Funktionstypen

| Funktionstyp | Was es anpasst | Beispiel | |---------------|-------------------|---------| | Produktrabatt | Automatische Rabatte auf Produkte | Kaufen Sie 2 und erhalten Sie 1 gratis mit komplexer Stufenlogik | | Bestellrabatt | Rabatte auf die gesamte Bestellung | Ausgaben über dem Schwellenwert, 15 % sparen mit Ausschlüssen | | Versandrabatt | Rabatte auf Versandkosten | Kostenloser Versand für Treuemitglieder | | Zahlungsanpassung | Sichtbarkeit und Bestellung der Zahlungsmethode | Nachnahme für Bestellungen mit hohem Bestellwert ausblenden | | Lieferanpassung | Namen und Sortierung der Versandarten | Spediteure umbenennen, nach Priorität neu ordnen | | Warenkorbtransformation | Warenkorbinhalt ändern | Produkte automatisch bündeln, Kits erweitern | | Erfüllungseinschränkungen | Erfüllungsmöglichkeiten einschränken | Für hochwertige Artikel ist eine Unterschrift erforderlich |

Wie Funktionen funktionieren

Funktionen werden in Rust (kompiliert zu WebAssembly) oder JavaScript geschrieben. Jede Funktion empfängt ein Eingabeobjekt mit relevanten Checkout-Daten und gibt ein Operations-Array zurück, das die anzuwendenden Änderungen beschreibt.

Zur Zahlungsanpassung empfängt die Funktion alle verfügbaren Zahlungsmethoden und Warenkorbdaten und gibt dann basierend auf Ihren Geschäftsregeln Ausblend- oder Neuordnungsvorgänge für bestimmte Methoden zurück. Zur Anpassung der Lieferung können Funktionen Versandoptionen umbenennen, sie nach Priorität neu anordnen oder sie basierend auf dem Warenkorbinhalt oder der Lieferadresse ausblenden.

Funktionseinschränkungen

• Ausführungszeit: maximal 5 ms
• Speicher: maximal 10 MB
• Eingabegröße: Begrenzt durch die Funktionseingabeabfrage
• Keine Netzwerkaufrufe: Funktionen können keine HTTP-Anfragen stellen
• Kein persistenter Zustand: Jeder Aufruf ist zustandslos

These constraints are intentional. Sie stellen sicher, dass die Kassenleistung auch bei Dutzenden aktiver Funktionen konstant bleibt.

Checkout-Branding-API

Die Checkout Branding API ermöglicht eine visuelle Anpassung, ohne dass Erweiterungen erstellt werden müssen. Es steuert:

Farben --- Primäre und sekundäre Markenfarben, Hintergrundfarben, Text- und Linkfarben sowie Statusfarben für Fehler, Erfolg und Warnungen.

Typografie --- Schriftfamilie aus der Shopify-Schriftbibliothek oder benutzerdefinierte Schriftarten, Schriftgrößen für Überschriften, Textkörper und Beschriftungen sowie Schriftstärken und Zeilenhöhen.

Layout und Abstand --- Eckradius für Schaltflächen, Eingaben und Container, Abstand zwischen Abschnitten und Rahmenstile.

Logo und Favicon --- Checkout-Header-Logo mit Positions- und Größensteuerung.

Der Zugriff auf die Branding-API erfolgt über die checkoutBrandingUpsert GraphQL-Mutation. Sie übergeben ein Profil- und Branding-Eingabeobjekt, das Ihr Designsystem angibt: Farbschemata, Typografieeinstellungen und Eckenradiuswerte. Dadurch wird das visuelle Branding von der funktionalen Anpassung getrennt, sodass Sie Ihr Checkout-Erscheinungsbild aktualisieren können, ohne den Erweiterungscode zu ändern.

Migration von checkout.liquid

Warum Migration obligatorisch ist

Shopify hat feste Zeitpläne für die Abschaffung von checkout.liquid festgelegt. Alle Shopify Plus-Händler müssen auf Checkout Extensibility migrieren.

1. Sicherheit: checkout.liquid ermöglicht die beliebige Ausführung von JavaScript im Checkout, wodurch XSS- und Datenexfiltrationsrisiken entstehen
2. Leistung: Nicht optimierte checkout.liquid-Anpassungen verlangsamen das Laden von Seiten
3. Upgrade-Pfad: Shopify kann keine Checkout-Verbesserungen einführen, wenn Händler die gesamte Checkout-Vorlage überschreiben

Migrationscheckliste

| checkout.liquid-Funktion | Checkout-Erweiterbarkeitsäquivalent | |----------|--------------------| | Benutzerdefiniertes CSS-Styling | Checkout-Branding-API | | Bilder des Vertrauensabzeichens | Checkout-UI-Erweiterung mit Bildkomponente | | Geschenknachrichtenfeld | Checkout-UI-Erweiterung mit TextField | | Benutzerdefinierte Rabattlogik | Shopify-Funktion (Rabatttyp) | | Zahlungsmethode ausblenden | Shopify-Funktion (Zahlungsanpassung) | | Umbenennung der Versandart | Shopify-Funktion (Lieferanpassung) | | Bestellnotizfeld | Checkout-UI-Erweiterung mit TextField + Metafield | | Analytics-Skripte | Webpixel (Kundenevents) | | Benutzerdefinierte Validierung | useBuyerJourney-Hook mit Validierungslogik |

Schritt-für-Schritt-Migrationsprozess

1. Überprüfen Sie Ihre aktuelle checkout.liquid --- Dokumentieren Sie jede Anpassung, jedes Skript und jede visuelle Änderung
2. Jede Anpassung kategorisieren --- Zuordnung zu UI-Erweiterungen, Funktionen, Branding-API oder Webpixeln
3. In der Entwicklung erstellen und testen --- Verwenden Sie die Shopify-CLI, um Erweiterungen lokal in einem Entwicklungsshop zu testen
4. Inkrementelle Bereitstellung --- Aktivieren Sie die Checkout-Erweiterbarkeit zuerst in einem Testshop und führen Sie sie dann in der Produktion aus
5. Überwachen Sie die Konversionsraten --- Vergleichen Sie die Checkout-Abschlussraten vor und nach der Migration mindestens zwei Wochen lang
6. Iterieren --- Verwenden Sie A/B-Tests, um die Platzierung und Nachrichtenübermittlung von Erweiterungen zu optimieren

Zahlungs- und Versandanpassung

Strategien zur Zahlungsanpassung

• Regionale Zahlungsmethoden: Lokale Zahlungsmethoden (iDEAL in den Niederlanden, PIX in Brasilien) basierend auf der Lieferadresse anzeigen
• Grenzwerte für den Bestellwert: „Jetzt kaufen, später bezahlen“ für Bestellungen mit geringem oder sehr hohem Bestellwert ausblenden
• Kunden-Tag-Filterung: Großhandelszahlungsbedingungen nur für getaggte B2B-Kunden anzeigen
• Produktbasierte Einschränkungen: Deaktivieren Sie bestimmte Zahlungsmethoden für digitale Produkte oder Abonnements

Versandanpassungsstrategien

• Umbenennung des Spediteurs: Ersetzen Sie die Namen technischer Spediteure durch Markennamen wie „Schnelle Lieferung (3–5 Werktage)“.
• Sortierung der Preise: Schieben Sie die bevorzugten Versandmethoden an den Anfang der Liste
• Bedingte Verfügbarkeit: Expressversand für übergroße Artikel oder ländliche Adressen ausblenden
• Schätzung des Liefertermins: Verwenden Sie Funktionen zur Versandanpassung, um neben jeder Versandoption voraussichtliche Liefertermine anzuzeigen

Tipps zur Conversion-Optimierung

Reduzieren Sie die Reibung beim Bezahlvorgang

• Verwenden Sie die automatische Adressvervollständigung (integriert in den Shopify-Checkout) und stellen Sie sicher, dass sie für alle Zielmärkte funktioniert
• Aktivieren Sie Shop Pay für wiederkehrende Kunden – dadurch wird die Checkout-Zeit um das Vierfache verkürzt
• Minimieren Sie die Anzahl der benutzerdefinierten Felder; Jedes zusätzliche Feld reduziert die Abschlussquote um 3-5 %

Bauen Sie Vertrauen an der Kasse auf

• Platzieren Sie Sicherheitsausweise und Vertrauenssignale im Fußbereich der Kasse
• Zeigen Sie klare Zusammenfassungen der Rückgabebedingungen in der Nähe des Zahlungsbereichs an
• Zeigen Sie die Anzahl der Kundenbewertungen oder Zufriedenheitsbewertungen an

Nutzen Sie Erweiterungen nach dem Kauf

• Verwenden Sie das Renderziel der Dankesseite für Upsell-Angebote
• Auf der Bestellbestätigungsseite werden Eingabeaufforderungen zur Abonnementanmeldung angezeigt
• Sammeln Sie NPS-Feedback direkt nach dem Kauf

Häufig gestellte Fragen

Ist die Checkout-Erweiterbarkeit für alle Shopify-Pläne verfügbar?

Erweiterungen der Checkout-Benutzeroberfläche und Shopify-Funktionen sind in allen Shopify-Plänen verfügbar. Einige erweiterte Funktionen wie die vollständige Anpassung des Checkout-Brandings sind jedoch auf Shopify Plus beschränkt. Grundlegendes Branding (Farben und Schriftarten) ist für alle Pläne über den Theme-Editor verfügbar.

Funktionieren meine checkout.liquid-Anpassungen nicht mehr?

Ja. Shopify hat Zeitpläne für die Abschaffung von checkout.liquid festgelegt. Shopify Plus-Händler, die nicht migriert sind, werden automatisch auf das Standard-Checkout-Erlebnis umgestellt. Planen Sie jetzt Ihre Migration, um die Kontrolle über Ihren Checkout zu behalten.

Kann ich in der Checkout-Erweiterbarkeit JavaScript von Drittanbietern verwenden?

Nein. Checkout-UI-Erweiterungen werden in einer Sandbox-Umgebung ausgeführt und können keine externen Skripts laden. Dies ist eine Sicherheitsmaßnahme. Wenn Sie die Integration externer Dienste benötigen, verwenden Sie Shopify Functions für serverseitige Logik oder Web Pixels für die Analyseverfolgung.

Wie wirken sich Shopify-Funktionen auf die Checkout-Geschwindigkeit aus?

Shopify-Funktionen werden in weniger als 5 Millisekunden innerhalb der Shopify-Infrastruktur ausgeführt. They are significantly faster than the external API calls they replace. Die meisten Händler stellen nach der Migration von Skripten zu Funktionen eine Verbesserung der Checkout-Leistung fest.

Kann ich nach der Migration zu checkout.liquid zurückkehren?

Während des Migrationszeitraums können Sie in Ihren Shop-Einstellungen zwischen checkout.liquid und Checkout Extensibility wechseln. Sobald Shopify jedoch checkout.liquid für Ihren Shop vollständig ablehnt, ist ein Rollback nicht mehr möglich.

Verwandeln Sie Ihren Shopify-Checkout

Die Checkout-Erweiterbarkeit stellt die Zukunft des Shopify-Commerce dar. Unabhängig davon, ob Sie von checkout.liquid migrieren, benutzerdefinierte Checkout-Abläufe erstellen oder Ihre Konversionsraten optimieren müssen, bietet das neue Framework die Tools, um ein Checkout-Erlebnis zu schaffen, das Ihren Marken- und Geschäftsanforderungen entspricht.

ECOSIRE ist auf [Shopify-Shop-Einrichtung] (/services/shopify/store-setup), [benutzerdefinierte Theme-Entwicklung] (/services/shopify/custom-theme-development) und [Conversion-Optimierung] (/services/shopify/conversion-optimization) spezialisiert. Weitere Informationen zur erweiterten Anpassung des Checkouts bei Shopify Plus finden Sie in unseren Shopify Plus-Diensten.

Sind Sie bereit, Ihr Checkout-Erlebnis zu verbessern? Kontaktieren Sie unsere Shopify-Spezialisten, um Ihr Projekt zur Checkout-Erweiterbarkeit zu besprechen.