Shopify Checkout anpassen 2026: Was geht, was nicht

Jede Woche stellt mir ein Händler dieselbe Frage: "Kann ich im Checkout noch schnell das Logo verschieben, ein Vertrauens-Badge einbauen oder die Versandlogik anpassen?" Die Antwort hängt von Ihrem Plan ab und von einem fundamentalen Architekturwechsel, den Shopify seit 2024 konsequent durchzieht. Dieses Wissen kann Ihnen einige tausend Euro an falschen Investitionen ersparen.

Mit dem Ende von checkout.liquid im August 2025 hat Shopify den letzten Ausweg für direkten Code-Zugriff auf den Checkout geschlossen. Was bleibt, ist ein klar strukturiertes System aus Checkout UI Extensions, Shopify Functions und dem Checkout-Editor. Ich erkläre Ihnen, was dieses System kann und wo seine Grenzen liegen.

Was Standard-Pläne im Checkout können

Shopify schützt den Checkout aus drei Gründen: PCI-DSS-Compliance, messbar höhere Conversion des eigenen One-Page-Checkouts (intern gemessene +7,5 % gegenüber Multi-Step) und globale Performance-Garantien. Das bedeutet für Sie:

Der Shopify One-Page-Checkout

Seit Ende 2023 ist der One-Page-Checkout der Standard. Er kombiniert Kontaktdaten, Versandauswahl und Zahlung auf einem einzigen Bildschirm. Für Ihre Extensions bedeutet das: Testen Sie immer im One-Page-Flow, weil page-spezifische Targets aus dem alten Multi-Step-Checkout an unerwarteten Stellen rendern können.

Checkout Extensibility auf Shopify Plus

Das Extension-Target-System

Statt freiem Code-Zugriff arbeiten Sie mit definierten Slots, sogenannten Extension Targets. Das wichtigste Target 2026:

purchase.checkout.block.render

Dieser Block rendert an einer vom Merchant frei wählbaren Position im Checkout-Editor. Sie als Entwickler liefern die Logik, der Händler zieht den Block per Drag-and-Drop an die gewünschte Stelle. Weitere relevante Targets:

UI Extension: Upsell-Banner mit Warenkorblogik

Das folgende Beispiel zeigt eine Extension, die nach der Versandauswahl einen kontextbezogenen Upsell einblendet. Es nutzt ausschließlich native Shopify-Komponenten, ohne externes CSS und ohne externen State:

import {
  reactExtension,
  Banner,
  BlockStack,
  Button,
  Text,
  useCartLines,
  useApplyCartLinesChange,
  useTotalAmount,
} from "@shopify/ui-extensions-react/checkout";
 
export default reactExtension(
  "purchase.checkout.shipping-option-list.render-after",
  () => <UpsellBanner />
);
 
function UpsellBanner() {
  const lines = useCartLines();
  const total = useTotalAmount();
  const applyChange = useApplyCartLinesChange();
 
  // Upsell nur zeigen, wenn noch kein Schutzpaket im Warenkorb
  const hasProtection = lines.some((l) =>
    l.merchandise.product.tags.includes("schutzpaket")
  );
 
  if (hasProtection || parseFloat(total?.amount ?? "0") < 50) return null;
 
  const handleAdd = async () => {
    await applyChange({
      type: "addCartLine",
      // Varianten-ID Ihres Schutzpakets
      merchandiseId: "gid://shopify/ProductVariant/IHRE_VARIANTEN_ID",
      quantity: 1,
    });
  };
 
  return (
    <Banner status="info" title="Versicherungsschutz hinzufügen?">
      <BlockStack>
        <Text>
          Schützen Sie Ihre Bestellung für nur €4,90: kostenloser
          Ersatz bei Transportschaden.
        </Text>
        <Button kind="secondary" onPress={handleAdd}>
          Jetzt hinzufügen
        </Button>
      </BlockStack>
    </Banner>
  );
}

Shopify Functions: Serverlose Logik im Checkout

Shopify Functions laufen in einer isolierten WebAssembly-Sandbox auf Shopifys Infrastruktur, nicht im Browser. Das bedeutet: keine Latenz durch Client-Requests, keine CSP-Probleme und keine Ausfallrisiken durch Third-Party-Scripts.

Sieben Function-APIs sind 2026 in Produktion:

Gestaffelte Versandkostenlogik mit der Delivery Customization API:

// Delivery Customization Function
// Blendet Express-Versand für Bestellungen unter €30 aus
export function run(input) {
  const cartTotal = parseFloat(input.cart.cost.totalAmount.amount);
 
  if (cartTotal < 30) {
    // Express-Option ausblenden
    const expressGroup = input.deliveryCustomization.deliveryGroups
      .flatMap((g) => g.deliveryOptions)
      .find((o) => o.title.toLowerCase().includes("express"));
 
    if (expressGroup) {
      return {
        operations: [
          {
            hide: {
              deliveryOptionHandle: expressGroup.handle,
            },
          },
        ],
      };
    }
  }
 
  return { operations: [] };
}

Zahlungsart-Filterung mit der Payment Customization API:

