Prijscalculator koppelen aan je Shopify-thema

De calculator staat op de productpagina. Breedte en hoogte vullen zich. Het totaal in het formulier klopt. Op de plek waar Dawn de prijs toont, blijft €89,00 staan. Add to cart gaat wél door, maar de winkelwagen pakt de oude variantprijs. Support zegt: “het thema.” Jij zoekt Shopify calculator theme bindings.

Dat is geen extra optie in het product. Het is de pagina in de app waar CSS-selectors vertellen wáár het thema de prijs, het productformulier en de Add to cart-knop bewaart. Zonder die koppeling rekent de calculator intern, en het thema toont wat het zelf al wist.

Shopify Help Adding variants blijft drie options en 2048 variants. Een gordijn van 87,3 cm past daar niet in. Options Price Calculator zet extra velden naast die limiet. Theme bindings zijn de haak naar *jouw* HTML, niet naar een universele Shopify-prijsklasse.

Eerder: productafbeelding wisselen bij een optie. Dat is visueel. Dit stuk is de bindings-pagina: URL plakken, selectors, picker.

Het thema is geen standaard-API

Elke productpagina is een template. Dawn, Sense, een custom theme van een bureau: andere class-namen, andere wrappers, soms een eigen Add to cart die geen `form` submit is.

Wat shops dan doen:

Hardcoded `span.price` in een notitie

Werkt tot de sale-prijs in een andere span zit. Of tot een tweede prijs in de sticky bar. De app grijpt de eerste match — of niets.

Custom Liquid dat de calculator “naast de prijs” zet

Het blok hangt mooi. De prijs-update luistert nog steeds naar de selector in App settings, niet naar waar jij het blok sleepte.

Inspect in Chrome, class kopiëren, plakken

Eén class van een nested span. Thema-update, andere markup, bindings dood. De docs zeggen: gebruik de picker, en houd fallbacks op nieuwe regels.

Geen van die routes vertelt de app wélk formulier de variant meestuurt.

Wat Storefront Theme Bindings wél is

Docs Storefront Theme Bindings: de sectie koppelt de app aan de HTML van je thema met CSS-selectors. Die selectors zeggen waar de app informatie leest en bijwerkt op de productpagina.

Product URL / domain. Plak een product-URL van je webshop. De app laadt die pagina, herkent thema-elementen en zet de selector picker aan. Gebruik een URL die je hoofd-layout is, niet een hidden test-SKU met een andere template.

Price selectors. Waar de productprijs in het thema staat. Elke selector op een nieuwe regel. De app gebruikt de eerste die matcht. Meer regels = meer kans bij sale, sticky bar of bundle-prijs. Voorbeeld uit de docs:

``` span.price-item.price-item--sale.price-item--last ```

Product detail information selectors. De container rond prijs-componenten, bijvoorbeeld `.product__info-container`. Zo weet de app in welk blok de prijs leeft.

Product form selectors. Welk formulier het product in de winkelwagen zet. Nodig voor de juiste variant, de berekende prijs, en cart-gedrag. Eerste match telt.

Add to Cart (ATC) button selectors. Welke knop de actie triggert: standaard submit, thema-specifieke knop, payment buttons. Zonder juiste ATC-selector doet de calculator het formulier, niet de knop die de shopper ziet.

Variant selector elements. Radio’s, dropdowns, custom variant-componenten. De app luistert zodat de calculator herberekent als de variant wisselt. Bij rare custom markup kun je het innerlijke input targeten, bijvoorbeeld `variant-radios-detail input[type='radio']`.

Product image selectors. Alleen nodig als je de Customizer (live preview) gebruikt of als de productafbeelding moet meebewegen met keuzes. Pick product image vult het veld. Live preview zelf is Premium.

Cart line item image selectors. Thumbnails in cart en cart drawer, voor de gepersonaliseerde afbeelding op `__ooCustomImageUrl`. Alleen relevant mét Customizer.

Twee schakelaars op dezelfde pagina:

• Show currency with prices — aan: `$350.00`; uit: alleen het getal, als het thema de valuta al zet.

