Shopify Checkout Extensibility im Jahr 2026: Fristen, UI-Erweiterungen und Upgrade-Anleitung

Von Eoin Villarin, 05.02.2026, aktualisiert 14.11.2026

Shopify-Checkout-Erweiterbarkeit ersetzte checkout.liquid und Shopify-Scripts. Siehe jede Frist, was passiert, wenn Sie nicht upgraden, und wie Sie Checkout-UI-Erweiterungen mit Preact erstellen.

Was ist Shopify Checkout-Erweiterbarkeit und was war die Frist?

Shopify Checkout Extensibility ist die app-basierte Methode von Shopify, um das Checkout anzupassen, indem Checkout-UI-Erweiterungen, Shopify Functions, Web-Pixels und Branding-Einstellungen anstelle von checkout.liquid, zusätzlichen Skripten und Shopify Scripts verwendet werden. Plus-Shops verloren checkout.liquid am 13. August 2024 (Checkout-Schritte) und am 28. August 2025 (Dankeseite und Bestellstatusseite), Skripte liefen am 30. Juni 2026 aus, und Non-Plus-Shops mussten bis zum 26. August 2026 upgraden.

Zentrale Erkenntnisse

  • checkout.liquid funktioniert nicht mehr auf den Schritten Informationen, Versand und Zahlung am 13. August 2024 und auf Plus Dankeseite und Bestellstatusseiten am 28. August 2025.
  • Shopify-Scripts wurden am 15. April 2026 eingefroren und am 30. Juni 2026 nicht mehr ausgeführt; Rabatt-, Versand- und Zahlunglogik gehört jetzt zu Shopify-Funktionen.
  • Nicht-Plus-Geschäfte hatten bis zum 26. August 2026 Zeit, ihre Danke- und Auftragsstatusseiten zu aktualisieren, und Skript-Tags auf diesen Seiten sind jetzt nicht mehr verfügbar.
  • Checkout-UI-Erweiterungen verwenden jetzt @shopify/ui-extensions mit Preact und Polaris-Webkomponenten und ersetzen das alte @shopify/checkout-ui-extensions-react-Paket mit einer Bündelgrenze von 64 KB.
  • Erweiterungen in den Schritten Informationen, Versand und Zahlung sowie benutzerdefinierte Apps mit Funktionen erfordern Shopify Plus; Dank und Bestellstatus-Erweiterungen funktionieren auf jedem Plan.

Shopify-Checkout-Erweiterbarkeit ist die einzige unterstützte Möglichkeit, den Checkout von Shopify im Jahr 2026 anzupassen. Es hat ersetzt checkout.liquid, zusätzliche Skripte, Script‑Tags und Shopify Scripts mit vier app‑basierten Bausteinen: Checkout‑UI‑Erweiterungen, Shopify Functions, Web‑Pixel und die Branding‑Einstellungen. Alle Fristen sind nun abgelaufen. checkout.liquid funktionierte nicht mehr bei den Schritten Information, Versand und Zahlung am 13. August 2024, Plus‑Shops verloren es auf den „Thank you“‑ und Auftragsstatus‑Seiten am 28. August 2025, Shopify Scripts hörte am 30. Juni 2026 auf zu laufen, und Nicht‑Plus‑Shops erreichten ihre „Thank you“‑ und Auftragsstatus‑Frist am 26. August 2026.

Wenn Ihr Shop eines dieser Daten verpasst hat, ist der alte Code nicht "pausiert", er läuft einfach nicht mehr. Dieser Leitfaden erklärt, was Checkout-Erweiterbarkeit ist, den vollständigen Zeitplan, was ersetzt wurde, wie man Schritt für Schritt upgradet und wie man eine Checkout-UI-Erweiterung mit den aktuellen Preact- und Polaris-Webkomponenten erstellt. Ich baue und migriere Shopify-Checkouts für meinen Lebensunterhalt, daher habe ich es praktisch gehalten und nur Fakten angegeben, die ich gegen Shopify eigene Dokumente überprüfen konnte, die am Ende aufgeführt sind.

Was ist Shopify checkout extensibility?