// Versteckt "Kauf auf Rechnung" für Neukunden ohne Bestellhistorie
export function run(input) {
  const isReturningCustomer =
    (input.cart.buyerIdentity?.customer?.numberOfOrders ?? 0) > 0;
 
  if (!isReturningCustomer) {
    const invoiceMethod = input.paymentCustomization.paymentMethods.find(
      (m) => m.name.toLowerCase().includes("rechnung")
    );
 
    if (invoiceMethod) {
      return {
        operations: [{ hide: { paymentMethodId: invoiceMethod.id } }],
      };
    }
  }
 
  return { operations: [] };
}

Checkout-Validierung: Bestellfehler verhindern

Mit der Validation API können Sie Checkout-Daten prüfen, bevor der Kunde die Bestellung abschickt. Klassische Anwendungsfälle: USt-IdNr.-Format prüfen, gesperrte Postleitzahlen ablehnen oder Mindestbestellwerte durchsetzen.

// Prüft EU-USt-IdNr. Format (vereinfacht)
export function run(input) {
  const vatField = input.localizationExtensions?.find(
    (f) => f.key === "tax_exemption_id"
  );
 
  if (!vatField?.value) return { errors: [] };
 
  // Einfache Format-Prüfung: DE + 9 Ziffern
  const vatRegex = /^[A-Z]{2}[0-9A-Z]{8,12}$/;
  if (!vatRegex.test(vatField.value.trim())) {
    return {
      errors: [
        {
          localizedMessage:
            "Bitte geben Sie eine gültige USt-IdNr. ein (z.B. DE123456789).",
          target: "$.cart",
        },
      ],
    };
  }
 
  return { errors: [] };
}

Workarounds für Standard-Pläne

Sie haben kein Plus, möchten aber mehr Kontrolle? Diese Ansätze sind zulässig und effektiv:

1. Warenkorb-Seite ausbauen

   Investieren Sie in die Cart-Seite statt in den Checkout. Upsells, Trust-Signale und Versandkosten-Transparency gehören dorthin, ohne Plus-Beschränkung. Nutzen Sie Liquid direkt im Theme.

2. Thank-You-Page per Script

   Das "Additional Scripts"-Feld auf der Bestellstatus-Seite erlaubt noch immer JavaScript: für Tracking-Pixel (Meta, Google Ads, TikTok) und nachgelagerte Conversion-Events vollkommen ausreichend. Für Nicht-Plus-Shops ist dieser Weg seit dem 26.08.2026 versperrt, den Ersatz per Custom Pixel beschreibe ich in Shopify: Was am 26. August 2026 still kaputtgegangen ist.

3. Draft Orders für B2B

   Für Geschäftskunden: Erstellen Sie programmatisch Draft Orders per API. Der Kunde erhält eine personalisierte Checkout-URL mit exakten Preisen, Rabatten und Zahlungsbedingungen, ohne Checkout-Code anzufassen.

4. Third-Party-Apps aus dem App Store

   Apps wie Rebuy, Cartly oder AfterSell setzen ihrerseits auf offizielle Checkout-Extensions und sind damit mit allen Plänen kompatibel. Der Unterschied: Sie zahlen monatlich statt einmalig.

Was auch Plus nicht kann

Das ist der Teil, den viele Händler erst nach einer langen Projektanfrage erfahren:

• Flow-Reihenfolge ändern: Kontaktdaten → Versand → Zahlung ist fest. Sie können keine eigene Schritt-Abfolge definieren.
• Zahlungsanbieter-Logos entfernen: Shopify blendet die Logos des aktiven Gateways immer ein.
• Shopify Payments ersetzen: In den meisten europäischen Märkten ist Shopify Payments das einzige nativ integrierte Gateway ohne Transaktionsgebühr.
• Checkout auf eigener Domain: Der Checkout läuft immer auf checkout.shopify.com oder einer Shopify-verwalteten Subdomain.
• Vollständig eigenem Design: Extension-Komponenten folgen Shopifys Design-System. Sie können Farben anpassen, aber kein beliebiges HTML/CSS injizieren.

Kosten und ROI

Beispiel-ROI: Eine Upsell-Extension, die bei 1.500 Bestellungen/Monat eine 6%-ige Acceptance Rate mit €8 durchschnittlichem Upsell-Wert erzielt: €720 monatlicher Mehrumsatz. Die Entwicklungskosten von €3.000 amortisieren sich in vier Monaten.

Fazit: Den richtigen Weg wählen

Für Standard-Pläne gilt: Der Shopify Checkout ist sehr gut optimiert. Ihre Energie steckt besser in Versandtransparenz auf der Produktseite, Express-Checkout-Buttons und einer starken Warenkorb-Seite.

Für Plus-Händler ist Checkout Extensibility das mächtigste Conversion-Werkzeug im Portfolio. Vor jeder Investition rate ich aber zu einer Datenanalyse: Wo bricht Ihre Conversion tatsächlich ein? Oft liegt das Problem nicht im Checkout selbst, sondern zwei Schritte früher: bei Versandkosten-Überraschungen oder fehlendem Vertrauen auf der Produktseite.

Häufige Fragen

Weiterführende Artikel

• Checkout Conversion Rate steigern: 15 datenbasierte Strategien gegen Warenkorbabbrüche, von Quick Wins bis A/B-Testing.
• B2B mit Shopify Plus einrichten: Wie Sie Zahlungsziele, Unternehmensprofile und B2B-spezifische Checkout-Logik umsetzen.
• Shopify App entwickeln: Custom Checkout Extensions selbst bauen, Schritt für Schritt vom Setup bis zum App-Store-Review.