Shopify Plus Checkout-Erweiterbarkeit: Benutzerdefinierte Checkout-Erlebnisse

Die Conversion-Rate beim Checkout von Shopify beträgt durchschnittlich 15 % – eine der höchsten im E-Commerce. Diese Statistik ist der Grund, warum Shopify in der Vergangenheit die Anpassung des Checkouts eingeschränkt hat: Der Checkout ist gut optimiert und benutzerdefinierte Änderungen führen tendenziell zu einer Verringerung der Konvertierung. Aber Händler haben berechtigte Gründe, Anpassungen vorzunehmen: Anzeige von Treuepunkten, Lieferpräferenzen, Geschenknachrichten, B2B-Bestellfelder und Compliance-Anforderungen, die der Standard-Checkout nicht erfüllen kann.

Die Checkout-Erweiterbarkeit ist die Antwort von Shopify Plus auf dieses Problem. Es ermöglicht eine sinnvolle Anpassung des Checkouts, während gleichzeitig die optimierte Checkout-Architektur von Shopify erhalten bleibt und automatische Updates beibehalten werden, wenn Shopify die Plattform weiterentwickelt. Der veraltete checkout.liquid-Ansatz brach jedes Mal ab, wenn Shopify den Checkout aktualisierte. Erweiterungen sind von Natur aus upgradesicher.

Wichtige Erkenntnisse

• Checkout-Erweiterbarkeit ersetzt veraltetes checkout.liquid – alle Plus-Händler müssen bis 2025 migrieren (bereits vergangen) – UI-Erweiterungen fügen React-Komponenten zu bestimmten Checkout-Slots hinzu, ohne die Kern-Checkout-Vorlage von Shopify zu überschreiben
• Checkout-Funktionen ermöglichen eine benutzerdefinierte serverseitige Logik für Rabatte, Versand und Filterung von Zahlungsmethoden – Erweiterungen werden in einer Sandbox-Umgebung ausgeführt – sie können außerhalb ihres Renderziels nicht auf DOM zugreifen
• Die Branding-API ermöglicht die vollständige visuelle Anpassung von Kassenfarben, Typografie und Eckenradius – Erweiterungen nach dem Kauf fügen Upsell-Angebote mit einem Klick nach Auftragsbestätigung hinzu (höchste Conversion-Platzierung)
• Dankesseite und Bestellstatusseite sind jetzt mit Erweiterungen vollständig anpassbar
• Leistung: Erweiterungen werden serverseitig in der Shopify-Infrastruktur gerendert – keine clientseitigen Leistungseinbußen

---

Die Architektur der Checkout-Erweiterbarkeit

Das Verständnis der technischen Architektur hilft Ihnen, bessere Entscheidungen darüber zu treffen, was und wie gebaut werden soll.

Erweiterungspunkte (Slots)

Die Checkout-Benutzeroberfläche von Shopify verfügt über vordefinierte Erweiterungspunkte – bestimmte Stellen, an denen Sie benutzerdefinierte React-Komponenten einfügen können. Stellen Sie sich diese als strukturierte Slots in einer Checkout-Vorlage vor, die genehmigte Komponenten akzeptiert:

Die Erweiterungs-Sandbox

Erweiterungen werden in einer isolierten JavaScript-Umgebung ausgeführt. Sie kommunizieren mit dem Checkout von Shopify über eine standardisierte API (das @shopify/ui-extensions-Paket) und nicht über eine direkte DOM-Manipulation. Das bedeutet:

• Erweiterungen können andere Teile der Checkout-Seite nicht lesen oder ändern – Erweiterungen können nicht auf Browser-Cookies, localStorage oder externes JavaScript zugreifen
• Netzwerkanfragen von Erweiterungen müssen über die von Shopify genehmigten Endpunkte erfolgen
• Erweiterungen können Checkout-Daten (Warenkorbinhalt, Kundeninformationen, Versandauswahl) über die API lesen

Dieses Sandboxing ist der Grund, warum Erweiterungen aktualisierungssicher sind: Shopify kann die Checkout-Vorlage aktualisieren, ohne die Erweiterungsintegrationen zu unterbrechen.

---

Einrichten Ihrer Erweiterungsentwicklungsumgebung

Voraussetzungen

• Shopify Plus-Shop mit Zugriff auf den Entwicklungsshop
• Node.js 18+ und npm/pnpm
• Shopify CLI 3.x

Ersteinrichtung

npm install -g @shopify/cli @shopify/theme
shopify app create
# Select: Add extension → Checkout UI extension

Dadurch wird ein Checkout-Erweiterungsgerüst in Ihrem Shopify-App-Verzeichnis erstellt.

Struktur der Erweiterungsdatei

