Shopify Checkout Extensibility in 2026: Deadlines, UI-extensies en Upgradehandleiding
Door Eoin Villarin, 2026‑02‑05, bijgewerkt 2026‑11‑14
Uitbreidbaarheid van Shopify-checkout verving checkout.liquid en Shopify Scripts. Zie elke deadline, wat er gebeurt als je niet 업graded, en hoe je checkout UI-extensies bouwt met Preact.
Wat is Shopify checkout extensibility en wat was de deadline?
Shopify checkout extensibility is Shopify's app-gebaseerde manier om checkout aan te passen, met behulp van checkout UI-extensies, Shopify Functions, webpixels en brandinginstellingen in plaats van checkout.liquid, aanvullende scripts en Shopify Scripts. Plus-winkels verloren checkout.liquid op 13 augustus 2024 (checkout-stappen) en 28 augustus 2025 (Bedankt en Bestelstatuspagina's), Scripts stopten met lopen op 30 juni 2026, en niet-Plus-winkels moesten upgraden tegen 26 augustus 2026.
Belangrijkste punten
- checkout.liquid werkt niet meer op de Informatie-, Verzending- en Betalingsstappen op 13 augustus 2024, en op Plus Bedankt- en Bestelstatuspagina's op 28 augustus 2025.
- Shopify Scripts bevroor op 15 april 2026 en stopte met lopen op 30 juni 2026; kortings-, verzend- en betalingslogica behoort nu toe aan Shopify Functions.
- Non‑Plus‑winkels hadden tot 26 augustus 2026 om hun Bedank‑ en Orderstatus‑pagina’s te upgraden, en script‑tags op die pagina’s zijn nu beëindigd.
- Checkout UI-extensies gebruiken nu @shopify/ui-extensions met Preact en Polaris-webcomponenten, ter vervanging van het oude @shopify/checkout-ui-extensions-react-pakket, met een bundelgrens van 64 KB.
- Extensies op de informatie-, verzend- en betalingsstappen en aangepaste apps met Functies hebben Shopify Plus nodig; Bedankt en Bestelstatus-extensies werken op elk plan.
Uitbreidbaarheid van Shopify-checkout is de enige ondersteunde manier om Shopify's afrekening in 2026 aan te passen. Het verving checkout.liquid, extra scripts, script‑tags en Shopify Scripts met vier app‑gebaseerde bouwblokken: checkout UI‑extensies, Shopify Functions, web‑pixels en de branding‑instellingen. Elke deadline is nu verstreken. checkout.liquid stopte met werken op de Informatie‑, Verzend‑ en Betalingsstappen op 13 augustus 2024, Plus‑winkels verloren het op de Bedank‑ en Orderstatus‑pagina’s op 28 augustus 2025, Shopify Scripts stopte met draaien op 30 juni 2026, en niet‑Plus‑winkels bereikten hun Bedank‑ en Orderstatus‑deadline op 26 augustus 2026.
Als je winkel één van die data mist, is de oude code niet "gepausd", het werkt gewoon niet meer. Deze gids legt uit wat checkout extensibility is, de volledige tijdlijn, wat verving wat, hoe je upgradeert stap voor stap en hoe je een checkout UI-extensie bouwt met de huidige Preact en Polaris webcomponenten setup. Ik bouw en migreer Shopify-checkouts voor mijn leven, dus ik heb het praktisch gehouden en alleen feiten vermeld die ik kon controleren tegen Shopify's eigen documentatie, die aan het einde zijn vermeld.
Wat is Shopify checkout-extensibiliteit?
Uitbreidbaarheid van Shopify-checkout is de reeks tools waarmee apps en handelaren kunnen veranderen hoe de checkout eruitziet en zich gedraagt zonder de checkoutcode rechtstreeks te bewerken. In plaats van één grote Liquid-sjabloon die je vrij kon herschrijven, is checkout nu een door Shopify beheerde pagina met gedefinieerde plaatsen waar goedgekeurde code kan aansluiten. Shopify beschrijft de hoofdonderdelen op zijn overzicht van afrekenapps:
- Checkout UI-extensies voeg interface-elementen toe zoals velden, banners, upsells en checkboxes. Merchants plaatsen ze in de checkout-editor.
- Shopify Functions wijzig bedrijfslogica op Shopify's servers: kortingen, leveringsopties, betalingsopties, winkelwagen- en afrekenvalidatie, bundels, lokale ophaling en fulfilmentbeperkingen.
- Webpixels afhandel analytics en conversiesporing door je te abonneren op standaardklantgebeurtenissen in een sandbox, in plaats van scripts in te injecteren.
- Merkidentiteit beheert kleuren, lettertypen, logo's, hoekradius en lay-out via de afrekeneditor en voor diepere wijzigingen de GraphQL Admin API.
- Betalings‑extensies laat betalingsproviders hun methoden integreren in de afrekening.
De handel is eenvoudig. Je geeft de vrijheid op om elk deel van de pagina te herschrijven, en in ruil daarvoor blijven je aanpassingen de updates van Shopify overleven, blijft de checkout snel en veilig, en blijven functies zoals Shop Pay, eenpagina-checkout en nieuwe betaalmethoden werken zonder dat je iets hoeft aan te raken.
Deadline en tijdlijn voor uitbreidbaarheid van afrekenen
De overstap van checkout.liquid gebeurde in fasen. De tabel hieronder geeft elke datum weer die van belang is, wie het beïnvloedde en wat er gebeurde. Data komen uit de changelog, het helpcentrum en de ontwikkelaarsdocumentatie van Shopify.
| Datum | Wat er gebeurde | Wie is het beïnvloed |
|---|---|---|
| 13 februari 2023 | Shopify kondigde aan dat het checkout.liquid-themapbestand werd afgeschaft | Shopify Plus |
| 15 februari 2024 | Rapport over door AI aangedreven aanpassingen uitgebracht om Plus-winkels te helpen bij het plannen van hun upgrade | Shopify Plus |
| 13 augustus 2024 | checkout.liquid werkt niet meer op de Informatie-, Verzending- en Betalingsstappen | Shopify Plus |
| 28 augustus 2025 | checkout.liquid, extra scripts en scripttags zijn afgeschaft op de Bedankt- en Bestelstatuspagina's; het vak voor extra scripts is alleen-lezen geworden | Shopify Plus (alleen-weergavevak voor alle winkels) |
| 15 april 2026 | Shopify Scripts konden niet langer worden bewerkt of gepubliceerd | Plus‑winkels die Scripts gebruiken |
| 30 juni 2026 | Shopify Scripts en de Script Editor-app met pensioen; scripts worden niet langer uitgevoerd op enige winkel | Plus‑winkels die Scripts gebruiken |
| 26 augustus 2026 | Deadline voor het upgraden van Bedankt- en Bestelstatuspagina's; scripttags sunset | Non‑Plus‑winkels |
In het kort, de checkout extensibility upgrade is niet langer optioneel voor iedereen. Vanaf november 2026 is er geen plan of instelling die checkout.liquid, extra scripts of Shopify Scripts terugbrengt.
Wat gebeurt er als een winkel niet is geüpgraded?
De oude code stopt met werken en de winkel valt terug op de standaardpagina's van Shopify. In de praktijk betekent dit:
- checkout.liquid-bewerkingen niet langer renderen. Shopify's checkout.liquid-documentatie verklaart dat het niet wordt ondersteund op de informatie-, verzending- en betalingsstappen en werd stopgezet op de bedank- en bestelstatuspagina's op 28 augustus 2025.
- Aanvullende scripts kan niet worden bewerkt, omdat het vakje sinds 28 augustus 2025 alleen-lezen is en code erin niet langer werkt op verbeterde pagina's. Typische slachtoffers zijn conversietags, affiliate-tracking, enquêtes na aankoop en verzoeken om beoordelingen.
- Scripttags van apps op de bedank- en bestelstatuspagina's worden stopgezet (Plus op 28 augustus 2025, niet-Plus op 26 augustus 2026).
- Shopify Scripts niet langer kortingen toepassen, verzendtarieven verbergen of betalingsmethoden opnieuw ordenen. Shopify's Scripts overgangspagina zegt duidelijk dat scripts niet langer op enige winkel worden uitgevoerd.
Shopify's upgradegids zonder Plus bevestigt dat een upgrade de bestaande Bedankt- en Bestelstatuspagina's en eventuele aanpassingen daarop vervangt, en dat winkels op het Pause and Build-plan automatisch, permanent worden geüpgraded. Voor Plus-checkouts die nog op checkout.liquid staan, zei Shopify dat het ze binnen 30 dagen met een e-mailbericht automatisch zou upgraden. De huidige hulppagina's van Shopify geven geen exacte automatische upgradedatum voor elk winkeltype weer, dus de veiligste manier om te controleren is om Instellingen, Checkout in je admin en kijk welke versie elke pagina heeft.
afreken.liquid vs afreken extensibiliteit
Dit is de vergelijking die ik met klanten doorloop als ze vragen waarom hun oude aanpassingen niet zomaar kunnen worden gekopieerd.
| Gebied | checkout.liquid (legacy) | Afrekenen uitbreidbaarheid (huidig) |
|---|---|---|
| Hoe je aanpast | Bewerk één Liquid-sjabloon, CSS en JavaScript rechtstreeks | Apps voegen UI-extensies, Functies en pixels toe op gedefinieerde plaatsen |
| Wie kan het gebruiken | Alleen Shopify Plus | Alle plannen op Bedankt- en Bestellingsstatuspagina's; Plus voor Informatie-, Verzending- en Betalingsstappen |
| Veiligheid upgraden | Shopify-updates kunnen aangepaste code breken | Extensies zijn versiebeheer en blijven werken tijdens checkout-updates |
| Korting- en verzendlogica | Shopify Scripts geschreven in Ruby | Shopify Functions samengesteld tot WebAssembly (Rust of JavaScript) |
| Volgen | Aanvullende scripts en scripttags op de pagina | App-pixels en aangepaste pixels in een sandbox |
| Stijlen | Elke CSS | Branding van de Checkout-editor plus de GraphQL-branding-API op Plus |
| Prestaties en beveiliging | Scripts van derden liepen op de betalingspagina | Extensies worden uitgevoerd in een Web Worker-sandbox zonder DOM-toegang |
| Shop Pay en eenpagina-checkout | Niet compatibel met aangepaste sjablonen | Volledig ondersteund |
| Status in 2026 | Verwijderd | De enige ondersteunde optie |
Welke delen van Shopify checkout kun je aanpassen?
Checkout UI-extensies renderen in doelgroepen. Een target is een benoemd punt in de checkout, en Shopify groepeert targets in drie soorten.
- Doelblokken, zoals
purchase.checkout.block.renderenpurchase.thank-you.block.render, die handelaren kunnen slepen naar elke ondersteunde plaatsing in de checkout‑editor. - Statische doelen, die renderen op een vast punt, bijvoorbeeld na de contactvelden, na de winkelwagen‑regels of vóór de actieknoppen.
- Uitvoerbare doelstellingen, die gegevens of logica retourneren zonder iets te renderen.
De Bedankt-pagina gebruikt purchase.thank-you doelgroepen, en de bestelstatuspagina leeft nu in klantaccounts, met behulp van customer-account.order-status doelgroepen.
Wat elke Shopify-plan kan doen
| Functie | Non‑Plus‑plannen | Shopify Plus |
|---|---|---|
| UI-extensies op Bedankt- en Bestelstatuspagina's | Ja | Ja |
| UI-extensies op Informatie-, Verzending- en Betalingstappen | Nee | Ja |
| Publieke apps die Shopify Functions bevatten | Ja | Ja |
| Aangepaste apps die Shopify Functions bevatten | Nee | Ja |
| Basismerkidentiteit in de kassa-editor | Ja | Ja |
| Geavanceerde merkidentiteit via de GraphQL Admin API | Nee | Ja (ook op ontwikkelingswinkels) |
| App-pixels en aangepaste pixels | Ja | Ja |
De Plus-limiet op de stappen Informatie, Verzending en Betaling komt rechtstreeks van de afreken UI-extensies referentie, en de aangepaste app‑regel voor Functions staat in de Shopify Functions-documentatie.
Shopify checkout UI-extensies in 2026: React, Preact en webcomponenten
Als je zoekt naar @shopify/checkout-ui-extensions-react, je kijkt naar de eerste generatie van de tooling. De pakketnamen zijn twee keer gewijzigd, en veel oude tutorials tonen nog de oorspronkelijke imports.
| Pakket | Era | Status in november 2026 |
|---|---|---|
| @shopify/checkout-ui-extensions-react en @shopify/checkout-ui-extensions | 2022 tot 2023 | Legacy; laatst gepubliceerd in augustus 2023 (versie 0.27.3) |
| @shopify/ui-extensions-react | API-versies 2023-04 tot 2025-07 | Verouderd; laatste release-reeks is 2025.7.x |
| @shopify/ui-extensions met Preact | API-versie 2025-10 en later | Huidig; de nieuwste is 2026.10.0 voor API-versie 2026-10 |
Vanaf API-versie 2025-10 gebruiken nieuwe extensies Polaris web componenten standaard. Componenten zijn aangepaste elementen zoals <s-stack>, <s-checkbox>, <s-text>, <s-button> en <s-banner>, gerenderd met Preact. Checkout‑data en acties zijn verplaatst van React‑hooks naar een globale shopify object, bijvoorbeeld shopify.cost, shopify.buyerIdentity en shopify.applyAttributeChange(). Shopify CLI genereert een shopify.d.ts bestand met de typen wanneer je uitvoert shopify app dev.
De belangrijkste reden voor de overstap is de grootte. Een samengestelde UI-extensiebundel kan niet groter zijn dan 64 KB (volledige-pagina klantaccount‑extensies krijgen 128 KB), en Shopify handhaaft dit bij het deployen. De kleine runtime van Preact laat veel meer van dat budget over voor je eigen code. Twee extra wijzigingen die je moet weten: vanaf API‑versie 2026‑04 de metafields eigenschap is verouderd ten gunste van shopify.appMetafields en winkelwagenmetafeldwijzigingen, en de nieuwe @shopify/ui-extensions-tester pakket voegt unit-testing toe.
Shopify's migratiegids naar webcomponenten lijst geen verwijderingsdatum op voor op React gebaseerde extensies die zijn vastgemaakt aan oudere API-versies. Toch landen nieuwe functies alleen in huidige versies, dus plan de verhuizing tijdens je volgende echte update.
Hoe upgrade je naar Shopify checkout extensibility stap voor stap
Of je nu opruimt na een automatische upgrade of nog steeds Scripts-era-logica hebt om opnieuw te bouwen, het proces is hetzelfde.
- Controleer wat je had. In Instellingen, Checkout, open de upgrade‑gids of het customisaties‑rapport. Het geeft je oude checkout.liquid‑bewerkingen weer en sorteert extra scripts op doel, zoals ordertracking of authenticatie. Exporteer ook je oude Shopify Scripts‑code als je die nog hebt.
- Koppel elke aanpassing aan de vervanging. UI-wijzigingen worden checkout UI-extensies, kortings- en verzendingslogica wordt Shopify Functions, volgen wordt app-pixels of aangepaste pixels, en visuele wijzigingen worden merkinstellingen.
- Controleer eerst de App Store. Veel voorkomende behoeften, zoals cadeau‑berichten, bezorgdata, enquêtes na aankoop en schaal‑kortingen, bestaan al als checkout extensibility‑apps. Maatwerk heeft alleen zin als er geen app past of de logica specifiek is voor jouw bedrijf.
- Bouw of installeer de vervangingen op een ontwikkelingswinkel of een dubbele kassa. Plus-winkels kunnen een conceptkassa maken in de editor en de live kassa onaangeroerd laten.
- Volgorde opnieuw maken. Installeer de officiële apps voor Google, Meta en TikTok, die app-pixels leveren, en verplaats eventuele resterende tags naar Instellingen, Klantgebeurtenissen als aangepaste pixels.
- Test echte bestellingen. Gebruik de testmodus om bestellingen te plaatsen via elke betalingsmethode, zowel checkout-indelingen als elke markt waarop je verkoopt, en bevestig vervolgens dat conversies in je analytics binnenkomen.
- Publiceren en monitoren. Publiceer de nieuwe checkout en vergelijk vervolgens het conversiepercentage, de gemiddelde bestelwaarde en de bijgehouden omzet met de weken vóór de schakelaar.
Als je winkel dit moet laten doen, is het een kernonderdeel van mijn Shopify-ontwikkelingservice.
Hoe bouw je een Shopify checkout UI-extensie
Je hebt een Shopify Partner-account nodig, de nieuwste Shopify CLI en een ontwikkelingswinkel. Om de informatie-, verzend- of betalingsstappen te targeten, moet de ontwikkelingswinkel Shopify Plus-functies hebben ingeschakeld.
- Uitvoeren
shopify app initom een app te maken, of een bestaande te openen. - Uitvoeren
shopify app generate extension --template checkout_uien geef de extensie een duidelijke naam. - Bewerk
shopify.extension.tomlom de API-versie, mogelijkheden en doelgroep in te stellen. - Schrijf de UI in Preact met Polaris-webcomponenten.
- Uitvoeren
shopify app devom een voorbeeld te bekijken tegen een echte kassa op je ontwikkelingswinkel. - Uitvoeren
shopify app deployom een nieuwe app-versie uit te geven, en vervolgens het blok toe te voegen in de kassa-editor.
Hier is de configuratie voor een cadeaubewerkingsoptie. Het renderen in een blokdoel en exposeert één merchant-instelling voor het selectievakje label:
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"
En hier is de extensie zelf, opgeslagen als src/Checkout.jsx. Het controleert of de huidige checkout attribuutwijzigingen toestaat, slaat de keuze op als een winkelwagen‑attribuut dat de handelaar ziet op de order, en toont een vriendelijke foutmelding als het opslaan mislukt:
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>
);
}
De shopify.instructions controleer zaken. Sommige afrekeningen, zoals conceptorderafrekeningen, staan bepaalde winkelwagenwijzigingen niet toe en je extensie moet zachtjes opzij gaan in plaats van een fout te gooien bij de koper.
Testchecklist
- Statische doelen renderen automatisch op hun vaste plek terwijl
shopify app devwordt uitgevoerd. - Doelblokken kunnen worden bekeken op een specifieke plek met een plaatsingsreferentie in de kassa-URL, zoals
WALLETS1. Shopify's testgids lijst ze allemaal. - In Instellingen, Checkout, Aanpassen, voeg het app‑blok toe en verplaats het tussen de plaatsingen.
- Test zowel lay-outs met één pagina als met drie pagina's, omdat handelaren kunnen schakelen.
- Plaats volledige testbestellingen, inclusief Shop Pay, met betalingen in testmodus.
Shopify Functions, webpixels en branding
UI-extensies zijn slechts één deel van de Shopify-checkout-extensibiliteit. Het meeste wat Shopify Scripts vroeger deed, behoort nu tot Shopify Functions, die draaien op Shopify‑servers wanneer checkout ze aanroept. Ze zijn geschreven in elke taal die compileert naar WebAssembly, met Rust‑ en JavaScript‑templates; Shopify raadt Rust aan voor grote winkelwagens.
| Oude Shopify Script | Functievervanging |
|---|---|
| Regel‑artikelscripts (geschaald, bundel‑ en klantkortingen) | Kortingsfuncties |
| Verzendscripts (verbergen, hernoemen, herordenen van tarieven) | Leveringsaanpassingsfuncties |
| Betalingsscripts (verbergen of opnieuw rangschikken van methoden) | Betalingsaanpassing Functions |
| Hoeveelheidsgrenzen en geblokkeerde regio's | Validatie van winkelwagen en afrekenen Functies |
| Bundels gebouwd met trucs voor winkelwagenitems | Transformeer winkelwagen Functies |
Webpixels vervang tracking die vroeger in aanvullende scripts zat. App-pixels worden uitgevoerd in een strikte Web Worker-sandbox, terwijl aangepaste pixels toegevoegd door merchants worden uitgevoerd in een losser iframe-sandbox die nog steeds geen toegang heeft tot de bovenste pagina. Beide respecteren klanttoestemming. Een minimale app-pixel die voltooide kassa's rapporteert, ziet er als volgt uit:
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,
}),
});
});
});
Merkidentiteit dekt kleuren, typografie, logo's en sectiestyling. Elk plan krijgt de basisbediening in de afrekeneditor. Plus-winkels en ontwikkelingswinkels kunnen verder gaan via de GraphQL Admin API. Houd er rekening mee dat in API-versie 2026-10 Shopify markeert checkoutBrandingUpsert als verouderd en vervangen door checkoutAndAccountsConfigurationUpdate, dus nieuwe branding‑code moet zich richten op de nieuwere mutatie.
Afrekenen uitbreidbaarheid voor handelaren
Als je een winkel runt en geen code schrijft, is dit wat je nu eigenlijk moet doen:
- Openen Instellingen, Checkout en bevestig je checkout, Bedankt en Bestelstatuspagina's zijn op de nieuwe versie.
- Lees het alleen-lezen aanvullende scripts vak en vermeld elk hulpmiddel dat vroeger afhankelijk was van het.
- Herinstalleer of update die apps zodat ze app-pixels of app-blokken gebruiken en bevestig in het dashboard van elk hulpmiddel dat bestellingen nog steeds worden opgenomen.
- Als je vertrouwde op Shopify Scripts voor kortingen of verzendregels, controleer dan of elke regel nu bestaat als een app of aangepaste Functie. Een winkelwagen die de regel zou moeten activeren en één die dat niet zou moeten doen, zijn de snelste test.
- Gebruik de checkout-editor om vertrouwensbadges, bestelnotities, upsells of enquêtes toe te voegen vanuit geïnstalleerde apps, en preview vervolgens op mobiel, waar de meeste bestellingen plaatsvinden.
De meeste winkels kunnen dit afronden met bestaande apps. Maatwerk loont alleen bij unieke logica, zoals groothandelsregels, B2B‑velden of loyaliteit‑integraties.
Afrekenen uitbreidbaarheid voor ontwikkelaars
Als je bouwt voor Shopify, is het mentale model anders dan themewerk:
- Extensies worden uitgevoerd in een Web Worker zonder
windowof DOM. Bibliotheken die een van beide aanraken, zullen mislukken. - Elke oproep naar je backend is onbetrouwbaar. Authenticeer het met een sessie-token van
shopify.sessionTokenen controleer opnieuw prijzen en geschiktheid op de server. - Pin een
api_versionen upgrade op een schema. Shopify brengt elk kwartaal een nieuwe versie uit, en de nieuwste documentatie gaat uit van Preact en webcomponenten. - Publieke apps die netwerkaanroepen bevatten, hebben
network_accessin de TOML en goedkeuring voor netwerktoegang in het Partner Dashboard. Je server moet ook CORS-verzoeken beantwoorden. - Openbare apps die beschermde gegevens aanraken, worden nu geconfronteerd met strengere platformregels. Mijn artikel op de Shopify IP-toestaanlijstvereiste voor openbare apps dekt één recente wijziging.
Als een project een aangepaste backend, administratieve dashboard of integratie rond de extensie nodig heeft, valt dit onder mijn aangepaste webontwikkeling werk.
Veel voorkomende fouten bij uitbreidbaarheid van afrekenen
- Ervan uitgaande dat de extensie automatisch verschijnt. Het implementeren van een blok maakt het alleen maar beschikbaar. Een handelaar moet het nog steeds toevoegen in de afrekeningseditor, wat veel 'het werkt op mijn winkel'-tickets veroorzaakt.
- De 64 KB-budget overschrijden. Bibliotheken voor datum, pictogrampakketten en analysesoftware-SDK's tellen snel op. Importeer alleen wat je nodig hebt en bekijk de buildgrootte.
- Het kopiëren van oude tutorials. Code die importeert
@shopify/checkout-ui-extensions-reactof gebruikt React-haken zoalsuseApplyAttributeChangehoort bij oudere API-versies. Start nieuwe werkzaamheden op@shopify/ui-extensionsmet Preact. - Gebruiken
block_progressonzorgvuldig. Deze mogelijkheid laat een extensie toe om de koper te stoppen met doorgaan. Gebruik het alleen voor echte validatie en leg altijd uit waarom. - Vergeten tracking na een automatische upgrade. Omzet kan eruitzien alsof het is gedaald toen alleen de tag stopte met werken. Vergelijk bestellingen in Shopify met je advertentieplatforms.
- Een script herbouwen als een UI-extensie. Kortingen en verzendregels horen thuis in Functies op de server, niet in client-side code die een koper kan manipuleren.
- Alleen één lay-out of markt testen. Een‑pagina‑ en drie‑pagina‑checkouts, verschillende valuta’s en verschillende betaalmethoden gedragen zich allemaal anders.
Snelheid van afrekenen is net zo belangrijk als functies, daarom is het onderdeel van mijn Shopify-snelheidsoptimalisatiecontrolelijst. Als je tracking had op de oude pagina’s, is mijn handleiding voor migreren van pixels na de deprecatie van het scripttag gaat dieper en als je verkoopt via AI-assistenten, zie Agentic commerce op Shopify.
Veelgestelde vragen
Wat is Shopify checkout-extensibiliteit?
Shopify checkout extensibility is Shopify's app-gebaseerde systeem voor het aanpassen van checkout. Het gebruikt checkout UI-extensies voor interface-wijzigingen, Shopify Functions voor bedrijfslogica, webpixels voor tracking en brandinginstellingen voor ontwerp. Het verving checkout.liquid, aanvullende scripts, scripttags en Shopify Scripts, die nu allemaal zijn ingetrokken.
Wat was de deadline voor checkout-extensibiliteit?
Er waren verschillende. Plus-winkels verloren checkout.liquid op de Informatie-, Verzending- en Betalingsstappen op 13 augustus 2024 en op de bedank- en bestelstatuspagina's op 28 augustus 2025. Shopify Scripts stopten met werken op 30 juni 2026. Niet-Plus-winkels moesten hun bedank- en bestelstatuspagina's upgraden tegen 26 augustus 2026.
Is checkout.liquid verouderd?
Ja. Shopify's documentatie zegt dat checkout.liquid niet wordt ondersteund op de Informatie-, Verzending- en Betalingsstappen en is afgeschaft op de bedank- en bestelstatuspagina's op 28 augustus 2025. Er is geen manier om het weer in te schakelen in 2026, dus elke resterende aanpassing moet opnieuw worden gebouwd met checkout-extensibiliteit.
Wat zijn Shopify checkout UI-extensies?
Checkout UI-extensies zijn kleine, sandbox-apps die interface-elementen toevoegen, zoals velden, banners of upsells, aan gedefinieerde doelen in de afrekening, de Bedankt-pagina en de Bestelstatuspagina. Sinds API-versie 2025-10 worden ze gebouwd met Preact en Polaris-webcomponenten met behulp van de @shopify/ui-extensions pakket, met een bundelgrens van 64 KB.
Wordt @shopify/checkout-ui-extensions-react nog gebruikt?
Nee. Het was het oorspronkelijke pakket 2022‑2023 en werd laatst gepubliceerd in augustus 2023. Het werd opgevolgd door @shopify/ui-extensions-react, waarvan de laatste release‑lijn API‑versie 2025‑07 target, en vervolgens door @shopify/ui-extensions met Preact, wat Shopify's huidige documentatie gebruikt.
Kunnen niet-Plus winkels checkout-extensies gebruiken?
Ja, op de Bedankt- en Bestelstatuspagina's. Niet-Plus-winkels kunnen ook openbare apps gebruiken die Shopify Functions, app-pixels en basischeckout-branding bevatten. UI-extensies op de Informatie-, Verzending- en Betalingsstappen, aangepaste apps met Functions en API-gebaseerde branding hebben Shopify Plus nodig.
Wat zijn checkout-extensibiliteitsapps?
Dit zijn Shopify App Store-apps die zijn gebouwd op checkout-extensibiliteit, zoals apps voor enquêtes na aankoop, leveringsdata, cadeau-opties, upsells, loyaliteit en gelaagde kortingen. Zoek naar apps die checkout UI-extensies, Shopify Functies of app-pixels noemen en vermijd apps die nog steeds vragen om code in te voegen in extra scripts.
Wat gebeurt er als mijn winkel niet is geüpgraded?
De oude aanpassingen stoppen met werken. Bewerkingen van checkout.liquid, aanvullende scripts, scripttags op de Bedankt-pagina en Shopify Scripts worden niet langer uitgevoerd, en de pagina's vallen terug op de standaardversies van Shopify. Controleer Instellingen, Checkout om de versie van elke pagina te bevestigen, en vervolgens te herbouwen wat je verloor met apps, extensies, functies of pixels.
Volgende stappen
Controleer je kassa, bevestig dat tracking nog steeds werkt en verplaats eventuele verloren logica naar Functies of apps. Voor een voorbeeld van het Shopify Plus-werk dat ik doe, zie de Real Mad Honey casestudy, of bekijk meer Shopify- en WordPress-case studies. Heb je een checkout‑extensie nodig die gebouwd of gemigreerd moet worden naar Preact? Stuur me de details via mijn contactformulier.
Bronnen
- Shopify Dev: checkout.liquid (deprecatie- en stopzettingsdata)
- Shopify Changelog: Het thema bestand checkout.liquid wordt afgeschaft (13 februari 2023)
- Shopify Changelog: Aanpassingsrapport voor Plus-winkels (deadline 13 augustus 2024)
- Shopify Helpcentrum: Upgraden van bedank- en bestelstatuspagina's (niet-Plus)
- Shopify Dev Changelog: Shopify Scripts afgeschaft op 30 juni 2026
- Shopify Helpcentrum: Overstappen van Shopify Scripts naar Shopify Functions
- Shopify Dev: Bouw checkout-apps
- Shopify Dev: Checkout UI-extensies API-referentie
- Shopify Dev: Configuratie van Checkout UI-extensie
- Shopify Dev: Migreer naar Polaris-webcomponenten
- Shopify Dev: Shopify Functions
- Shopify Dev: Webpixels
- Shopify Dev: checkoutBrandingUpsert-mutatie
- npm: @shopify/checkout-ui-extensions-react en npm: @shopify/ui-extensions