Live prijs op Shopify productpagina: het totaal beweegt mee

Een klant typt 120 × 180 cm, vinkt een coating aan, en verwacht dat het bedrag meebeweegt. Stilstaande variantprijzen voelen als een offerte-formulier: je mag iets invullen, maar je weet pas later wat het kost. Live prijs op Shopify productpagina is precies die ontbrekende feedbacklus — het totaal op de productpagina volgt elke input, en dezelfde berekening moet in checkout belanden.

Shopify doet dat niet uit zichzelf. Een variant heeft een vaste prijs. Number fields in Liquid of een losse JavaScript-widget kunnen een bedrag *tonen*, maar de cart blijft op de SKU-prijs staan tenzij je een cart transform of een app tussenlegt. Merchants lopen daar dagelijks tegenaan, van tafelkleden met een custom calculator tot prijs per square inch die auto moet berekenen.

Dit artikel legt uit waarom native Shopify een live totaal niet afhandelt, wat er misgaat met “alleen een spannetje updaten”, en hoe Options Price Calculator velden, formule en storefront-prijs aan elkaar koppelt — inclusief waar de Premium price breakdown begint.

Waarom de prijs op de productpagina stil blijft

Volgens Adding variants mag een product maximaal drie options en 2048 variants hebben. De variantcap ging in oktober 2025 van 100 naar 2048 (changelog). Dat helpt bij grote maar eindige catalogi. Het lost geen continue maten op: elke millimeter als SKU is onhaalbaar, en drie opties zijn snel vol met kleur, stof en zoom.

Een vaste variantprijs kan niet “meedenken” als de klant 137 cm invoert. Je hebt twee lagen nodig:

1. Invoer op de productpagina (getallen, keuzes, bestanden).

2. Een bedrag dat zowel in de UI als in de cart klopt.

Zonder die tweede laag krijg je een mooie calculator die de winkelwagen niet aanpast. In developer-threads zoals How do I calculate product price based on dimensions in inputs? is de storefront-UI vaak klaar — twee velden, een live totaal — terwijl checkout nog steeds de variant factureert. Het antwoord daar is een Cart Transform of een app die die functie al meelevert.

Wat shops nu proberen — en waar het stukloopt

1. Custom Liquid of JavaScript die alleen een spannetje wijzigt

Je vermenigvuldigt breedte × hoogte in de browser en zet het resultaat in een `<span>`. Dat voelt als live prijs, tot iemand op Add to cart klikt. In Is there a way to dynamically change price using js berekent een merchant de prijs al in JS en bewaart maten als order notes — maar checkout volgt die berekening niet. Notes en line item properties zijn tekst voor fulfillment; ze wijzigen de prijs niet. Dat hebben we eerder uitgewerkt in Shopify line item properties wijzigen de prijs niet.

2. Elke cel als variant

Een matrix (breedte × hoogte × materiaal) lijkt overzichtelijk in Excel. Op Shopify explodeert het naar honderden SKU’s, voorraad per cel is betekenisloos, en de klant zoekt in een ellenlange dropdown. Met 2048 slots heb je meer ruimte dan vroeger — nog steeds geen functie `width * height * rate`.

3. Quantity-as-price of range-varianten

Workarounds uit de community: baseer je op een laagste prijs en verhoog de quantity, of maak range-gebonden varianten. Dat kan voor donaties of grove stappen. Voor made-to-measure in millimeters is het fragiel, onduidelijk voor de klant, en lastig bij kortingen of Markets.

4. Handmatige offertes

Mailen blijft veilig, maar je verliest self-serve checkout. Elke “hoeveel kost 2,4 × 1,1 m?” is een ticket in plaats van een order.

Hoe Options Price Calculator de live prijs koppelt

Options Price Calculator (Built for Shopify) voegt onbeperkte productopties toe en berekent een dynamische prijs zonder extra varianten. De klant ziet het totaal updaten terwijl hij typt of kiest; dezelfde berekening gaat mee naar de cart. De app is geen agency-intake: je installeert, zet een app block, schrijft een formule en linkt producten.

Velden die variabelen worden

In de calculator maak je number fields, dropdowns, swatches, checkboxes, file upload en meer. Elke field key is een variabele in de formule. Volgens de docs over Variables and Field Values updaten die waarden dynamisch terwijl de klant met de calculator werkt. Een checkbox levert de geconfigureerde waarde of `0`. Een dropdown levert de numerieke value van de gekozen optie. `product_price` is altijd de prijs van de actieve variant — wissel van SKU en de basis beweegt mee.