extensions/
  my-checkout-extension/
    src/
      Checkout.tsx    # Main React component
    shopify.extension.toml   # Extension configuration
    package.json

Die minimale Erweiterung (TypeScript/React)

Eine Checkout-Erweiterung, die eine benutzerdefinierte Nachricht anzeigt:

import {
  reactExtension,
  useSettings,
  Banner,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.block.render",
  () => <MyExtension />
);

function MyExtension() {
  const { message } = useSettings();
  return (
    <Banner status="info">
      {message || "Default message"}
    </Banner>
  );
}

Hinweis: Codebeispiele dienen der Veranschaulichung. Die eigentliche Shopify UI Extensions API entwickelt sich weiter – beziehen Sie sich immer auf die aktuelle Shopify-Entwicklerdokumentation.

---

Hochwertige Anwendungsfälle für Erweiterungen

1. Anzeige und Einlösung von Treuepunkten

Zeigen Sie den aktuellen Treuepunktestand eines Kunden an und ermöglichen Sie ihm, Punkte als Rabatt einzulösen:

Die Erweiterung liest die Kunden-ID aus dem Checkout-Kontext, ruft die API Ihrer Treueplattform (Smile.io, LoyaltyLion) über den fetch-Proxy von Shopify auf, zeigt den Kontostand an und wendet bei Bestätigung einen Rabattcode über die Rabatt-API von Shopify an.

Dies ersetzt einen häufigen Reibungspunkt: Kunden, die Treuepunkte einlösen möchten, aber den Checkout verlassen müssen, um ihren Code zu finden, was häufig zum Abbruch des Einkaufswagens führt.

Erwartete Conversion-Auswirkungen: 3–8 % Steigerung der Checkout-Abschlussrate für Mitglieder des Treueprogramms, die verfügbare Punkte sehen.

2. Geschenknachricht und Verpackungsoptionen

Fügen Sie zur Kasse ein Geschenknachrichtenfeld und eine Geschenkverpackungsoption hinzu. Die Erweiterung:

• Zeigt den Schalter „Dies ist ein Geschenk“ an – Wenn diese Option aktiviert ist, wird ein Textfeld für die Geschenknachricht angezeigt
• Zeigt optional einen Geschenkverpackungs-Upsell an (Festpreis als Einzelposten hinzugefügt)
• Speichert die Nachricht als Bestellattribut, auf das Sie in Ihrem Verpackungsworkflow zugreifen können

Erwartete Auswirkung: 2–5 % der Bestellungen nutzen Geschenknachrichten; Der Upsell schafft zusätzliche Einnahmen.

3. Feld „B2B-Bestellnummer“

B2B-Käufer benötigen eine Bestellnummer für ihre Beschaffungssysteme. Ohne dieses Feld ist die Reibung beim B2B-Checkout erheblich:

Die Erweiterung fügt ein Texteingabefeld „Bestellnummer“ hinzu, markiert es als erforderlich für B2B-Kunden (erkannt über Kunden-Tags) und speichert die Bestellnummer als Bestellattribut. Die Bestellnummer erscheint auf Rechnungen und in der Bestellverwaltung.

Überlegungen zur Implementierung: Erkennen Sie B2B-Kunden, indem Sie Kunden-Tags mithilfe des useCustomer-Hooks überprüfen.

4. Bevorzugter Liefertermin

Für Händler, die mehrere Liefergeschwindigkeitsoptionen anbieten, verringert die Anzeige geschätzter Liefertermine neben den Versandoptionen die Entscheidungsunsicherheit und erhöht die Auswahl an Premiumversand:

Die Erweiterung wird in purchase.checkout.shipping-option-item.render-after eingebunden, um unter jeder Versandoption eine Berechnung des Lieferdatums einzufügen. Bei der Datumsberechnung werden das aktuelle Datum + die Transporttage des Versands verwendet (von der API Ihres Spediteurs abgerufen oder nach Versandzone fest codiert).

Erwartete Auswirkung: 8–15 % höhere Auswahl an Expressversand, wenn genaue Liefertermine angezeigt werden.

5. Upselling/Cross-Selling an der Kasse

Ein Produkt-Upsell-Block vor der Schaltfläche „Bestellung abschließen“ – die letzte Möglichkeit, den AOV vor dem Kauf zu erhöhen:

Die Erweiterung liest den Warenkorbinhalt, ruft Ihre Empfehlungs-Engine-API auf und zeigt 1–2 relevante Add-on-Produkte mit einem Klick zum Warenkorb an. Über die Erweiterung hinzugefügte Artikel aktualisieren die Shopify-Checkout-Gesamtsumme in Echtzeit.