Shopify-Checkout-Erweiterbarkeit ist die Reihe von Werkzeugen, die es Apps und Händlern ermöglicht, das Aussehen und Verhalten des Checkouts zu ändern, ohne den Checkout-Code direkt zu bearbeiten. Anstatt einer großen Liquid-Vorlage, die frei umgeschrieben werden konnte, ist der Checkout jetzt eine Shopify-eigene Seite mit definierten Orten, an denen genehmigter Code einfügen kann. Shopify beschreibt die Hauptteile auf seiner Übersicht über Checkout-Apps:

  • Checkout-UI-Erweiterungen Schnittstellelemente wie Felder, Banner, Upsells und Kontrollkästchen hinzufügen. Händler platzieren sie im Checkout-Editor.
  • Shopify-Funktionen Geschäftslogik auf Shopify-Servern ändern: Rabatte, Lieferoptionen, Zahlungsoptionen, Warenkorb- und Checkout-Validierung, Bündel, lokale Abholung und Erfüllungsbeschränkungen.
  • Web-Pixel verarbeiten Analysen und Conversion-Tracking, indem Sie sich für Standardkundenereignisse innerhalb einer Sandbox anmelden, anstatt Skripte zu injizieren.
  • Markenbildung steuert Farben, Schriftarten, Logos, Eckenradius und Layout über den Checkout-Editor und für tiefere Änderungen die GraphQL Admin API.
  • Zahlungserweiterungen ermöglicht Zahlungsanbietern, ihre Methoden in den Checkout zu integrieren.

Der Handel ist einfach. Sie geben die Freiheit auf, einen Teil der Seite neu zu schreiben, und im Gegenzug überleben Ihre Anpassungen Shopifys eigene Updates, der Checkout bleibt schnell und sicher und Funktionen wie Shop Pay, einseitiger Checkout und neue Zahlungsmethoden funktionieren weiter, ohne dass Sie etwas anfassen müssen.

Deadline und Zeitplan für die Checkout-Erweiterbarkeit

Die Entfernung von checkout.liquid erfolgte in Etappen. Die folgende Tabelle listet jedes wichtige Datum auf, wer davon betroffen war und was passiert ist. Die Daten stammen aus Shopifys Änderungsprotokoll, Hilfebereich und Entwicklerdokumenten.

DatumWas passierteWer ist betroffen
13. Februar 2023Shopify kündigte an, dass die checkout.liquid-Themendatei gelöscht wirdShopify Plus
15. Februar 2024KI-gestützte Anpassungsberichte veröffentlicht, um Plus-Stores bei der Planung ihres Upgrades zu helfenShopify Plus
13. August 2024checkout.liquid funktioniert nicht mehr auf den Schritten Informationen, Versand und ZahlungShopify Plus
28. August 2025checkout.liquid, zusätzliche Skripte und Skript-Tags werden auf den Dankeseiten und Bestellstatusseiten eingestellt; das Feld für zusätzliche Skripte wurde nur noch lesbarShopify Plus (Nur-Anzeige-Box für alle Stores)
15. April 2026Shopify-Scripts konnten nicht mehr bearbeitet oder veröffentlicht werdenPlus-Geschäfte, die Skripte verwenden
30. Juni 2026Shopify-Scripts und die Script-Editor-App eingestellt; Scripts werden nicht mehr auf irgendeinem Store ausgeführtPlus-Geschäfte, die Skripte verwenden
26. August 2026Deadline für die Aufrüstung der Dankes- und Bestellstatusseiten; Sunset für Skript-TagsNicht-Plus-Geschäfte

In Kürze ist das Upgrade auf Checkout-Erweiterbarkeit für niemanden mehr optional. Ab November 2026 gibt es keinen Plan oder keine Einstellung, die Checkout.liquid, zusätzliche Skripte oder Shopify-Skripte zurückbringt.

Was passiert, wenn ein Shop nicht aktualisiert?

Der Legacy-Code stoppt die Ausführung und der Store fällt auf die Standardseiten von Shopify zurück. In der Praxis bedeutet das:

  • Änderungen an checkout.liquid werden nicht mehr gerendert. Shopify Dokumentation zu checkout.liquid erklärt, dass es auf den Schritten Informationen, Versand und Zahlung nicht unterstützt wird und am 28. August 2025 auf den Danke- und Bestellstatus-Seiten abgeschafft wurde.
  • Zusätzliche Skripte kann nicht bearbeitet werden, da das Feld seit dem 28. August 2025 nur noch lesbar ist und Code darin nicht mehr auf aktualisierten Seiten ausgeführt wird. Typische Opfer sind Conversion-Tags, Affiliate-Tracking, Umfragen nach dem Kauf und Bewertungsanfragen.
  • Skript-Tags von Apps auf den Danke- und Bestellstatus-Seiten werden abgeschafft (Plus am 28. August 2025, Nicht-Plus am 26. August 2026).
  • Shopify-Scripts gewähren keine Rabatte mehr, verbergen keine Versandraten oder ändern die Reihenfolge von Zahlungsmethoden mehr. Shopify Übergangsseite für Skripte sagt eindeutig, dass Skripte nicht mehr auf irgendeinem Store laufen.

