Shopify Checkout Extensibility: wat kun je nu echt aanpassen?

Shopify Checkout Extensibility: wat kun je nu echt aanpassen?

Shopify heeft checkout.liquid per augustus 2024 verwijderd voor nieuwe Shopify Plus-merchants en per augustus 2025 voor alle bestaande merchants. De vervanger heet Checkout Extensibility. Meer flexibiliteit, maar ook een ander paradigma. Wat kun je nu daadwerkelijk aanpassen — en waar loop je alsnog vast?

Dit artikel geeft een eerlijk beeld. Geen marketingpraatje, maar een technische beschrijving van wat het systeem wel en niet kan.

Wat je leert in dit artikel

• De drie lagen van Checkout Extensibility: UI Extensions, Functions en Branding API
• Concrete aanpassingen die je kunt maken per laag
• Harde limieten waar je niet omheen kunt
• Wanneer Checkout Extensibility voldoet en wanneer niet
• Hoe wij complexe checkout-vereisten aanpakken

De drie lagen van Checkout Extensibility

Shopify heeft Checkout Extensibility opgebouwd uit drie afzonderlijke technologieën, elk met een eigen doel en eigen beperkingen.

1. Checkout UI Extensions

UI Extensions laten je React-componenten toevoegen aan specifieke plekken in de checkout. Shopify definieert extensiepunten — posities in de checkout-flow waar je een component kunt injecteren.

Beschikbare extensiepunten (selectie):

• purchase.checkout.block.render — blok toevoegen tussen bestaande secties
• purchase.checkout.delivery-address.render-before — content voor het adresformulier
• purchase.checkout.shipping-option-list.render-after — content na bezorgopties
• purchase.checkout.payment-method-list.render-after — content na betaalmethoden
• purchase.checkout.order-summary.render-before — content voor de ordersamenvatting
• purchase.thank-you.block.render — content op de bedankpagina

Een voorbeeld van wat je hiermee kunt bouwen:

// Extensie: upsell-blok in de checkout
import {
  reactExtension,
  BlockStack,
  Button,
  Text,
  Image,
  useCartLines,
  useApplyCartLinesChange,
} from '@shopify/ui-extensions-react/checkout';

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

function UpsellBlock() {
  const cartLines = useCartLines();
  const applyCartLinesChange = useApplyCartLinesChange();

  // Toon upsell op basis van wat er al in de cart zit
  const suggestedProduct = getSuggestion(cartLines);

  if (!suggestedProduct) return null;

  return (
    <BlockStack>
      <Text>Vergeet dit niet:</Text>
      <Image source={suggestedProduct.image} />
      <Text>{suggestedProduct.title}</Text>
      <Button
        onPress={() => applyCartLinesChange({
          type: 'addCartLine',
          merchandiseId: suggestedProduct.variantId,
          quantity: 1,
        })}
      >
        Voeg toe — {suggestedProduct.price}
      </Button>
    </BlockStack>
  );
}

• Productaanbevelingen en upsells tonen
• Consent checkboxes toevoegen (b.v. marketing-opt-in of leeftijdsvergrendeling)
• Giftwrap-opties aanbieden
• Aanvullende formuliervelden tonen (b.v. PO-nummer, leverinstructies)
• Loyalty points tonen en inwisselen
• Aangepaste validatiemeldingen weergeven

• Bestaande Shopify UI-elementen verwijderen of verplaatsen
• De volgorde van de checkout-stappen wijzigen
• Toegang tot de volledige DOM
• Eigen CSS injecteren buiten de Branding API

2. Shopify Functions

Functions zijn server-side stukken logica die draaien op Shopify's infrastructuur. Ze zijn geschreven in WebAssembly (Rust of AssemblyScript) of JavaScript en worden uitgevoerd bij specifieke momenten in het bestelproces.

Beschikbare Function API's:

Een praktisch voorbeeld — verzendoptie verbergen op basis van postcode:

// shopify_function/src/index.js
export function run(input) {
  const { cart, deliveryGroups } = input;

  const postcode = cart.deliveryGroups[0]?.deliveryAddress?.zip;
  const isEiland = ['1791', '1792', '1793', '1794', '1795', '1796', '1797'].includes(
    postcode?.substring(0, 4)
  );

  const operations = deliveryGroups.flatMap(group =>
    group.deliveryOptions
      .filter(option => option.title.includes('Avondbezorging') && isEiland)
      .map(option => ({
        hide: { deliveryOptionHandle: option.handle }
      }))
  );

  return { operations };
}

• Eigen kortingslogica implementeren (B2B-prijzen, volume-kortingen per klantengroep)
• Verzendopties dynamisch aanpassen per adres of cart-inhoud
• Betaalmethoden tonen of verbergen (b.v. factuur alleen voor bedrijven)
• Cart-validatie toevoegen (b.v. minimale orderwaarde per productcategorie)

• Externe API calls doen tijdens uitvoering (latency-beperking)
• State bewaren tussen aanroepen
• Toegang tot klantdata buiten het input-object

3. Branding API

De Branding API laat je de visuele stijl van de checkout aanpassen. Niet via CSS, maar via een configuratie-laag die Shopify vertaalt naar veilige stijlregels.

