Wichtige Erkenntnisse

checkout.liquid ist 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-Shop → Themes → Aktionen → Code bearbeiten
Suchen Sie nach dem Ordner layout/
Suchen Sie nach checkout.liquid — diese Datei ist nur in Plus-Plänen sichtbar

Falls Sie sie nicht sehen, nutzt Ihr Shop kein Shopify Plus.

Passend dazu: Checkout-Feldbezeichnungen in Shopify ändern.

Erstellen Sie immer eine Kopie Ihres Themes, bevor Sie checkout.liquid bearbeiten. Ein Fehler in der checkout.liquid kann Ihren gesamten Checkout-Flow stören und alle Käufe verhindern.

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 des Headers Ihres Themes (nur Logo) und einen generischen Footer. In der checkout.liquid können Sie Branding-Elemente, benutzerdefinierte Navigationslinks und Footer-Inhalte hinzufügen, die zu Ihrer Marke passen.

Passend dazu: Trust Badges zum Shopify Checkout hinzufügen.

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.

Erstellen Sie individuelle Shopify Checkout- und Storefront-Erlebnisse mit Fudge.

Try Fudge for Free

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 „Danke-Seite“) ist in allen Shopify-Plänen zugänglich über:

Einstellungen → Checkout → Bestellstatusseite → Zusätzliche Skripte

Dieses Feld akzeptiert HTML und JavaScript und wird nach einem erfolgreichen Kauf ausgeführt. Typische Anwendungen:

Conversion-Tracking-Pixel (für Plattformen, die keine Customer Events nutzen)
Einbettung von Post-Purchase-Umfragen
Aufforderungen für Empfehlungsprogramme
Benutzerdefinierte Dankesnachrichten

Mit der Checkout Extensibility hat Shopify die Danke-Seite als reguläres Erweiterungsziel mit einem visuellen Editor unter Einstellungen → Checkout → Anpassen neu aufgebaut.