Shopifys Upgrade-Anleitung für Nicht-Plus bestätigt, dass ein Upgrade die bestehenden Danke- und Bestellstatusseiten und alle benutzerdefinierten Anpassungen auf ihnen ersetzt und dass Stores auf dem Pause and Build-Plan automatisch und dauerhaft upgraded werden. Für Plus-Checkout, die noch auf checkout.liquid sind, sagte Shopify, dass es sie innerhalb von 30 Tagen mit einer E-Mail-Benachrichtigung automatisch upgraden wird. Die aktuellen Hilfeseiten von Shopify veröffentlichen kein genaues Auto-Upgrade-Datum für jeden Store-Typ, daher ist die sicherste Überprüfung, zu öffnen Einstellungen, Checkout in Ihrem Admin und sehen Sie, welche Version jede Seite hat.

checkout.liquid vs. Checkout-Erweiterbarkeit

Dies ist der Vergleich, den ich mit Kunden durchgehe, wenn sie fragen, warum ihre alten Anpassungen nicht einfach kopiert werden können.

Bereichcheckout.liquid (legacy)Checkout-Erweiterbarkeit (aktuell)
Wie Sie anpassenEine Liquid-Vorlage, CSS und JavaScript direkt bearbeitenApps fügen UI-Erweiterungen, Funktionen und Pixel an definierten Stellen hinzu
Wer könnte es verwendenNur Shopify PlusAlle Pläne auf den Seiten 'Danke' und 'Bestellstatus'; Plus für die Schritte 'Informationen', 'Versand' und 'Zahlung'
Sicherheit verbessernShopify-Updates könnten benutzerdefinierten Code brechenErweiterungen sind versioniert und funktionieren weiterhin durch Checkout-Updates
Rabatt- und VersandlogikShopify-Scripts geschrieben in RubyShopify-Funktionen kompiliert zu WebAssembly (Rust oder JavaScript)
VerfolgungZusätzliche Skripte und Skript-Tags auf der SeiteApp-Pixels und benutzerdefinierte Pixel in einer Sandbox
StylingBeliebige CSSBranding des Checkout-Editors plus GraphQL-Branding-API für Plus
Leistung und SicherheitDrittanbieter-Skripte liefen auf der ZahlungsseiteErweiterungen werden in einer Web Worker-Sandbox ohne DOM-Zugriff ausgeführt
Shop Pay und One-Page-CheckoutNicht kompatibel mit benutzerdefinierten VorlagenVoll unterstützt
Status im Jahr 2026EntferntDie einzige unterstützte Option

Welche Teile des Shopify-Checkouts können Sie anpassen?

Checkout-UI-Erweiterungen rendern in zielt auf. Ein Ziel ist ein benannter Platz im Checkout, und Shopify gruppiert Ziele in drei Arten.

Architektonische Grundrisszeichnung, wie ein Checkout-Layout mit definierten Erweiterungzielen
Erweiterungen werden nur in definierten Zielen gerendert. Foto: rawpixel, CC0
  • Blockziele, beispielsweise purchase.checkout.block.render und purchase.thank-you.block.render, die Händler in jedem unterstützten Platz im Checkout‑Editor ziehen können.
  • Statische Ziele, die an einem festen Punkt rendern, zum Beispiel nach den Kontaktfeldern, nach den Warenkorb‑Positionen oder vor den Aktions‑Buttons.
  • Ausführbare Ziele, die Daten oder Logik zurückgeben, ohne etwas zu rendern.

Die Dankeseite verwendet purchase.thank-you Ziele, und die Bestellstatus-Seite lebt jetzt in Kundenkonten, mit customer-account.order-status Ziele.

Was jede Shopify-Planversion kann

FeatureNicht-Plus-PläneShopify Plus
UI-Erweiterungen auf den Seiten Danke und BestellstatusJaJa
UI-Erweiterungen auf den Schritten Informationen, Versand und ZahlungNeinJa
Öffentliche Apps, die Shopify-Funktionen enthaltenJaJa
Benutzerdefinierte Apps, die Shopify-Funktionen enthaltenNeinJa
Grundlegende Markenbildung im Checkout-EditorJaJa
Erweiterte Markenbildung über die GraphQL Admin APINeinJa (auch auf Entwicklungs-Shops)
App-Pixels und benutzerdefinierte PixelJaJa

