Shopify realtime prijsopbouw tonen: de som vóór Add to cart

De prijs op je productpagina springt van €89 naar €214 als iemand 180 × 240 invult en voering aanzet. Dat is correct. Voor de koper is het een sprong. Wie Shopify realtime prijsopbouw tonen wil, zoekt geen extra SKU en geen PDF-offerte. Die wil op dezelfde pagina zien: stof zoveel, setup zoveel, voering zoveel, totaal zoveel — vóór Add to cart.

Native Shopify laat één bedrag zien: de variantprijs. Een thema-regel `properties[Breedte]` belandt op de order, maar wijzigt die prijs niet. Options Price Calculator rekent wél live. Op Premium kun je die som ook uitsplitsen: Calculation display — tabel of zin, display-only, naast de velden.

Dit is geen live preview op de productfoto. Daar gaat het om tekst of logo op het plaatje. Hier gaat het om geld: waarom dit totaal, nu, op deze pagina.

Eén bedrag is geen uitleg

Adding variants laat maximaal drie options per product en maximaal 2048 variants. Maat, kleur, stof vullen die drie. “Prijsregel” als option bestaat niet. Elke extra toeslag als variant-value eet een van je drie slots en maakt een SKU die het magazijn nooit pakt.

Wat native wél kan: voorraad per echte combinatie. Wat native niet kan: een continue centimeter, een prijs = oppervlakte × tarief zonder cel per maat, of een tabel die de som voordoet. Line item properties bewaren invoer. Checkout houdt de vaste variantprijs.

Daarom groeit de chat: “zit montage erin?”, “is voering extra?”, “waarom is 200 cm ineens zoveel duurder?”. Die vragen horen niet in WhatsApp. Ze horen in de rijen onder het totaal.

Wat shops nu doen tot de inbox vol zit

“Vanaf”-prijs plus een FAQ

De productprijs is de kleinste jaloezie zonder voering. Onder de knop een alinea: *montage €25, voering +18%*. De koper leest dat niet. Fulfillment wel, als de order te laag binnenkomt.

Een screenshot van Excel in de beschrijving

Drie kolommen, een PNG, verouderd na de eerste tariefwijziging. Geen koppeling met de live prijs. De klant vergelijkt de PNG met het bedrag naast Add to cart en mailt.

Offerte na het formulier

Canva, draft order, “we sturen de opbouw”. Werkt tot het seizoen begint. Geen herhaalbare som, geen zelfde tabel voor de volgende bezoeker.

Geen van die routes: live totaal én zichtbare componenten, zonder extra variants.

Calculation display: geen invoer, wel de som

Options Price Calculator is Built for Shopify (5.0, 26 reviews). Listing: onbeperkte productopties — Numbers, Dimensions, Checkboxes, Dropdowns — plus formules, zonder extra varianten. Starter $9.99/maand: onbeperkte opties, formula builder, metafields, multilingual, AI. Premium $14.99/maand: + conditional logic, Font Picker, live preview, real-time price breakdown, table or text. Free: 20 uses; Develop-plan altijd gratis. USD.

De listing noemt die breakdown expliciet op Premium. In de docs heet het blok Calculation display (Premium). Het verzamelt niets. Het is een display-blok dat je in Stap 1 bij de velden zet.

Drie stappen:

1. Stap 1: Fields — Calculation display uit de toolbox. Layout Table (twee kolommen) of Text (vrije zin).

2. Formule-stap, tab 4d — de rijen of de template.

3. Stap 3: Customize design — typografie, tabelranden, rijscheiding, buitenrand. Alleen dit blok.

Tabelrij:

• Label — links, bijvoorbeeld `Stof` of `Totaal`.

• Formula — rechts: veld, `product_price`, metafield, helper of computed property.

• Bold — voor de totaalregel.

• Format as money — winkelvaluta. Uit voor kale getallen: stuks, m².

Rijen versleep je. Text-layout is een template met accolades:

``` Je bestelt {quantity} stuks {material} voor {total}. ```

Alles wat in een formule mag — veldkey, custom variable, `product_price`, metafield — mag in die template.

De docs-tip is verplicht lezen: schrijf elke component één keer in 4a. Custom variables en hergebruik die in de rijformules én in 4c. Anders wijkt de tabel af van wat checkout rekent. Lookup-tabellen (`lookup2d`) blijven Premium, net als dit display. Claim ze niet op Starter.