De formule die het totaal voedt

In de formula builder schrijf je een expressie die een getal oplevert: `+ − × ÷` en haakjes. Een docs-voorbeeld voor oppervlakte:

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

Of met setupkosten, uit de pricing examples:

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

Hoe je die expressie opbouwt (afronden, metafields, computed properties) staat dieper in prijsformule op Shopify productpagina. Voor live prijs is het kernpunt: de storefront-prijs is het resultaat van die formule, niet een aparte display-laag die je zelf in Liquid bijhoudt.

De prijsselector in je thema

Thema’s renderen de prijs op verschillende plekken. Daarom bestaat de Selector Picker: je klikt op de prijs op je productpagina, de app vult de CSS-selector in, en updates landen op het juiste element. Zelfde flow voor Add to cart (en optioneel product image voor de Premium personalizer). Na een theme-switch opnieuw picken — dat voorkomt een “live” berekening die nergens zichtbaar is.

App block op de product template

De calculator verschijnt via een theme app extension. In How to Add the Extension to the Product Page: Theme Editor → product template → Add block → Options Price Calculator, bij voorkeur onder de prijs en boven Add to cart. Daarna een product openen, opties wijzigen, en controleren dat de prijs meeloopt. Link de calculator aan de juiste variant via Linking Products & Variants.

Safety: niet alleen CSS

De berekende prijs gaat mee als line item property; met server-side price validation (aan te raden zodra je end-to-end getest hebt) verifieert de cart-bundlefunctie het bedrag tegen een server-signatuur. Zo blijft live prijs niet alleen een browsertruc.

Wat Premium toevoegt (en wat niet)

Het meebewegen van het totaal via formule en opties zit in de kern van de app (Starter: unlimited options, formula builder, AI-hulp bij velden/formules). Premium ($14.99/mo) voegt onder meer toe:

• Real-time price breakdown (tabel of tekst) — de klant ziet *waaruit* het totaal bestaat;

• Conditional logic / conditional pricing;

• Product Personalizer — live preview op de productafbeelding;

• Font picker.

Breek die features niet plat tot “alles is gratis”. De Free-plan dekt 20 uses; Develop-stores blijven gratis volgens de listing.

Voorbeeld: print of stof waar elke cm telt

Stel: vinyl print, tarief per m², vaste setup van €25, materiaal-multiplier via dropdown. Velden: `width` en `height` (number), `material_type` (dropdown met `1` / `1.2`). Formule in de geest van de docs:

``` Math.round((product_price + 25 + (width * height * material_type)) * 100) / 100 ```

De klant typt 1,2 × 0,8, kiest mesh, en ziet het bedrag direct. Geen 400-rijige variantlijst. Fulfillment ziet de maten en keuzes op de orderregel; desgewenst ook in de bevestigingsmail via de app-instelling daarvoor.

Hetzelfde patroon geldt voor stof per strekkende meter (`product_price * meters`), cadeauverpakking (`product_price + gift_wrap`), of een toeslag bij file upload. De live feedback is het verschil tussen “ik gok en hoop” en “ik bestel met vertrouwen”.

Wat je nodig hebt om te starten

1. Installeer Options Price Calculator vanuit de Shopify App Store.

2. Voeg het app block toe op je product template (stappen).

3. Bouw velden en een formule; test met preview-waarden.

4. Koppel de calculator aan product/variant.

5. Gebruik Pick price (en Pick add to cart) zodat het thema-element meeloopt.

6. Zet server-side validatie aan als de flow klopt.

7. Optioneel Premium: price breakdown of live preview als je visual personalisatie nodig hebt.

Listing (augustus 2026): 5.0 uit 22 reviews, Free / Starter ($9.99) / Premium ($14.99), allemaal USD.

Tot slot

Live prijs op Shopify productpagina is geen cosmetische update van een bedrag in HTML. Het is een formule die de klant ziet *én* die checkout belast — zonder een variant per millimeter. Native Shopify stopt bij drie options en vaste SKU-prijzen; line item properties en JS-widgets vullen die gap niet. Met Options Price Calculator zet je de feedbacklus dicht: typen → totaal beweegt → cart klopt.

Klaar om het totaal live te laten meebewegen? Installeer Options Price Calculator en test één product end-to-end vandaag nog.