Die Plus-Grenze für die Schritte Informationen, Versand und Zahlung stammt direkt von Referenz für Checkout-UI-Erweiterungen, und die benutzerdefinierte App‑Regel für Functions befindet sich in der Shopify-Funktionen-Dokumentation.

Shopify-Checkout-UI-Erweiterungen im Jahr 2026: React, Preact und Webkomponenten

Wenn Sie nach @shopify/checkout-ui-extensions-react, Sie betrachten die erste Generation des Toolings. Die Paketnamen wurden zweimal geändert, und viele alte Tutorials zeigen immer noch die ursprünglichen Importe.

PaketÄraStatus im November 2026
@shopify/checkout-ui-extensions-react and @shopify/checkout-ui-extensions2022 bis 2023Legacy; zuletzt veröffentlicht im August 2023 (Version 0.27.3)
@shopify/ui-extensions-reactAPI-Versionen 2023-04 bis 2025-07Veraltet; letzte Release-Linie ist 2025.7.x
@shopify/ui-extensions with PreactAPI-Version 2025-10 und späterAktuell; die neueste Version ist 2026.10.0 für die API-Version 2026-10

Ab API-Version 2025-10 verwenden neue Erweiterungen Polaris-Webkomponenten standardmäßig. Komponenten sind benutzerdefinierte Elemente wie <s-stack>, <s-checkbox>, <s-text>, <s-button> und <s-banner>, gerendert mit Preact. Checkout‑Daten und -Aktionen wurden von React‑Hooks zu einem globalen shopify Objekt, zum Beispiel shopify.cost, shopify.buyerIdentity und shopify.applyAttributeChange(). Shopify CLI erzeugt eine shopify.d.ts Datei mit den Typen, wenn Sie shopify app dev.

Der Hauptgrund für den Wechsel ist die Größe. Ein kompiliertes UI-Erweiterungsbundle darf nicht überschreiten 64 KB (Full-Page-Kundenkonto-Erweiterungen erhalten 128 KB), und Shopify erzwingt dies zum Bereitstellungszeitpunkt. Die kleine Laufzeit von Preact lässt viel mehr von diesem Budget für Ihren eigenen Code übrig. Zwei weitere Änderungen, die es zu wissen gilt: ab API-Version 2026-04 die metafields Eigenschaft ist veraltet zugunsten von shopify.appMetafields und Änderungen an Cart-Metafeldern sowie die neue @shopify/ui-extensions-tester Paket fügt Unit-Tests hinzu.

Shopifys Leitfaden für die Migration zu Webkomponenten gibt kein Entfernungsdatum für React-basierte Erweiterungen an, die an älteren API-Versionen hängen. Dennoch landen neue Funktionen nur in aktuellen Versionen, also planen Sie den Umzug während Ihres nächsten tatsächlichen Updates.

Wie man auf Shopify-Checkout-Erweiterbarkeit Schritt für Schritt upgradet

Ob Sie nach einem automatischen Upgrade aufräumen oder noch Logik aus der Scripts-Ära neu aufbauen müssen, der Prozess ist derselbe.

  1. Überprüfen Sie, was Sie hatten. In Einstellungen, Checkout, öffnen Sie den Upgrade‑Leitfaden oder den Anpassungsbericht. Er listet Ihre alten checkout.liquid‑Änderungen auf und sortiert zusätzliche Skripte nach Zweck, z. B. Bestellverfolgung oder Authentifizierung. Exportieren Sie außerdem Ihren alten Shopify Scripts‑Code, falls Sie ihn noch besitzen.
  2. Ordnen Sie jede Anpassung ihrem Ersatz zu. UI-Änderungen werden zu Checkout-UI-Erweiterungen, Rabatt- und Versandlogik wird zu Shopify-Funktionen, Verfolgung wird zu App-Pixels oder benutzerdefinierten Pixeln und visuelle Änderungen werden zu Branding-Einstellungen.
  3. Überprüfen Sie zuerst den App Store. Viele gängige Bedürfnisse, wie z.B. Geschenkmitteilungen, Liefertermine, Umfragen nach dem Kauf und abgestufte Rabatte, existieren bereits als Checkout-Erweiterungs-Apps. Eine individuelle Entwicklung lohnt sich nur, wenn keine App passt oder die Logik spezifisch für Ihr Unternehmen ist.
  4. Bauen oder installieren Sie die Ersatzteile in einem Entwicklungsstore oder einem doppelten Checkout. Plus-Stores können einen Entwurf-Checkout im Editor erstellen und den Live-Checkout unverändert lassen.
  5. Nachverfolgung neu erstellen. Installieren Sie die offiziellen Apps für Google, Meta und TikTok, die App-Pixels liefern, und verschieben Sie alle verbleibenden Tags in Einstellungen, Kundenereignisse als benutzerdefinierte Pixel.
  6. Testen Sie echte Bestellungen. Testmodus verwenden, um Bestellungen über jede Zahlungsmethode zu platzieren, sowohl über die Checkout-Layouts als auch über jeden Markt, in dem Sie verkaufen, und dann bestätigen, dass die Conversions in Ihren Analysen ankommen.
  7. Veröffentlichen und überwachen. Veröffentlichen Sie den neuen Checkout, vergleichen Sie dann die Conversion-Rate, den durchschnittlichen Bestellwert und den nachverfolgten Umsatz mit den Wochen vor dem Wechsel.