// checkout-branding aanpassen via Admin API
const brandingInput = {
  designSystem: {
    colors: {
      schemes: {
        scheme1: {
          base: {
            background: '#FFFFFF',
            text: '#1A1A1A',
          },
          primaryButton: {
            background: '#0066CC',
            text: '#FFFFFF',
            hover: {
              background: '#0052A3',
            },
          },
        },
      },
    },
    typography: {
      primary: {
        base: { sources: 'font-family: "Inter", sans-serif;' },
        bold: { weight: 700 },
      },
    },
    cornerRadius: {
      base: 4,
      large: 8,
    },
  },
  customizations: {
    header: {
      position: 'inline',
      alignment: 'start',
    },
    orderSummary: {
      backgroundImage: null,
    },
  },
};

• Kleuren, lettertypen, border-radius aanpassen
• Logo en header-layout instellen
• Achtergrondafbeeldingen instellen
• Knopstijlen configureren

• De layout structureel omgooien
• Willekeurige CSS injecteren
• Elementen verplaatsen of verbergen via stijlen

Harde limieten die je moet kennen

Je kunt geen checkout-stappen samenvoegen of splitsen

De klassieke wens: een one-page checkout. Alles op één scherm, geen stappenvolgorde. Dat is niet mogelijk met Checkout Extensibility. Shopify bepaalt de stappen.

Je kunt de checkout sneller laten aanvoelen via Shop Pay of express checkout buttons (Apple Pay, Google Pay, PayPal), maar de standaard checkout heeft altijd de Shopify-bepaalde structuur.

Geen toegang tot externe API's vanuit Functions

Functions draaien met een strikte uitvoeringstijd (<5ms voor de meeste API's) en mogen geen externe HTTP-verzoeken doen. Alle data die je nodig hebt, moet via Shopify's metafields of metaobjects beschikbaar zijn.

Dit is een fundamentele beperking voor B2B-scenario's waarbij je klantspecifieke prijzen wil ophalen uit een extern systeem. Workaround: prijzen vooraf synchroniseren naar Shopify metafields, Functions leest die vervolgens uit.

UI Extensions zijn sandboxed

Je React-componenten hebben geen toegang tot de omliggende pagina, geen DOM-manipulatie, geen externe scripts. Ze communiceren alleen via de officiële extension API's.

Dit betekent dat trackingscripts, chat-widgets of third-party formulieren niet werken binnen een UI Extension. Voor third-party pixel tracking gebruik je de Customer Events API.

Wanneer Checkout Extensibility voldoet

Wanneer Checkout Extensibility niet voldoet

Migreren van checkout.liquid: wat kost het echt?

Dit is waar merchants voor verassingen komen te staan. checkout.liquid had volledige vrijheid: je kon alles aanpassen, alles toevoegen, alles verwijderen. Veel merchants hebben jaren lang aanpassingen gestapeld.

Die aanpassingen verplaatsen naar Checkout Extensibility is geen één-op-één migratie. Voor elke aanpassing moet je evalueren: is dit haalbaar met een UI Extension, een Function, de Branding API — of helemaal niet?

Typische tijdsinschatting per aanpassingscategorie:

Gemiddeld zien wij een migratietraject van 20-40 uur voor merchants met een matig gecustomiseerde checkout.liquid. Bij zwaar gecustomiseerde checkouts kan dat oplopen tot 80-120 uur.

Customer Events API: tracking en pixels

Een veelgestelde vraag: werken mijn marketing-pixels nog na de migratie? Google Analytics 4, Facebook Pixel, TikTok Pixel — al die scripts die je ooit in checkout.liquid geplakt hebt.

Antwoord: ja, maar anders. Shopify heeft de Customer Events API gebouwd als de officiële manier om tracking-pixels in de checkout te plaatsen.

// Customer Event pixel voor GA4
analytics.subscribe('checkout_completed', (event) => {
  const { checkout } = event.data;

  gtag('event', 'purchase', {
    transaction_id: checkout.order.id,
    value: checkout.totalPrice.amount,
    currency: checkout.totalPrice.currencyCode,
    items: checkout.lineItems.map(item => ({
      item_id: item.variant.sku,
      item_name: item.title,
      quantity: item.quantity,
      price: item.finalLinePrice.amount / item.quantity,
    })),
  });
});

Pixels die je configureert via de Customer Events API draaien in een sandboxed omgeving. Ze hebben geen toegang tot de volledige pagina-DOM, maar wel tot de standaard checkout-events.

Voor merchants die server-side tracking gebruiken (via Shopify webhooks of een CDP), verandert er minder. Client-side pixels vereisen herconfiguratie.

Praktijkervaring

Wij hebben meerdere Shopify Plus-merchants geholpen migreren van checkout.liquid naar Checkout Extensibility. De conclusie: voor 80% van de use cases is het nieuwe systeem beter — stabieler, veiliger, makkelijker te onderhouden.

De overige 20% zijn cases waarbij merchants diepgaande customisatie hadden in checkout.liquid die simpelweg niet te repliceren is. Daar moet je creatief zijn met de architectuur — of accepteren dat bepaalde wensen niet haalbaar zijn op Shopify.

Lees ook ons artikel over Shopify Plus: wat kost het echt? voor een realistisch beeld van de total cost of ownership. De officiële Shopify Checkout Extensibility documentatie bevat de volledige API-referentie. Bekijk onze Shopify diensten voor een overzicht van onze aanpak.