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.
| Datum | Was passierte | Wer ist betroffen |
|---|---|---|
| 13. Februar 2023 | Shopify kündigte an, dass die checkout.liquid-Themendatei gelöscht wird | Shopify Plus |
| 15. Februar 2024 | KI-gestützte Anpassungsberichte veröffentlicht, um Plus-Stores bei der Planung ihres Upgrades zu helfen | Shopify Plus |
| 13. August 2024 | checkout.liquid funktioniert nicht mehr auf den Schritten Informationen, Versand und Zahlung | Shopify Plus |
| 28. August 2025 | checkout.liquid, zusätzliche Skripte und Skript-Tags werden auf den Dankeseiten und Bestellstatusseiten eingestellt; das Feld für zusätzliche Skripte wurde nur noch lesbar | Shopify Plus (Nur-Anzeige-Box für alle Stores) |
| 15. April 2026 | Shopify-Scripts konnten nicht mehr bearbeitet oder veröffentlicht werden | Plus-Geschäfte, die Skripte verwenden |
| 30. Juni 2026 | Shopify-Scripts und die Script-Editor-App eingestellt; Scripts werden nicht mehr auf irgendeinem Store ausgeführt | Plus-Geschäfte, die Skripte verwenden |
| 26. August 2026 | Deadline für die Aufrüstung der Dankes- und Bestellstatusseiten; Sunset für Skript-Tags | Nicht-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.
| Bereich | checkout.liquid (legacy) | Checkout-Erweiterbarkeit (aktuell) |
|---|---|---|
| Wie Sie anpassen | Eine Liquid-Vorlage, CSS und JavaScript direkt bearbeiten | Apps fügen UI-Erweiterungen, Funktionen und Pixel an definierten Stellen hinzu |
| Wer könnte es verwenden | Nur Shopify Plus | Alle Pläne auf den Seiten 'Danke' und 'Bestellstatus'; Plus für die Schritte 'Informationen', 'Versand' und 'Zahlung' |
| Sicherheit verbessern | Shopify-Updates könnten benutzerdefinierten Code brechen | Erweiterungen sind versioniert und funktionieren weiterhin durch Checkout-Updates |
| Rabatt- und Versandlogik | Shopify-Scripts geschrieben in Ruby | Shopify-Funktionen kompiliert zu WebAssembly (Rust oder JavaScript) |
| Verfolgung | Zusätzliche Skripte und Skript-Tags auf der Seite | App-Pixels und benutzerdefinierte Pixel in einer Sandbox |
| Styling | Beliebige CSS | Branding des Checkout-Editors plus GraphQL-Branding-API für Plus |
| Leistung und Sicherheit | Drittanbieter-Skripte liefen auf der Zahlungsseite | Erweiterungen werden in einer Web Worker-Sandbox ohne DOM-Zugriff ausgeführt |
| Shop Pay und One-Page-Checkout | Nicht kompatibel mit benutzerdefinierten Vorlagen | Voll unterstützt |
| Status im Jahr 2026 | Entfernt | Die 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.
- Blockziele, beispielsweise
purchase.checkout.block.renderundpurchase.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
| Feature | Nicht-Plus-Pläne | Shopify Plus |
|---|---|---|
| UI-Erweiterungen auf den Seiten Danke und Bestellstatus | Ja | Ja |
| UI-Erweiterungen auf den Schritten Informationen, Versand und Zahlung | Nein | Ja |
| Öffentliche Apps, die Shopify-Funktionen enthalten | Ja | Ja |
| Benutzerdefinierte Apps, die Shopify-Funktionen enthalten | Nein | Ja |
| Grundlegende Markenbildung im Checkout-Editor | Ja | Ja |
| Erweiterte Markenbildung über die GraphQL Admin API | Nein | Ja (auch auf Entwicklungs-Shops) |
| App-Pixels und benutzerdefinierte Pixel | Ja | Ja |
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 | Ära | Status im November 2026 |
|---|---|---|
| @shopify/checkout-ui-extensions-react and @shopify/checkout-ui-extensions | 2022 bis 2023 | Legacy; zuletzt veröffentlicht im August 2023 (Version 0.27.3) |
| @shopify/ui-extensions-react | API-Versionen 2023-04 bis 2025-07 | Veraltet; letzte Release-Linie ist 2025.7.x |
| @shopify/ui-extensions with Preact | API-Version 2025-10 und später | Aktuell; 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.
- Ü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.
- 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.
- Ü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.
- 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.
- 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.
- 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.
- 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.
- Ausführen
shopify app initum eine App zu erstellen oder eine bestehende zu öffnen. - Ausführen
shopify app generate extension --template checkout_uiund geben Sie der Erweiterung einen klaren Namen. - Bearbeiten
shopify.extension.tomlum die API-Version, Fähigkeiten und das Ziel festzulegen. - Die Benutzeroberfläche mit Polaris-Webkomponenten in Preact schreiben.
- Ausführen
shopify app devum gegen einen echten Checkout in Ihrem Entwicklungsstore vorzupreviewen. - Ausführen
shopify app deployum 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 devlä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-Skript | Funktionsersatz |
|---|---|
| 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 Regionen | Validierungsfunktionen für Warenkorb und Checkout |
| Pakete, die mit Artikel-Tricks erstellt wurden | Transformationsfunktionen 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
windowoder 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.sessionTokenund überprüfen Sie Preise und Berechtigung auf dem Server erneut. - Anheften an
api_versionund 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_accessin 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
- 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-reactoder verwendet React-Hooks wieuseApplyAttributeChangegehört zu älteren API-Versionen. Beginnen Sie neue Arbeiten an@shopify/ui-extensionsmit Preact. - Verwendend
block_progressachtlos. 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
- Shopify-Entwickler: checkout.liquid (Deprecation- und Sunset-Daten)
- Shopify Changelog: Die Theme-Datei checkout.liquid wird am 13. Februar 2023 veraltet sein
- Shopify Changelog: Anpassungsberichte für Plus-Shops (Deadline 13. August 2024)
- Shopify-Hilfe-Center: Upgrade von Danke- und Bestellstatusseiten (nicht-Plus)
- Shopify Dev Changelog: Shopify-Skripte am 30. Juni 2026 veraltet
- Shopify-Hilfe-Center: Übergang von Shopify-Scripts zu Shopify-Funktionen
- Shopify Dev: Checkout-Apps erstellen
- Shopify-Entwickler: Checkout UI-Erweiterungen API-Referenz
- Shopify Dev: Konfiguration der Checkout-UI-Erweiterung
- Shopify-Entwickler: Migration zu Polaris-Webkomponenten
- Shopify-Entwickler: Shopify-Funktionen
- Shopify-Entwickler: Web-Pixels
- Shopify-Entwickler: checkoutBrandingUpsert-Mutation
- npm: @shopify/checkout-ui-extensions-react und npm: @shopify/ui-extensions