Wenn Ihr Shop dies ordnungsgemäß benötigt, ist es ein wichtiger Teil meiner Shopify-Entwicklungsdienst.

Wie man eine Shopify-Checkout-UI-Erweiterung erstellt

Sie benötigen ein Shopify-Partnerkonto, die neueste Shopify-CLI und einen Entwicklungs-Shop. Um die Schritte 'Information', 'Versand' oder 'Zahlung' anzusprechen, muss der Entwicklungs-Shop Shopify Plus-Features aktiviert haben.

Smartphone auf einem Holztisch neben einem Laptop zum Testen einer Checkout-Erweiterung auf Mobilgeräten
A Preact-Erweiterung, die gegen einen echten Checkout getestet wurde. Foto: rawpixel, CC0
  1. Ausführen shopify app init um eine App zu erstellen oder eine bestehende zu öffnen.
  2. Ausführen shopify app generate extension --template checkout_ui und geben Sie der Erweiterung einen klaren Namen.
  3. Bearbeiten shopify.extension.toml um die API-Version, Fähigkeiten und das Ziel festzulegen.
  4. Die Benutzeroberfläche mit Polaris-Webkomponenten in Preact schreiben.
  5. Ausführen shopify app dev um gegen einen echten Checkout in Ihrem Entwicklungsstore vorzupreviewen.
  6. Ausführen shopify app deploy um eine neue App-Version freizugeben, dann den Block im Checkout-Editor hinzuzufügen.

Hier ist die Konfiguration für eine Geschenkverpackungsoption. Sie wird in einem Blockziel gerendert und stellt eine Händlereinstellung für das Kontrollkästchen-Label bereit:

api_version = "2026-10"

[[extensions]]
name = "Gift wrap option"
handle = "gift-wrap-option"
type = "ui_extension"

  [extensions.capabilities]
  api_access = true
  network_access = false
  block_progress = false

  [[extensions.targeting]]
  module = "./src/Checkout.jsx"
  target = "purchase.checkout.block.render"

[settings]
  [[settings.fields]]
  key = "label_text"
  type = "single_line_text_field"
  name = "Checkbox label"

Und hier ist die Erweiterung selbst, gespeichert als src/Checkout.jsx. Es prüft, ob der aktuelle Checkout Attributänderungen zulässt, speichert die Auswahl als Warenkorb‑Attribut, das der Händler auf der Bestellung sieht, und zeigt einen freundlichen Fehler an, wenn das Speichern fehlschlägt:

import '@shopify/ui-extensions/preact';
import { render } from 'preact';
import { useState } from 'preact/hooks';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const [error, setError] = useState('');
  const label = shopify.settings.value.label_text || 'Gift wrap this order';

  if (!shopify.instructions.value.attributes.canUpdateAttributes) {
    return null;
  }

  async function onCheckboxChange(event) {
    const isChecked = event.target.checked;
    const result = await shopify.applyAttributeChange({
      type: 'updateAttribute',
      key: 'gift_wrap',
      value: isChecked ? 'yes' : 'no',
    });
    if (result.type === 'error') {
      setError('We could not save your gift wrap choice. Please try again.');
      return;
    }
    setError('');
  }

  return (
    <s-stack gap="base">
      <s-checkbox label={label} onChange={onCheckboxChange} />
      {error && <s-banner tone="critical">{error}</s-banner>}
    </s-stack>
  );
}

Der shopify.instructions Überprüfen Sie die Angelegenheiten. Einige Checkouts, wie z. B. Checkouts für Entwurfszahlungen, erlauben keine bestimmten Warenkorbänderungen, und Ihre Erweiterung sollte leise beiseite treten, anstatt einen Fehler beim Käufer auszulösen.

