Shopify prijscalculator: de checklist na installatie

De app staat in Apps. Het plan is gekozen. Op de productpagina zie je nog steeds alleen de Shopify-prijs en Add to cart. Geen breedteveld, geen live totaal. Dat is geen kapotte formule. De Shopify prijscalculator setup checklist op het dashboard van Options Price Calculator is nog niet af: het theme-block ontbreekt, de calculator hangt nergens, of de selectors van het thema kloppen niet.

Shopify plaatst een app niet vanzelf op Default product. How to install eindigt daarom niet bij Install app. Daarna volgt de eerste configuratie. Het dashboard vinkt af wat klaar is en markeert wat openstaat.

We schreven eerder hoe je de calculator in de theme-editor zet. Dit stuk is de hele keten ná installatie: block, calculator, variantkoppeling, App settings, testorder.

Installeren is nog geen productpagina

Adding variants blijft drie options en 2048 variants. Kleur, stof, lining vullen dat raster. Breedte in centimeters is geen variant-value. Daarvoor heb je extra velden en een formule nodig. Native Shopify rekent `product_price + (width * height)` niet uit op de storefront.

De listing (4 nov 2026): Built for Shopify, 5.0 uit 29 reviews. Free — 20 uses. Starter $9.99/maand: onbeperkte opties, AI, formulebouwer, metafields, styling, meertalig. Premium $19.99/maand: conditionele logica, font picker, live preview, price breakdown, lookup-tabellen. $39.99/maand: conditionele velden, draft-order checkout. USD.

Die plannen geven je de builder. Ze zetten het block niet op het template. Shopify’s handleiding Extend your theme with apps is daar helder over: app blocks voeg je toe in de theme-editor, in een sectie die app blocks toestaat. Wissel je van gepubliceerd thema, dan is het block niet automatisch mee.

Gevolg: merchants denken dat de app “niet werkt”. Meestal mist stap 1, 3 of 5 van de checklist.

Wat shops overslaan tot de inbox vol zit

Alleen het plan kiezen

Free, Starter of Premium. Dashboard open. Geen calculator. Geen koppeling. De productpagina blijft een gewone Shopify-pagina. Dat is correct gedrag: zonder gelinkte calculator gedraagt het product zich normaal.

De calculator bouwen, het block vergeten

Velden, formule, save. Preview in de app ziet er goed uit. Op de live productpagina: niets. De theme app extension moet op het producttemplate staan, onder de prijs, boven Add to cart. Zonder dat block heeft de storefront nergens om de velden te tonen.

Het block op het verkeerde template

Je hebt Default product aangepast. Gordijnen gebruiken `product.gordijn.json`. Nieuwe producten in die template missen het block. Klanten van die collectie zien de standaardprijs. Jij denkt dat de koppeling stuk is.

Selectors overslaan op een custom thema

Dawn-achtige thema’s werken vaak met de defaults. Een zwaar aangepast thema zet de prijs in een andere `span`, of de cart drawer gebruikt een andere knop. Dan beweegt de prijs niet, of Add to cart stuurt de oude Shopify-prijs. App settings en de selector picker bestaan precies daarvoor.

Geen van die routes is: dashboard aflopen, rood wordt groen, daarna één testorder.

De vijf punten die het dashboard afvinkt

Uit de Dashboard & setup checklist:

1. Theme app extension op het producttemplate

Online Store → Themes → Customize. Bovenin: Products → Default product (of het template van je maatwerkproduct). Add block → Apps → Options Price Calculator. Plaatsing: onder de prijs, boven Add to cart. Save.

Zonder Save is het block er niet. Open daarna een productpagina op de storefront. Zie je het block, dan is dit punt klaar — nog niet de hele calculator.

2. Minstens één calculator

Handmatig: velden slepen, formule zoals `product_price + (width * height)`. Of met AI (Starter+; Free heeft een beperkte AI-proef). Eén calculator is genoeg om de checklist verder te laten lopen. Een lege builder laat het dashboard openstaan.

Formule en velden horen bij de calculator, niet bij het thema. Het thema toont alleen wat je hier bouwt.

