Wichtige Erkenntnisse
checkout.liquidist nur für Shopify Plus (und Shopify POS Pro) verfügbar. Standard-Pläne haben keinen Zugriff darauf.- Zugriff unter: Online Store → Themes → Actions → Edit code →
layout/checkout.liquid.- Shopify stellt checkout.liquid zugunsten der Checkout Extensibility ein — neue Anpassungen sollten den neuen Ansatz nutzen.
- Checkout Extensibility (Checkout UI Extensions + Shopify Functions) ist der unterstützte langfristige Weg für alle Plus-Checkout-Anpassungen.
Der Checkout ist die Seite in Ihrem Shop, auf der am meisten auf dem Spiel steht. Ein individuelles Checkout-Layout, zusätzliche Trust-Signale oder ein gut platziertes Upsell können Ihre Conversion Rate maßgeblich verbessern. Auf Shopify Plus haben Sie die Tools, um dies umzusetzen – aber die Landschaft verändert sich.
Wer hat Zugriff auf checkout.liquid?
Nur Shopify Plus-Händler. Die Datei checkout.liquid erscheint nicht im Code-Editor für Basic-, Shopify- oder Advanced-Pläne. Standard-Pläne können den Checkout nur über Settings → Checkout (begrenzte visuelle Einstellungen) und das Feld “Additional scripts” auf der “Order status page” anpassen.
Hinweis für POS Pro: checkout.liquid ist auch in Shopify POS Pro zugänglich, aber dieser Guide konzentriert sich auf die Anpassung des Online-Checkouts.
Zugriff auf checkout.liquid
- Gehen Sie zu Online Store → Themes → Actions → Edit code
- Suchen Sie nach dem Ordner
layout/ - Finden Sie
checkout.liquid— diese ist nur bei Plus-Plänen sichtbar.
Wenn Sie die Datei nicht sehen, nutzt Ihr Shop kein Shopify Plus.
Duplizieren Sie immer Ihr Theme, bevor Sie checkout.liquid bearbeiten. Ein Fehler in der checkout.liquid kann den gesamten Checkout-Prozess unterbrechen und alle Käufe stoppen.
Was Sie mit checkout.liquid anpassen können
Trust-Inhalte hinzufügen
Im Checkout ist die Kauf-Unsicherheit am größten. Das Hinzufügen von Trust-Signalen in der checkout.liquid kann die Abbruchrate senken:
<!-- Zum Checkout-Header oder Sidebar-Bereich hinzufügen -->
<div class="checkout-trust-bar">
<span>🔒 Sicherer Checkout</span>
<span>Kostenlose Rücksendung für alle Bestellungen</span>
<span>Lieferung in 2-3 Werktagen</span>
</div>Shopifys Checkout-Liquid verfügt über spezifische Zonen, in die benutzerdefinierte Inhalte eingefügt werden können: content_for_header, content_for_main und andere. Prüfen Sie die Shopify checkout.liquid Dokumentation für die aktuelle Liste der unterstützten Variablen.
Benutzerdefinierter Checkout-Header und -Footer
Standardmäßig übernimmt Ihr Checkout eine vereinfachte Version Ihres Theme-Headers (nur Logo) und einen generischen Footer. In der checkout.liquid können Sie Brand-Elemente, benutzerdefinierte Navigationslinks und Footer-Inhalte hinzufügen, die zu Ihrer Marke passen.
Benutzerdefiniertes CSS hinzufügen
<!-- Im <head>-Bereich der checkout.liquid -->
<style>
.checkout-trust-bar {
display: flex;
gap: 24px;
justify-content: center;
padding: 12px;
background: #f5f5f5;
font-size: 12px;
}
</style>Warnung: checkout.liquid wird eingestellt
Shopify hat angekündigt, dass checkout.liquid im August 2024 für die Thank-you- und Order-status-Seiten eingestellt wird, und die Einstellung für andere Checkout-Seiten folgen wird. Neue Checkout-Anpassungen sollten mit Checkout Extensibility erstellt werden, nicht mehr mit checkout.liquid.
Wenn Ihr Shop checkout.liquid noch für Funktionen nutzt, wird dies bis zum spezifischen Abschaltdatum von Shopify funktionieren – aber Sie sollten die Migration planen.
Checkout Extensibility — der neue Ansatz
Checkout Extensibility ist Shopifys aktuelle Plattform für Checkout-Anpassungen. Sie besteht aus:
Checkout UI Extensions — React-basierte Komponenten, die an bestimmten Stellen im Checkout gerendert werden. Diese sind das Äquivalent zu checkout.liquid HTML, werden aber über Shopify Admin → Settings → Checkout → Customize verwaltet.
Shopify Functions — Serverseitige Logik, die während des Checkout-Prozesses ausgeführt wird (Rabattlogik, Zahlungsanpassung, Lieferanpassung).
Was Checkout Extensibility leisten kann
- Hinzufügen von benutzerdefinierten UI-Blöcken im Checkout: Informationsbanner, individueller Text, Formularfelder
- Upsell-Angebote in der Checkout-Sidebar hinzufügen
- Eigene Rabattlogik implementieren
- Anzeige der Zahlungsmethoden anpassen
- Post-purchase Upsell-Seiten hinzufügen
Zugriff auf Checkout Extensibility
Settings → Checkout → Customize — öffnet den visuellen Checkout-Editor. Hier können Sie Elemente verschieben, Abschnitte ein- und ausschalten und Erweiterungsblöcke hinzufügen.
Um eigene UI-Extensions zu entwickeln, benötigen Sie einen Entwickler und das Shopify CLI, um den Extension-Code bereitzustellen. Dies ist aufwendiger als das Bearbeiten der checkout.liquid, ist aber der unterstützte, langfristige Weg.
Was Fudge für den Checkout tut und was nicht
Fudge erstellt und modifiziert Seiten innerhalb Ihres Shopify-Themes — Produktseiten, Landingpages, Collections, benutzerdefinierte Sektionen. Die Checkout-Anpassung ist ein vom Theme getrenntes System (gesteuert durch checkout.liquid und Checkout Extensibility).
Für Conversion-Elemente vor dem Checkout — Sticky ATC-Buttons, Upsells auf Produktseiten, Warenkorb-Anpassungen, Countdown-Timer, Trust-Badges — ist Fudge das richtige Tool. Beschreiben Sie, was Sie wollen, Fudge generiert den Code als Entwurf.
Für checkout-spezifische Anpassungen bei Plus-Plänen nutzen Sie checkout.liquid (Legacy) oder Checkout Extensibility (neuer Ansatz).
Thank you page / Order status page
Die Bestellbestätigungsseite (die “Dankesseite”) ist in allen Shopify-Plänen zugänglich über:
Settings → Checkout → Order status page → Additional scripts
Dieses Feld akzeptiert HTML und JavaScript und wird nach einem erfolgreichen Kauf ausgeführt. Häufige Anwendungen:
- Conversion-Tracking-Pixel (für Plattformen, die keine Customer Events nutzen)
- Einbindung von Post-purchase Umfragen
- Aufforderungen für Empfehlungsprogramme
- Individuelle Dankestexte
Mit der Checkout Extensibility hat Shopify die Dankesseite als eigenständiges Extension-Target mit einem visuellen Editor unter Settings → Checkout → Customize neu aufgebaut.