Testcheckliste

  • Statische Ziele werden automatisch an ihrem festen Ort gerendert, während shopify app dev läuft.
  • Blockziele können an einer bestimmten Stelle mit einem Platzierungsverweis in der Checkout-URL 미리 angesehen werden, wie zum Beispiel WALLETS1. Shopifys Testleitfaden listet sie alle auf.
  • In Einstellungen, Checkout, Anpassen, fügen Sie den App‑Block hinzu und verschieben Sie ihn zwischen den Platzierungen.
  • Testen Sie sowohl einseitige als auch dreiseitige Layouts, da Händler zwischen ihnen wechseln können.
  • Bestellen Sie vollständige Testbestellungen, einschließlich Shop Pay, mit Zahlungen im Testmodus.

Shopify-Funktionen, Web-Pixels und Branding

UI-Erweiterungen sind nur ein Teil der Shopify-Checkout-Erweiterbarkeit. Die meisten Dinge, die Shopify-Skripte früher getan haben, gehören jetzt in Shopify-Funktionen, die auf Shopifys Servern laufen, wenn Checkout sie aufruft. Sie werden in jeder Sprache geschrieben, die nach WebAssembly kompiliert, wobei Rust‑ und JavaScript‑Vorlagen bereitgestellt werden; Shopify empfiehlt Rust für große Warenkörbe.

Altes Shopify-SkriptFunktionsersatz
Zeilenart-Skripte (abgestuft, Bundle- und Kundenrabatte)Rabattfunktionen
Versandskripte (ausblenden, umbenennen, Raten neu anordnen)Funktionen zur Lieferung von Anpassungen
Zahlungsskripte (ausblenden oder neu anordnen)Zahlungskustomisierung Funktionen
Mengengrenzen und blockierte RegionenValidierungsfunktionen für Warenkorb und Checkout
Pakete, die mit Artikel-Tricks erstellt wurdenTransformationsfunktionen für den Warenkorb

Web-Pixel ersetzen Sie die Nachverfolgung, die früher in zusätzlichen Skripten lebte. App-Pixels laufen in einer strikten Web-Worker-Sandbox, während benutzerdefinierte Pixel, die von Händlern hinzugefügt werden, in einer lockereren Iframe-Sandbox laufen, die immer noch nicht die oberste Seite erreichen kann. Beide berücksichtigen die Zustimmung des Kunden. Ein minimales App-Pixel, das abgeschlossene Checkouts meldet, sieht so aus:

import { register } from '@shopify/web-pixels-extension';

register(({ analytics }) => {
  analytics.subscribe('checkout_completed', (event) => {
    const checkout = event.data && event.data.checkout;
    if (!checkout) {
      return;
    }
    fetch('https://analytics.example.com/collect', {
      method: 'POST',
      keepalive: true,
      body: JSON.stringify({
        orderId: checkout.order ? checkout.order.id : null,
        total: checkout.totalPrice ? checkout.totalPrice.amount : null,
        currency: checkout.currencyCode,
      }),
    });
  });
});

Markenbildung deckt Farben, Typografie, Logos und Abschnittsstilierung ab. Jeder Plan erhält die grundlegenden Steuerelemente im Checkout-Editor. Plus-Shops und Entwicklungs-Shops können über die GraphQL Admin API weiter gehen. Beachten Sie, dass Shopify in der API-Version 2026-10 checkoutBrandingUpsert als veraltet zu Gunsten von checkoutAndAccountsConfigurationUpdate, sodass neuer Branding‑Code die neuere Mutation anvisieren sollte.

Checkout-Erweiterbarkeit für Händler

Wenn Sie einen Shop betreiben und keinen Code schreiben, müssen Sie Folgendes tun:

  • Öffnen Einstellungen, Checkout und bestätigen Sie Ihren Checkout. Vielen Dank und Bestellstatusseiten sind auf der neuen Version.
  • Lesen Sie den schreibgeschützten zusätzlichen Skriptbereich und listen Sie jedes Tool auf, das früher davon abhängig war.
  • Ersetzen oder aktualisieren Sie diese Apps, damit sie App-Pixels oder App-Blöcke verwenden, und bestätigen Sie in jedem Tool-Dashboard, dass Bestellungen immer noch erfasst werden.
  • Wenn Sie sich auf Shopify Scripts für Rabatte oder Versandregeln verlassen haben, überprüfen Sie, ob jede Regel jetzt als App oder benutzerdefinierte Funktion existiert. Ein Warenkorb, der die Regel auslösen soll, und ein Warenkorb, der dies nicht tun soll, sind der schnellste Test.
  • Den Checkout-Editor verwenden, um Vertrauensabzeichen, Bestellnotizen, Upsells oder Umfragen von installierten Apps hinzuzufügen, und dann auf Mobilgeräten Vorschau ansehen, wo die meisten Bestellungen stattfinden.