Conditional if/then in 4c is ook Premium. De breakdown zelf rekent niet opnieuw; hij toont wat je in 4d zet. Klopt 4c niet, dan liegt een nette tabel keurig.

Helpers in formules: `Math.min`, `Math.max`, `Math.ceil`, `Math.floor`, `Math.round`. Afronden als laatste stap, ook in de totaalrij.

Voorbeeld: jaloezie, stof plus setup plus voering

Product: aluminium jaloezie. Native options: Kleur (wit / antraciet) en Bediening (koord / motor). Twee options, onder de drie. Variantprijs = de kleinste lat zonder maatwerk. Geen “Breedte”-option.

Calculator-velden:

• Number, label `Breedte (cm)`, key `width`

• Number, label `Hoogte (cm)`, key `height`

• Checkbox, label `Verduisterende voering`, key `lining`, waarde `18` (euro, of een factor — jij kiest)

• Calculation display, layout Table

Custom variables in 4a (geen Premium):

• `area` = `(width / 100) * (height / 100)`

• `fabric` = `area * 42`

• `setup` = `25`

• `lining_fee` = `lining` (checkbox aan = 18, uit = 0)

• `total` = `product_price + fabric + setup + lining_fee`

4c gebruikt alleen `total` — of dezelfde som uitgeschreven. 4d-rijen:

| Label | Formula | Bold | Money | | Stof (m²) | `area` | nee | nee | | Stof | `fabric` | nee | ja | | Setup | `setup` | nee | ja | | Voering | `lining_fee` | nee | ja | | Totaal | `total` | ja | ja |

Preview: 180 × 240, voering aan, variant €89. Oppervlak 4,32 m². Stof 181,44. Setup 25. Voering 18. Totaal 89 + 181,44 + 25 + 18 = 313,44. Zelfde jaloezie, voering uit: 295,44. De koper ziet welke regel verdween. Fulfillment ziet dezelfde getallen op de order.

Wil je boven 6 m² een andere factor? Dat is Premium conditional in 4c. De tabel toont dan de componenten van die branch — als je de 4a-variabelen hetzelfde houdt.

Theme app extension op de productpagina. Selector picker voor prijs en Add to cart, omdat thema’s verschillen. Claim niet “werkt op elk thema zonder setup”. Koppel de calculator per variant; bulk linking als dezelfde som op alle kleuren past. Server-side price validation hoort bij de app.

AI-powered generation van opties/formules zit op Starter+. Handig voor een eerste draft; de rijen in 4d controleer je zelf met previewwaarden. Multilingual (Starter+): labels van velden én van de breakdown-rijen vertaal je in Translations. De formules blijven hetzelfde.

Aan de slag op één jaloezie

1. Installeer Options Price Calculator. Free: 20 uses (Develop-plan altijd gratis). Starter voor velden en formules; Premium voor Calculation display.

2. Open het product met kleur + bediening. Laat die twee options native. Voeg geen “Maat”-option toe.

3. Numbers voor breedte en hoogte. Checkbox voor voering. Calculation display, Table.

4. In 4a de stukken: oppervlakte, stof, setup, voering, totaal. In 4c die totaal-variabele. In 4d vijf rijen, totaal bold en als geld.

5. Test drie previewwaarden: klein zonder voering, groot met voering, leeg veld. De tabel mag nooit van 4c afwijken.

6. Koppel per variant. Plaats de theme app extension. Bestel zelf. Check regel, componenten, bedrag.

Wil je een zin in plaats van een tabel? Layout Text, template met `{area}` en `{total}`. Wil je de som op de foto? Dat is Product Personalizer — ander artikel, ook Premium.

Tot slot

Shopify realtime prijsopbouw tonen is geen extra variantoptie en geen Excel-PNG in de beschrijving. Het is Premium Calculation display: display-only, tabel of tekst, rijen uit dezelfde variabelen als 4c. Native Shopify stopt bij drie options, 2048 variants en één bedrag. De calculator vult de uitsplitsing in, zonder een SKU per toeslag.

Zet de rijen in Options Price Calculator. Daarna ziet de productpagina dezelfde som als jij in de formule — niet een inbox vol “waar komt dat bedrag vandaan?”.