Maatwerkopties in de Shopify cart drawer: keuzes én prijs

De klant kiest 184 × 92 cm, een stofswatch en cadeauverpakking. Op de productpagina staat €412,80. De cart drawer schuift open: kale variantprijs, geen centimeters, geen vinkje. Wie Shopify cart drawer maatwerkopties zoekt, wil die keuzes *én* de som in het paneel, niet alleen op `/cart`. Gecontroleerd op 12 november 2026: listing van Options Price Calculator (Works with: Checkout, Shopify Admin, AI, Ajax cart, Cart drawer, Slide out cart), docs Storefront Theme Bindings, How to Add the Extension to the Product Page, Draft order checkout en Shopify Help Adding variants. Wijzigt de listing die Works with-lijst, of Shopify de limiet van drie options / 2048 variants, dan herlees je die bronnen vóór je “het paneel toont altijd de formuleprijs” in een intern memo zet.

Op 6 november: ajax cart, de som in de drawer. Dat stuk is de prijs die blijft hangen op de oude variant. Hier is de volgende laag: wat de shopper in het paneel moet herkennen — de keuzes als regeltekst, de berekende prijs, eventueel de gepersonaliseerde thumbnail.

Native Shopify bewaart tekst, geen som

Adding variants (12 nov 2026): max drie options, max 2048 variants. Geen “100 variants”. Breedte per millimeter past daar niet in. Thema-inputs `properties[Breedte]` landen als line item properties. Dawn’s `cart-drawer.liquid` toont die properties vaak al — als de add-to-cart ze meestuurt. Ze wijzigen de prijs niet. De drawer toont dan keurig “184 cm”, naast €89,00. Dat is geen themabug. Dat is native gedrag.

Meer dan drie productopties lost het paneel niet op. Zie meer dan 3 productopties. Een extra option “Cadeau” eet een van de drie slots op en verdubbelt het raster. De drawer toont dan een extra variantnaam, geen formule.

Wat shops in de drawer zien tot de calculator meekomt

Alleen `/cart` testen

Theme settings staan op Drawer. De klant ziet `/cart` nooit. Op de cart-pagina kloppen properties en soms zelfs de som (na reload). Het paneel tekent opnieuw uit `/cart/add.js`. Eén groene test op `/cart` bewijst niks voor de slide-out.

Extra Liquid in `cart-drawer.liquid`

Een loop over `item.properties` toont de tekst. De prijs blijft de variant. Je hebt labels, geen calculator. Dat is het native-pad dat Shopify Help zelf noemt als workaround boven drie options.

Cart type op Page zetten

Dan verdwijnt het Ajax-probleem omdat alles herlaadt. Je levert de UX in die het thema verkocht. De listing belooft juist samenwerking met cart drawer en slide-out cart.

Wat de listing en de bindings wél doen

Live listing (12 nov 2026): Built for Shopify, 5.0 uit 30 reviews. Free: 20 uses, “Ultimate Plan for Free”. Starter $9.99: unlimited options, AI, formula builder, metafields, styling, multilingual. Premium $19.99: conditional logic, font picker, live preview, price breakdown, lookup tables. Hoogste kaart $39.99: show/hide, draft order checkout — dat is een andere checkout-route, niet “de drawer toont properties”. USD.

De calculator zelf is een theme app extension op de productpagina: onder de prijs, boven Add to cart. Zonder dat block is er niks om mee te sturen.

Docs Storefront Theme Bindings:

Bronnen onder de tabel: listing 12 nov 2026; Theme Bindings; Draft order checkout. Schuift live preview naar Starter, of verdwijnt Cart drawer uit Works with, dan hercheck je de rij “thumbnail” en de Works with-zin vóór je een Dawn-shop “klaar” noemt.

