Shopify prijsvalidatie server-side: de cart moet dezelfde som zien

Een prijscalculator op de productpagina voelt klaar als het bedrag live meeloopt. Breedte wijzigt, het totaal springt. Tot iemand met DevTools het getoonde bedrag aanpast — of tot je merkt dat de cart de variantprijs pakt en jouw JavaScript negeert. Shopify prijsvalidatie server-side is het verschil tussen “de pagina toont €186” en “checkout rekent hetzelfde bedrag, of weigert de regel”.

Native Shopify prijst de gekozen variant, niet een som. Volgens Adding variants mag een product maximaal drie options en maximaal 2048 variants hebben. Die variantcap ging in oktober 2025 van 100 naar 2048 (changelog). Handig als S/M/L echte SKU’s zijn. Onbruikbaar als elke centimeter een andere cel is, of als je prijsformule in de browser blijft hangen.

In de Community zie je hetzelfde knelpunt. In How can I update the Cart line price to a custom price werkt een width/height-script op de productpagina, maar de cart-regel blijft de catalogusprijs. In Custom price for my product at runtime wil een hekwerkshop eigen maten laten invullen; JavaScript toont een som, checkout niet. Dit artikel legt uit waarom dat zo is, wat je niet in Liquid moet forceren, en hoe Options Price Calculator de berekende prijs via de cart-engine laat controleren.

Een getoonde prijs is nog geen cart-prijs

Shopify behandelt de variantprijs als bron van waarheid. Wat je in het thema overschrijft — een span met een nieuwe `innerText`, een hidden input, een “totaal” naast de knop — is presentatie. De Ajax cart en checkout lezen de catalogus, niet jouw DOM.

Line item properties maken dat nog verwarrender. `<input name="properties[Breedte]">` bewaart de centimeters op de orderregel. Fulfillment ziet 240 cm. De prijs verandert niet. We schreven dat bij Shopify line item properties en prijs. Dezelfde valkuil als een custom calculator-widget: in Custom product calculator lijkt de pagina klaar, tot de klant €12 extra voor een zoom niet in de checkout terugziet.

Een toeslag via `/cart/add.js` zonder server-logica stuit op hetzelfde plafond. In How to Add Extra $10 Based on Custom Form Selection gaan de keuzes wél mee als properties, de +$10 niet — tenzij je een fee-SKU, een draft order of een cart transform gebruikt. Prijs wijzigen hoort op Shopify’s servers, niet in een thema-script dat een klant kan herschrijven.

Wat shops nu proberen — en waar het stukloopt

1. Alleen de productpagina “fixen”

Een Liquid-snippet herberekent m² en schrijft het resultaat in `.price`. De cart toont de oude SKU. Shop Pay slaat je snippet over. Je hebt een demo, geen orderbedrag.

2. Elke cel als variant

Een matrix breedte × hoogte als honderden SKU’s raakt de drie-optiegrens zodra materiaal erbij komt. Tampering lost het niet op: de klant kiest de goedkoopste cel. Continue millimeters passen sowieso niet in variants.

3. Een fee-product of “niemand opent DevTools”

“Setup €25” als losse regel verdwijnt uit het mandje. En voor print of stof per meter is één gewijzigde nul een driecijferig verschil. Zonder servercheck is de custom price een voorstel.

De som horen in een formule, de check op de server

Houd native variants voor voorraadbare combinaties: een stofcollectie, een basismateriaal met eigen SKU. Continue maten, toeslagen en de controle van het berekende bedrag horen in velden plus een formule, en daarna in de cart-engine.

Options Price Calculator is daarvoor gebouwd: number inputs, dropdowns, checkboxes, file upload, en een formula builder die de prijs live bijwerkt. Geen extra variant per centimeter. De app is Built for Shopify (listing: 5.0 uit 25 reviews) en werkt via een theme app extension. Berekende prijzen gaan via de cart bundle function; dat is precies de plek waar server-side price validation het bedrag opnieuw toetst.

De storefront schrijft de berekende prijs naar een line item property. Zonder safety-toggle neemt de cart-engine dat getal over. Met de toggle aan hoort bij elke calculatorregel een server-handtekening, een payload-hash en de oorspronkelijk geciteerde prijs. De cart bundle function herberekent de handtekening met de pricing keys van de shop en weigert de regel als de signature niet klopt of het bedrag is veranderd. Hetzelfde checkt de draft-order checkout voordat er een draft wordt aangemaakt. Faalt de check, dan volgt er geen expand voor die regel — de gemanipuleerde prijs komt niet in de order.

