De checkout is de laatste stap voor een verkoop, en jarenlang was dat het lastigste deel van een Shopify-webshop om aan te passen. Shopify Plus-webshops bewerkten een bestand met de naam checkout.liquid, en alle andere webshops moesten de checkout nemen zoals hij was.
Dat is veranderd. Tegenwoordig kan elke Shopify-webshop de checkout tot op zekere hoogte aanpassen, met tools die blijven werken als Shopify zijn checkout bijwerkt. Deze gids legt uit wat je op elk abonnement kunt aanpassen, waarvoor je Shopify Plus nodig hebt en hoe de meest voorkomende checkout-aanpassingen worden gebouwd.
Wat er veranderde: Checkout Extensibility
Shopify heeft checkout.liquid vervangen door een set tools die het Checkout Extensibility noemt. In plaats van de code van de checkout te bewerken, pas je hem aan met vier bouwstenen:
- De checkout-editor, voor je huisstijl: je logo, kleuren en lettertypen.
- Checkout UI extensions, die blokken zoals banners, eigen velden en upsells toevoegen aan checkout-pagina’s.
- Shopify Functions, kleine stukjes maatwerklogica die binnen de checkout van Shopify draaien, voor kortingen en betaal- en verzendregels. Ze vervangen ook Shopify Scripts, de Ruby-scripts die Plus-webshops voor dezelfde taken gebruikten.
- Klantgebeurtenissen, waar trackingpixels nu thuishoren in plaats van in het oude vak ‘Aanvullende scripts’.
Het grote voordeel is dat deze aanpassingen updatebestendig zijn. Als Shopify een betaalmethode toevoegt of zijn checkout verbetert, blijven je aanpassingen gewoon werken.
Wat je op elk Shopify-abonnement kunt aanpassen
Branding in de checkout-editor
Ga in je Shopify-beheercentrum naar Instellingen → Afrekenen en klik op Aanpassen. In de checkout-editor voeg je je logo toe en stel je je kleuren en lettertypen in, zodat de checkout eruitziet als de rest van je webshop.
Checkout-instellingen
Op dezelfde instellingenpagina kies je hoe klanten worden benaderd, welke velden ze invullen, zoals bedrijfsnaam, adresregel 2 en telefoonnummer, of ze een fooi kunnen geven en hoe je toestemming voor marketing vraagt.
Betaal- en verzendregels
Apps uit de Shopify App Store die op Shopify Functions zijn gebouwd, kunnen op elk abonnement betaal- en verzendmethoden verbergen, hernoemen en herschikken. Je kunt bijvoorbeeld rembours verbergen boven een bepaald orderbedrag, of een verzendmethode een naam geven waarin de levertijd staat.
Kortingen op maat
De eigen kortingen van Shopify dekken de basis. Apps op basis van Shopify Functions voegen kortingen toe die verder gaan, zoals staffelkortingen, getrapte bestelkortingen en kortingen die alleen onder bepaalde voorwaarden gelden.
De bedankpagina en de orderstatuspagina
Met checkout UI extensions kun je op elk abonnement blokken toevoegen aan de bedankpagina en de orderstatuspagina, zoals een enquête, een bericht of een productaanbeveling.
Waarvoor je Shopify Plus nodig hebt
Twee dingen zijn alleen beschikbaar voor Shopify Plus-webshops:
- Blokken in de checkout-stappen zelf. Voor checkout UI extensions in de stappen voor informatie, verzending en betaling, zoals eigen velden, keurmerken, banners en upsell-blokken, heb je Shopify Plus nodig. Dat geldt voor blokken van elke app.
- Apps op maat met Shopify Functions. Elke webshop kan App Store-apps gebruiken die op Functions zijn gebouwd, maar alleen Plus-webshops kunnen een app op maat draaien die speciaal voor hen is gebouwd, met logica die uniek is voor hun bedrijf.
| Wat je wilt aanpassen | Elk abonnement | Shopify Plus |
|---|---|---|
| Logo, kleuren en lettertypen | Ja | Ja |
| Formuliervelden, fooien en toestemmingsinstellingen | Ja | Ja |
| Betaal- en verzendregels (App Store-apps) | Ja | Ja |
| Kortingen op maat (App Store-apps) | Ja | Ja |
| Blokken op de bedankpagina en de orderstatuspagina | Ja | Ja |
| Blokken en eigen velden in de checkout-stappen | Nee | Ja |
| Apps op maat met Shopify Functions | Nee | Ja |
Zo pas je de Shopify-checkout aan, stap voor stap
- Zet op een rij wat je wilt aanpassen en waarom. Elke aanpassing moet een echt probleem oplossen, zoals mislukte remboursbestellingen of een lage gemiddelde orderwaarde.
- Begin met de instellingen en de checkout-editor. Voor veel aanpassingen, zoals je huisstijl en formuliervelden, heb je helemaal geen app nodig.
- Gebruik een app uit de App Store voor regels en kortingen. Kies apps die op Shopify Functions zijn gebouwd, zodat de regels native in de checkout draaien.
- Voeg op Shopify Plus blokken toe waar ze helpen. Voeg app-blokken toe in de checkout-editor, of laat een developer UI extensions en Functions op maat bouwen.
- Test voordat klanten het zien. Plaats testbestellingen op een telefoon en een desktop, met je kortingen, verzendzones en betaalmethoden. Onze BFCM-checklist bevat een volledige checkout-test.
Veelvoorkomende checkout-aanpassingen en hoe je ze bouwt
| Aanpassing | Zo wordt het gebouwd | Abonnement |
|---|---|---|
| Rembours verbergen boven een orderbedrag | Betaalregel (Function) | Elk |
| Levertijden tonen in de namen van verzendmethoden | Verzendregel (Function) | Elk |
| Koop 3, bespaar 10% | Korting (Function) | Elk |
| Voortgangsbalk voor gratis verzending of upsell in de checkout | Checkout UI extension | Plus |
| Veld voor een cadeaubericht of bezorginstructies | Checkout UI extension | Plus |
Op abonnementen zonder Shopify Plus kun je extra gegevens, zoals een cadeaubericht, nog steeds op de winkelwagenpagina verzamelen, voordat shoppers bij de checkout komen.
Checkout Engine, onze app voor checkout-regels, regelt de eerste drie rijen zonder code, plus upsell- en vertrouwensblokken voor Shopify Plus-webshops. De app is volledig gebouwd op Shopify Functions en Checkout UI Extensions.
Overstappen van checkout.liquid of Shopify Scripts
Gebruikte je webshop checkout.liquid, aanvullende scripts of Shopify Scripts? Dan heeft elke aanpassing een nieuwe plek nodig:
- Kortingen en betaal- en verzendregels uit Scripts worden Shopify Functions.
- Content en velden die aan checkout.liquid zijn toegevoegd, worden checkout UI extensions.
- Trackingcode uit de aanvullende scripts verhuist naar klantgebeurtenissen.
Begin met een audit van wat er nu draait, bouw daarna elk onderdeel opnieuw en test het voordat je overstapt. Onze dienst voor Shopify Plus-ontwikkeling doet precies dit, van het team dat Checkout Engine op Shopify Functions bouwde.
Wanneer je een developer inschakelt
Een app is de snelste route als die doet wat je nodig hebt. Een developer is de moeite waard als:
- je regels afhangen van data die alleen jouw bedrijf heeft, zoals klantniveaus uit een ERP;
- meerdere regels op elkaar inwerken en je ze samen wilt laten testen;
- je op Shopify Plus zit en een app op maat met Functions wilt die speciaal voor je webshop is gebouwd.
Ons team voor Shopify-apps op maat bouwt dit soort checkout-logica, kortingen en koppelingen. Plan een gratis strategiegesprek om te bespreken wat je checkout nodig heeft.
Veelgestelde vragen
Kan ik de Shopify-checkout aanpassen zonder Shopify Plus?
Ja, binnen grenzen. Op elk abonnement kun je de checkout in je huisstijl zetten met de checkout-editor, de checkout-instellingen wijzigen, apps uit de App Store gebruiken die op Shopify Functions zijn gebouwd voor betaal-, verzend- en kortingsregels, en blokken toevoegen aan de bedankpagina en de orderstatuspagina. Voor blokken in de checkout-stappen zelf heb je Shopify Plus nodig.
Kan ik checkout.liquid nog gebruiken?
Nee. Shopify heeft checkout.liquid vervangen door Checkout Extensibility: de checkout-editor, checkout UI extensions en Shopify Functions. Aanpassingen die checkout.liquid gebruikten, moeten opnieuw worden gebouwd met deze tools.
Wat zijn Shopify Functions?
Kleine stukjes maatwerklogica die in de winkelwagen en checkout van Shopify zelf draaien, voor taken als kortingen en betaal- en verzendregels. Ze vervangen Shopify Scripts en blijven werken als Shopify zijn checkout bijwerkt.
Kan ik eigen velden toevoegen aan de Shopify-checkout?
Op Shopify Plus wel, met checkout UI extensions. Op andere abonnementen kun je extra gegevens, zoals een cadeaubericht, al op de winkelwagenpagina verzamelen, voordat shoppers bij de checkout komen.