Die meisten Geschäfte können dies mit bestehenden Apps abschließen. Individuelle Arbeit lohnt sich nur für einzigartige Logik, wie z.B. Großhandelsregeln, B2B-Felder oder Verknüpfungen mit Treueprogrammen.

Checkout-Erweiterbarkeit für Entwickler

Wenn Sie für Shopify entwickeln, ist das mentale Modell anders als bei Theme-Arbeiten:

  • Erweiterungen werden in einem Web Worker ohne window oder DOM. Bibliotheken, die entweder darauf zugreifen, schlagen fehl.
  • Jeder Aufruf an Ihren Backend-Server ist nicht vertrauenswürdig. Authentifizieren Sie ihn mit einem Sitzungs-Token von shopify.sessionToken und überprüfen Sie Preise und Berechtigung auf dem Server erneut.
  • Anheften an api_version und auf einem Zeitplan upgraden. Shopify veröffentlicht alle drei Monate eine neue Version, und die neuesten Dokumente gehen von Preact und Webkomponenten aus.
  • Öffentliche Apps, die Netzwerkaufrufe enthalten, benötigen network_access in der TOML und Genehmigung für Netzwerkzugriff im Partner-Dashboard. Ihr Server muss auch CORS-Anfragen beantworten.
  • Öffentliche Apps, die geschützte Daten berühren, stehen nun vor strengeren Plattformregeln. Mein Beitrag auf dem Shopify-IP-Whitelist-Anforderung für öffentliche Apps deckt eine kürzlich erfolgte Änderung ab.

Wenn ein Projekt ein benutzerdefiniertes Backend, eine Admin-Dashboard oder eine Integration um die Erweiterung benötigt, fällt dies unter meine individuelle Web-Entwicklung Arbeit.

Häufige Fehler bei der Checkout-Erweiterbarkeit

Messinggewichte, die in ein Holzkästchen passen, wie ein Erweiterungsbundle mit einer Größenbegrenzung
Sandboxed, größenbegrenzt und sicher konzipiert. Foto: Auckland Museum Sammlungen, CC BY 2.0
  • Angenommen, die Erweiterung erscheint automatisch. Das Bereitstellen macht den Block nur verfügbar. Ein Händler muss ihn immer noch im Checkout-Editor hinzufügen, was viele "Es funktioniert in meinem Shop"-Tickets verursacht.
  • Den 64-KB-Budget sprengen. Bibliotheken für Datum, Symbolpakete und Analyse-SDKs addieren sich schnell. Importieren Sie nur, was Sie benötigen, und beobachten Sie die Build-Größe.
  • Das Kopieren alter Tutorials. Code, der importiert @shopify/checkout-ui-extensions-react oder verwendet React-Hooks wie useApplyAttributeChange gehört zu älteren API-Versionen. Beginnen Sie neue Arbeiten an @shopify/ui-extensions mit Preact.
  • Verwendend block_progress achtlos. Diese Funktion ermöglicht es einer Erweiterung, den Käufer davon abzuhalten, fortzufahren. Verwenden Sie sie nur für echte Validierungen und erklären Sie immer, warum.
  • Vergessen der Nachverfolgung nach einem automatischen Upgrade. Der Umsatz kann so aussehen, als wäre er gesunken, wenn nur der Tag nicht mehr ausgelöst wurde. Vergleichen Sie Bestellungen in Shopify mit Ihren Werbeplattformen.
  • Ein Skript als UI-Erweiterung neu aufbauen. Rabatte und Versandregeln gehören in Funktionen auf dem Server, nicht in clientseitigem Code, der von einem Käufer manipuliert werden kann.
  • Testen Sie nur ein Layout oder einen Markt. Einseitige und dreiseitige Checkouts, verschiedene Währungen und verschiedene Zahlungsmethoden verhalten sich alle unterschiedlich.

Die Geschwindigkeit des Checkouts ist genauso wichtig wie die Funktionen, weshalb sie Teil meiner Shopify-Geschwindigkeitsoptimierungs-Checkliste. Wenn Sie Tracking auf den alten Seiten hatten, mein Leitfaden zu Migration von Pixeln nach der Deprecation des Skript-Tags geht tiefer, und wenn Sie über KI-Assistenten verkaufen, sehen Sie Agentic Commerce auf Shopify.