• Enable server-side price validation — cart bundle en draft-order checkout controleren de calculatorprijs server-side. Uit: `__ooCustomPrice` wordt vertrouwd. Zie de aparte docs over die safety-feature.

Tip uit de docs: test prijs-updates na elke selector-wijziging. Na een themawissel de picker opnieuw draaien.

De selector picker, niet gokken in Inspect

Docs Using the Selector Picker: Pick price, Pick add to cart en Pick product image. Aanbevolen, vooral bij custom themes.

Werking, steeds hetzelfde patroon:

1. Nieuw venster met je productpagina.

2. Je klikt het element (prijs, knop, of media).

3. De app maakt de CSS-selector.

4. Die komt in het bijbehorende veld.

Handmatig mag: bewerken, extra fallbacks, reset naar default. De picker voorkomt dat Add to cart op de verkeerde knop landt. Na een themawissel: alle drie opnieuw.

Overzicht van App settings: Overview. Eerste installatie, themawissel, zwaar custom theme, of prijs/ATC die niet meegaat — dan deze pagina. De meeste standaardthema’s werken out of the box; custom themes vragen selector-werk. Claim niet “werkt op elk thema zonder setup.”

Conditional logic, live preview, Font Picker: Premium ($19.99/maand op de listing). Theme bindings zitten in App-wide Settings, niet in die drie. Draft order checkout / order from admin: het hogere plan ($39.99). Starter is $9.99. Free: 20 uses. Built for Shopify, 5.0 uit 28 reviews. USD.

Wat je hier niet in moet stoppen

De calculator-CSS. Custom CSS scoped naar `#calculator-form-container` is een ander artikel. Bindings zijn thema-elementen buiten dat formulier.

Tien price-selectors “voor later”. De eerste match wint. Een te ruime selector grijpt de compare-at-prijs of een prijs in een aanbeveling-carrousel.

Image selectors “voor de zekerheid” zonder Customizer. Onnodig. Leeg laten tot je live preview of image-swap nodig hebt.

Praktijk: zonwering, Dawn, daarna een custom theme

Shop “Raamlijn”. Native variant: bediening links/rechts. Calculator: breedte, hoogte, doek. Formule in de trant van `product_price + (width * height)`. Theme app extension op de productpagina. Limiet blijft drie options / 2048 variants — de centimeters staan niet in dat raster.

Op Dawn vult Pick price meteen `span.price-item…`. ATC is de standaardknop. Testorder: prijs in de header volgt, winkelwagen ook.

Bureau levert een custom producttemplate. Sticky prijs, eigen `add-to-bag`. De oude selectors matchen niets. Formule klopt nog. Storefront toont de variantprijs.

Stappen:

1. App settings → Storefront Theme Bindings.

2. Product-URL van een échte zonwering-SKU, dezelfde template als live.

3. Pick price op de sticky prijs die de klant ziet.

4. Pick add to cart op Add to bag, niet op Shop Pay.

5. Variant-radios: als de calculator niet herberekent bij links/rechts, inner `input[type='radio']` toevoegen.

6. Server-side validation aan laten.

7. Test: maat wijzigen, prijs in thema én in calculator, daarna cart.

Eén extra fallback-regel voor de sale-span, onder de sticky-selector, voor als de actieprijs elders hangt.

Aan de slag

Zet de calculator op de productpagina. Open theme bindings. Plak de URL. Prik prijs en ATC. Bestel zelf. Wissel daarna één keer van thema op een duplicate en prik opnieuw — dat is de regressietest die de docs bedoelen.

De listing van Options Price Calculator is de installatie. Bindings configureer je ná de embed, niet in plaats daarvan.

Tot slot

Shopify calculator theme bindings zijn CSS-selectors plus een product-URL. De picker vult ze. Na een themawissel opnieuw. De formule in de builder is nutteloos als het thema de oude prijs blijft tekenen.

Drie options, 2048 variants: Shopify. Onbeperkte velden en live prijs: deze app, gehaakt aan jóuw markup. Installeer Options Price Calculator en koppel prijs en Add to cart vóór je de volgende optie bouwt.