Cart line item image selectors mikken op de thumbnail in cart én cart drawer. Alleen relevant als de Customizer een per-order afbeelding op `__ooCustomImageUrl` zet. Verkeerde drawer-selector = preview op de PDP, stockshot in het paneel. Live preview zelf is Premium — zie live preview voor gepersonaliseerde producten als je die laag nodig hebt. Bindings na een themawissel: calculator theme bindings. Dit stuk eist die preview niet. Gordijnen met breedte × hoogte hebben hem zelden nodig.

Server-side price validation (docs Bindings): als de toggle aanstaat, controleren de cart bundle function en draft-order checkout de formuleprijs vóór de regel wordt geaccepteerd. Uit: `__ooCustomPrice` wordt vertrouwd. Dat is veiligheid, geen extra tekening in de drawer.

Draft order checkout (docs, listing $39.99) onderschept checkout-knoppen op cart page, mini-cart en drawer — maar alleen op pagina’s waar de app embed draait. Zonder embed gaat de klant de gewone Shopify-checkout in. Custom selector-voorbeeld in die docs: `#CartDrawer-Checkout`. Dat is een andere kaart dan “toon mijn centimeters in het paneel”.

Praktijk: jaloezieën, slide-out, geen extra SKU

Shop “Horizon Jaloezie”. Eén SKU per lameltype. Breedte en hoogte als number-velden. Stof als swatch. Cadeauverpakking als checkbox, waarde 4,50 — formule `product_price + (width * height) + gift_wrap`, zoals checkbox 0 of toeslag. Native raster tot 2048 lost de continue maat niet op.

Wat ik op 12 november 2026 wél zou doen, in deze volgorde:

1. Calculator-block op de productpagina. Zonder block geen velden, geen som, niks in de drawer.

2. Selector picker: prijs, productformulier, Add to cart. Dawn-defaults missen vaak de drawer-checkoutknop; die zit in Advanced settings als je draft checkout gebruikt. Voor de standaard drawer is de ATC op de PDP de poort.

3. Test in de drawer, niet op `/cart`. Zelfde maten, vinkje aan/uit, swatch wisselen. De regel moet centimeters, stofnaam en de som tonen.

4. Alleen als je Customizer-thumbnails wilt: cart line item image selectors voor het drawer-bestand van *dit* thema. Anders sla je die binding over.

5. Server-side validatie aan. Dat vangt een thema dat de oude variantprijs naar checkout duwt terwijl de drawer al €412,80 toonde.

Theme bindings na een themawissel opnieuw prikken. Docs Bindings: *After switching themes, re-run the selector picker.* Een nieuw slide-out-bestand is een nieuw selector-probleem, geen nieuwe formule.

Gratis plan: 20 uses. Een drawer-test telt als use als de calculator draait. Voor een live jaloezieënshop is Starter de kaart waar de formula builder onbeperkt op zit. Conditionals en live preview blijven Premium. Show/hide en draft checkout blijven $39.99.

Aan de slag

1. Open Options Price Calculator. Listing 12 nov 2026: Free 20 uses / Starter $9.99 / Premium $19.99 / $39.99. USD.

2. Zet het app-block op de productpagina (docs: onder prijs, boven Add to cart).

3. Koppel selectors. Test Add to cart tot de drawer opent.

4. Controleer of het thema `item.properties` in de drawer tekent. Dawn doet dat standaard voor properties die niet met `_` beginnen.

5. Pas daarna validatie. Draft checkout alleen als je die $39.99-kaart bewust wilt.

Tot slot

Shopify cart drawer maatwerkopties is geen extra Liquid-loop. Native properties zijn labels. De som komt mee als het productformulier, de ATC-knop en de embed de calculator-regel in de Ajax-cart krijgen — en als je dat in het paneel test, niet op `/cart`. Listing 12 nov 2026 noemt Cart drawer en Slide out cart onder Works with; dat is geen “werkt op elk thema zonder setup”. Bindings bestaan juist omdat thema’s hun drawer anders tekenen. Wijzigt Shopify de variantlimiet, of de listing de Works with-rij, dan hercheck je die twee zinnen. CTA blijft de listing van Options Price Calculator.