Erwartete Auswirkung: 5–12 % der Käufer fügen einen Artikel aus dem Upsell-Block an der Kasse hinzu.

---

Erweiterungen nach dem Kauf: Die höchste ROI-Chance

Verlängerungen nach dem Kauf werden auf der Bestellbestätigungsseite angezeigt, unmittelbar nachdem ein Kunde die Kaufabwicklung abgeschlossen hat. Der Kunde befindet sich in einem äußerst positiven Zustand – er hat gerade etwas gekauft, was er wollte. Dies ist die Platzierung mit der höchsten Conversion für Upsell-Angebote.

Upsell nach dem Kauf mit einem Klick

Die Post-Purchase-Erweiterung kann ein Produkt-Add-on bieten, das die bereits autorisierte Zahlungsmethode des Kunden ohne einen neuen Checkout-Ablauf belastet:

1. Der Kunde schließt die Bestellung Nr. 1234 ab
2. Erweiterung erscheint: „Schließen Sie Ihren Kauf ab – fügen Sie [Produkt] für 19 $ hinzu (ein Klick, keine erneute Eingabe der Zahlungsinformationen)“
3. Der Kunde akzeptiert oder lehnt ab
4. Bei Annahme: Erstellt eine neue Gebühr und eine neue Bestellposition
5. Der Kunde wird zur Seite mit dem endgültigen Bestellstatus weitergeleitet

Erwartete Auswirkung: 8–20 % Akzeptanzrate bei gut konfigurierten Angeboten nach dem Kauf zum richtigen Preis (Angebot von 10–30 $ für eine Hauptbestellung über 100 $).

Anpassungen der Dankesseite

Über Upsells hinaus kann die Dankeschön-Seitenerweiterung:

• Zeigen Sie die Treuepunkte an, die Sie durch diese Bestellung erhalten haben
• CTA des Empfehlungsprogramms mit vorab ausgefülltem Freigabelink anzeigen
• Bieten Sie ein Abonnement-Upgrade für einmalige Käufer von Verbrauchsgütern an
• Fordern Sie Social-Media-Folgen mit Anreiz an
• Produktpflegehinweise für Erstkäufer der Kategorie anzeigen

---

Checkout-Funktionen: Serverseitige Logikerweiterungen

Checkout-Funktionen sind leistungsfähiger als UI-Erweiterungen – sie ändern die Kernlogik der Checkout-Berechnung selbst. Sie werden serverseitig als kompilierte WebAssembly ausgeführt, was bedeutet, dass sie schnell sind und nicht durch clientseitige Manipulation umgangen werden können.

Rabattfunktionen

Implementieren Sie eine komplexe Rabattlogik, die die native Rabatt-Engine von Shopify nicht unterstützt:

Versandfunktionen

Ändern Sie, wie Shopify Versandoptionen berechnet und darstellt:

• Bestimmte Versandarten basierend auf dem Warenkorbinhalt ausblenden (kein Standardversand für übergroße Artikel)
• Bieten Sie individuelle Versandkosten von Ihrem Logistikdienstleister an
• Für entfernte Lieferadressen fallen Versandkosten an
• Bieten Sie kostenlosen Versand an, sobald der Warenkorb einen Schwellenwert erreicht (berechnet in Echtzeit).

Zahlungsanpassungsfunktionen

Steuern Sie, welche Zahlungsmethoden angezeigt werden:

• „Nachnahme“ für internationale Bestellungen ausblenden
• Bei Bestellungen über 10.000 $ wird nur die Banküberweisung angezeigt
• PayPal für bestimmte Produktkategorien ausblenden (Compliance-Gründe)
• Zeigen Sie benutzerdefinierte Beschreibungen oder Symbole für Zahlungsmethoden an

---

Branding-API: Visuelle Checkout-Anpassung

Die Checkout Branding API ermöglicht eine umfassende visuelle Anpassung, ohne die Checkout-Logik zu berühren:

Was Sie anpassen können

Konfigurieren Sie über den Shopify-Adminbereich → Einstellungen → Checkout und Kundenkonten → Checkout anpassen oder direkt über die Branding-API für die programmatische Konfiguration über mehrere Shops hinweg.

---

Migration von checkout.liquid

Wenn Ihr Shopify Plus-Shop checkout.liquid verwendet (veraltet im August 2024, erzwungene Migration abgeschlossen), müssen Sie Anpassungen als Erweiterungen neu erstellen. Häufige checkout.liquid-Anpassungen und ihre Erweiterungsäquivalente:

Einschränkungen gegenüber checkout.liquid