3. Calculators aan varianten koppelen

Koppelen gebeurt op variantniveau. Eén variant, één calculator tegelijk. Heeft het product maar één variant, dan is die koppeling de hele productpagina.

Pad: Link calculator forms. Rij van het product, dropdown Calculator form, calculator kiezen. Save. Nieuwe producten of varianten ontbreken in de lijst? Refresh product data.

Zonder koppeling blijft het block leeg of toont het niets bruikbaars. Met koppeling wisselt de actieve calculator als de klant van variant wisselt — handig als stof A een andere formule heeft dan stof B.

4. Selectors in App settings

Storefront Theme Bindings: plak een representatieve product-URL. Daarna Pick price en Pick add to cart. De app vult de CSS-selectors. Op custom thema’s is dat geen optionele fancy-stap. Zonder matchende prijs-selector blijft het bedrag op de Shopify-prijs staan.

Na een theme-wissel: pickers opnieuw. Bindings zijn thema-specifiek, net als het app block.

Optioneel, uit How to install: server-side price validation aanzetten. De cart controleert de berekende prijs dan aan de serverkant. Dat staat niet als verplicht vinkje op de dashboardlijst, wel als aanbevolen veiligheid.

5. Testorder op een draft-thema of testproduct

Geen live collectie als proeftuin. Draft-thema of een verborgen testproduct. Breedte invullen, prijs zien bewegen, in de winkelwagen, checkout, bevestiging. Klopt de regelprijs met de formule? Staat de invoer in de line item properties?

Het dashboard markeert wat nog openstaat. Groen op het dashboard is geen garantie dat elke template het block heeft. Check het template dat je klanten écht gebruiken.

Praktijk: jaloezieën, vijf vinkjes

Shop “Raam & Ritme” verkoopt jaloezieën. Native variants: lamelkleur (echte SKU, voorraad). Breedte en hoogte zijn Number fields. Formule: `product_price + (breedte * hoogte * tarief)`. Checkbox montage.

Wat er misging bij de eerste poging: calculator klaar, gekoppeld aan de default variant, block alleen op Default product. Het thema `product.raamdecoratie` had geen block. Selectors stonden nog op Dawn-defaults. Het live thema is een fork. Prijs bewoog in de app-preview, niet op de storefront.

Herstel, in de volgorde van de checklist:

1. Customize op het gepubliceerde thema. Template `product.raamdecoratie`. App block onder de prijs.

2. Calculator bestond al — dit punt was groen.

3. Refresh product data. Alle lamelkleuren dezelfde calculator, of per stof een andere als het tarief verschilt.

4. Product-URL van een jaloezie in App settings. Pick price op het bedrag dat klanten zien. Pick add to cart op de echte knop, niet op Shop Pay.

5. Testproduct met status Draft. Order plaatsen. Prijs in de bevestiging naast `breedte`, `hoogte`, montage.

Daarna pas de collectie live. Niet andersom.

Aan de slag

Installeer Options Price Calculator vanaf de listing. Kies Free als je twintig berekende orders wilt, of een development store (daar blijft Free zonder die limiet). Starter als je onbeperkt wilt rekenen en AI vaker dan één keer nodig hebt. Premium alleen als je conditionele prijzen, live preview of lookup-tabellen nodig hebt.

Loop daarna het dashboard in die vijf stappen. Sla geen testorder over omdat “het block zichtbaar is”. Zichtbaar is niet hetzelfde als: de cart pakt de berekende prijs.

Bij een custom thema: theme bindings en de selector picker vóór je de formule gaat finetunen. Een verkeerde selector laat elke formule er kapot uitzien.

Tot slot

De Shopify prijscalculator setup checklist is geen extra feature. Het is de minimale keten: app block op het juiste template, één calculator, koppeling per variant, selectors die bij dit thema horen, één testorder. Het dashboard markeert wat openstaat. Shopify zelf stopt bij drie options en 2048 variants; de rest komt pas live als die vijf punten groen zijn.

Werk de lijst af in Options Price Calculator voordat je de eerste klant een gordijn op millimeter laat bestellen tegen de kale productprijs.