Häufig gestellte Fragen

Was ist Shopify checkout extensibility?

Shopify Checkout Extensibility ist das app-basierte System von Shopify für die Anpassung des Checkouts. Es verwendet Checkout-UI-Erweiterungen für Interface-Änderungen, Shopify Functions für Geschäftslogik, Web-Pixels für Tracking und Branding-Einstellungen für Design. Es ersetzte checkout.liquid, zusätzliche Skripte, Skript-Tags und Shopify Scripts, die alle inzwischen eingestellt wurden.

Was war die Frist für checkout extensibility?

Es gab mehrere. Plus-Stores verloren checkout.liquid bei den Schritten Informationen, Versand und Zahlung am 13. August 2024 und bei den Seiten Dank und Bestellstatus am 28. August 2025. Shopify-Skripte funktionierten am 30. Juni 2026 nicht mehr. Nicht-Plus-Stores mussten ihre Dank- und Bestellstatus-Seiten bis zum 26. August 2026 aktualisieren.

Ist checkout.liquid veraltet?

Ja. Shopifys Docs sagen, dass checkout.liquid auf den Schritten Informationen, Versand und Zahlung nicht unterstützt wird und am 28. August 2025 auf den Seiten Dank und Bestellstatus abgeschafft wurde. Es gibt keine Möglichkeit, es 2026 wieder einzuschalten, daher muss jede verbleibende Anpassung mit checkout extensibility neu aufgebaut werden.

Was sind Shopify checkout UI-Erweiterungen?

Checkout-UI-Erweiterungen sind kleine, sandbox-basierte Apps, die Interface-Elemente wie Felder, Banner oder Upsells an definierte Ziele im Checkout, auf der Dankes- und Bestellstatusseite hinzufügen. Seit der API-Version 2025-10 werden sie mit Preact und Polaris-Webkomponenten erstellt, indem sie @shopify/ui-extensions Paket mit einer Bündelgrenze von 64 KB.

Wird @shopify/checkout-ui-extensions-react noch verwendet?

Nein. Es war das ursprüngliche Paket von 2022 bis 2023 und wurde zuletzt im August 2023 veröffentlicht. Es wurde gefolgt von @shopify/ui-extensions-react, deren letzte Release‑Zeile die API‑Version 2025‑07 anvisiert, und dann von @shopify/ui-extensions mit Preact, was Shopify aktuelle Dokumentation verwendet.

Können Non-Plus-Shops Checkout-Erweiterungen verwenden?

Ja, auf den Dankeseiten und Bestellstatusseiten. Nicht-Plus-Stores können auch öffentliche Apps verwenden, die Shopify Functions, App-Pixels und grundlegende Checkout-Branding enthalten. UI-Erweiterungen auf den Schritten für Informationen, Versand und Zahlung, benutzerdefinierte Apps mit Funktionen und API-basiertes Branding erfordern Shopify Plus.

Was sind checkout extensibility-Apps?

Dies sind Shopify App Store-Apps, die auf checkout extensibility basieren, wie Apps für Umfragen nach dem Kauf, Liefertermine, Geschenk-Optionen, Upsells, Treue und gestaffelte Rabatte. Suchen Sie nach Apps, die checkout UI-Erweiterungen, Shopify-Funktionen oder App-Pixels erwähnen, und vermeiden Sie solche, die Sie auffordern, Code in zusätzliche Skripte einzufügen.

Was passiert, wenn mein Shop nicht aktualisiert wurde?

Die alten Anpassungen stoppen die Ausführung. checkout.liquid-Edits, zusätzliche Skripte, Dankeseitenskript-Tags und Shopify-Skripte werden nicht mehr ausgeführt und die Seiten fallen auf die Standardversionen von Shopify zurück. Überprüfen Einstellungen, Checkout um die Version jeder Seite zu bestätigen, dann das, was Sie verloren haben, mit Apps, Erweiterungen, Funktionen oder Pixeln, neu aufzubauen.

Nächste Schritte

Überprüfen Sie Ihren Checkout, bestätigen Sie, dass die Nachverfolgung noch funktioniert, und verschieben Sie alle verlorenen Logiken in Funktionen oder Apps. Für ein Beispiel meiner Shopify Plus-Arbeit siehe Real Mad Honey Fallstudie, oder stöbern Sie weiter Shopify- und WordPress-Fallstudien. Benötigen Sie eine Checkout‑Erweiterung, die mit Preact erstellt oder migriert wurde? Senden Sie mir die Details über mein Kontaktformular.

Quellen

Verwandte Lektüre