Erweiterungen können keine willkürliche JavaScript-Injektion oder vollständige Vorlagenmanipulation reproduzieren. Wenn Ihr checkout.liquid komplexe bedingte Logik oder stark angepasste UI-Layouts enthielt, müssen einige Funktionen möglicherweise mit Checkout Functions neu erstellt werden oder sind möglicherweise überhaupt nicht im Erweiterungsframework replizierbar.

---

Häufig gestellte Fragen

Funktionieren die Checkout-Erweiterbarkeitsfunktionen auf Mobilgeräten und Desktops?

Ja. UI-Erweiterungen werden mit den UI-Komponenten von Shopify gerendert, die von Natur aus responsiv sind. Der Checkout von Shopify kümmert sich um die Reaktionsfähigkeit des Layouts – Ihre Erweiterung wird innerhalb des vorgesehenen Slots gerendert, der sich automatisch an die Bildschirmgröße anpasst. Sie müssen keine separaten Layouts für Mobilgeräte und Desktops schreiben.

Können Erweiterungen das Bezahlerlebnis verlangsamen?

UI-Erweiterungen werden innerhalb der Shopify-Infrastruktur vom Server gerendert – sie erfordern keine clientseitige JavaScript-Ausführung für das erste Rendering. Erweiterungen, die API-Aufrufe durchführen (zum Abrufen von Treueguthaben, Empfehlungsdaten usw.), erhöhen jedoch die Netzwerklatenz. Halten Sie API-Aufrufe unter 200 ms, indem Sie Antworten zwischenspeichern und Ihre Endpunkte optimieren. Erweiterungen, die den Checkout dauerhaft verlangsamen, werden von Shopify erkannt und möglicherweise deaktiviert.

Wie teste ich Checkout-Erweiterungen, bevor ich live gehe?

Nutzen Sie den Entwicklungsshop von Shopify, um Erweiterungen zu testen, ohne dass sich dies auf Ihren Produktions-Checkout auswirkt. Die Shopify-CLI stellt einen lokalen Entwicklungsserver bereit, der eine Vorschau Ihrer Erweiterung in der echten Shopify-Checkout-Umgebung anzeigt. Erweiterungen können auch in einem „verborgenen“ Zustand in Ihrem Produktionsshop bereitgestellt werden, der nur über eine Vorschau-URL sichtbar ist – nützlich für die Überprüfung durch Stakeholder vor der öffentlichen Einführung.

Welche technischen Fähigkeiten sind zum Erstellen von Checkout-Erweiterungen erforderlich?

UI-Erweiterungen erfordern React- und TypeScript-Kenntnisse. Checkout-Funktionen erfordern Rust oder JavaScript (über eine von Shopify bereitgestellte Toolchain zu WebAssembly kompiliert). Die meisten Entwickler mit React-Erfahrung können UI-Erweiterungen erstellen, nachdem sie die Dokumentation von Shopify gelesen haben. Checkout-Funktionen sind technisch anspruchsvoller – für nicht triviale Funktionen ist ein erfahrener Entwickler mit Backend-Erfahrung geeignet.

Sind Checkout-Erweiterungen in anderen Shopify-Plänen als Plus verfügbar?

Erweiterungen nach dem Kauf und Erweiterungen der Dankesseite sind für alle Shopify-Pläne verfügbar. Checkout-UI-Erweiterungen (Anpassung während des Checkouts) sind nur für Plus verfügbar. Checkout-Funktionen sind nur Plus-Funktionen. Die Branding-API für die visuelle Anpassung des Checkouts ist nur für Plus verfügbar (die grundlegende Anpassung des Checkouts im Theme-Editor ist jedoch bei allen Plänen verfügbar).

---

Nächste Schritte

Die Checkout-Erweiterbarkeit ist die technisch komplexeste Funktion im Funktionsumfang von Shopify Plus. Der ROI ist klar: Treueeinlösungen, B2B-Felder, Upsells nach dem Kauf und Transparenz der Liefertermine haben alle dokumentierte Auswirkungen auf die Konvertierung. Die Implementierung erfordert React-Entwicklungsfähigkeiten und Vertrautheit mit den Erweiterungs-APIs von Shopify.

Das [Shopify Plus-Team] (/services/shopify/shopify-plus) von ECOSIRE erstellt und pflegt Checkout-Erweiterungen für Händler von DTC-Marken bis hin zu B2B-Händlern. Unsere Entwickler sind Shopify Plus-zertifizierte Partner mit spezifischer Erfahrung in den Bereichen Checkout-Erweiterbarkeit, Checkout-Funktionen und der Branding-API.

Kontaktieren Sie uns, um Ihre Anforderungen an die Checkout-Anpassung zu besprechen – wir bewerten Ihre Anforderungen und entwerfen eine Erweiterungsarchitektur, die die Conversions steigert, ohne die Checkout-Leistung zu beeinträchtigen.