Dat is geen Premium-feature. Conditional logic, live preview / Product Personalizer, font picker en de real-time price breakdown zitten op Premium ($14.99/maand). De safety-toggle staat in de globale Theme settings, naast “Show currency with prices”, en geldt voor elke calculator in de shop. Je zet hem niet uit via een storefront-property; de schakelaar leeft alleen op de server. Pricing keys beheert de app zelf — je hoeft ze niet te kopiëren of te roteren.

Standaard staat de toggle uit. Nieuwe shops, en shops die Theme settings nooit hebben geopend en opgeslagen, worden als OFF behandeld — ook als andere settings al bestaan. Dat is bewust: eerst de calculator end-to-end testen, daarna de extra laag. De docs raden aan hem aan te zetten zodra cart en checkout hetzelfde bedrag tonen als de productpagina; voor normale shoppers voegt de check geen merkbare vertraging toe.

De formule zelf blijft merchant-werk. Uit de Pricing / Formula Examples:

``` product_price + (width * height) ```

Of met setup:

``` product_price + 25 + (width * height) ```

De validatie vraagt niet om een andere som. Ze eist dat de som die de klant zag, dezelfde is als de som die de cart accepteert. Hoe je die som opbouwt — metafield-tarief, `Math.round`, of een Premium if/then voor een vloer — staat in prijsformule op de Shopify-productpagina.

Voorbeeld: spandoek waarbij één nul telt

Stel: mesh-spandoek, €12 per m², eenheden in meters. Setup €25 voor zoom en ringen. Productprijs in Shopify is €0 of een klein startbedrag; de calculator doet het werk.

1. Number input `width`, min 0.5, max 8, key `width`.

2. Number input `height`, min 0.5, max 3, key `height`.

3. Dropdown `materiaal` met multipliers 1 / 1.25 (mesh / blockout).

4. Formule:

``` product_price + 25 + (width * height * 12 * materiaal) ```

2,00 × 1,00 m mesh = €25 + €24 = €49. Iemand die in DevTools `__ooCustomPrice` naar `4.90` zet, moet bij een aanstaande checkout tegen de signature aanlopen — niet tegen jouw goodwill. Zet de safety-toggle pas aan nadat jij zelf 2 × 1 m in de cart hebt gelegd en hetzelfde €49 terugziet, inclusief de optieregels op de order.

Min/max op de number fields is een *maat*-hek, geen prijshek. Een toegestaan klein formaat kan nog te goedkoop uit de som komen; daarvoor is `Math.max` of Conditional Pricing op Premium. De servercheck bewijst het bedrag; hij verzon geen minimum. Theme bindings horen kloppen: Storefront Theme Bindings wijzen naar prijs en Add to cart. Na een theme-switch opnieuw de selector picker. Live preview / Product Personalizer is andere Premium-functionaliteit — die heb je niet nodig voor een prijscheck.

Aan de slag zonder je catalogus te verbouwen

1. Installeer Options Price Calculator. Free: 20 uses, op een develop-store altijd gratis. Starter ($9.99) voor de formula builder; Premium alleen als je if/then, preview of breakdown wilt.

2. Volg How to install the app en zet het app block op het producttemplate: How to Add the Extension to the Product Page.

3. Number fields en formule. Keys worden variabelen (Variables and Field Values). Zie Using the Formula Builder.

4. Link aan product of variant: Linking Products & Variants.

5. Test cart en checkout met een kleine en een grote maat. Opties moeten op de orderregel staan.

6. Open Settings → Price settings, vink Enable server-side price validation (safety feature) aan, druk Save. Of via de Safety rules-stap in de dashboard-setup. Uitleg: Server-side price validation.

Gebruik je draft-order checkout, dan geldt dezelfde toggle vóór de draft wordt gemaakt. Zonder Save op Theme settings valt de storefront terug op standaard checkout of op een ongetekende custom price — afhankelijk van welke schakelaar je vergat.

Overzicht van velden, formules en settings: Options Price Calculator-docs.

Tot slot

Shopify prijsvalidatie server-side is geen extra variant en geen wantrouwen naar je thema. Het is de afspraak dat de som op de productpagina dezelfde is als de som in de cart. Native Shopify stopt bij drie options en SKU-prijzen; een continue maat plus een formule past daar niet in, en een DOM-update haalt checkout niet.

Zet de calculator eerst end-to-end goed. Zet daarna de safety-toggle aan, zodat een gewijzigd bedrag geen expand krijgt. Installeer Options Price Calculator en laat de cart dezelfde som zien als je klant.