Shopify selector picker: prijs en knop koppelen aan je thema

De calculator telt in de app-preview. Breedte 180, hoogte 240, voering aan: het totaal klopt. Op de productpagina blijft het bedrag €89 staan tot de klant al in de winkelwagen zit. Of erger: Add to cart doet niets, of de prijs springt alleen in het app-block en niet in de prijsregel van het thema.

Dat is zelden de formule. Dat is de HTML van het thema. Elk Shopify-thema zet prijs en knop in andere tags. De Shopify selector picker prijs knop in Options Price Calculator laat je op die elementen klikken. De app schrijft de CSS-selector. Geen gokwerk in Inspect.

We legden eerder uit hoe je het app-block in de theme editor zet. Zonder dat block zie je de velden niet. Dit stuk gaat over stap twee: bindings. Het block staat er. De prijs van het thema moet nog meebewegen.

Waarom Dawn-selectors op jouw thema falen

Shopify Help Adding variants houdt native producten bij drie options en 2048 variants. Een continue centimeter of een vierde keuze hoort in een app, niet in die matrix. Die app moet wél weten *waar* het thema de prijs toont.

Dawn gebruikt klassen als `price-item--last`. Een custom thema van een bureau, een OS 2.0-fork of een sticky buy-bar zet de zichtbare prijs in een andere `span`, soms twee keer (desktop en mobiel). De knop is niet altijd `button[name="add"]`. Soms is het een payment-button, een cart-drawer-trigger of een custom web component.

Gevolg als de selector mist:

• De formule rekent, de prijsregel van het thema niet.

• De klant ziet twee bedragen.

• Add to cart stuurt de variantprijs, niet het berekende totaal.

• Na een variantwissel (kleur) blijft de oude som staan, omdat de app de radio’s van het thema niet hoort.

Storefront Theme Bindings zijn precies dat contract: CSS-selectors die zeggen waar prijs, formulier, knop, variantkeuze en (optioneel) productafbeelding zitten.

Wat shops nu doen tot de knop stilvalt

Selectors uit een Dawn-tutorial plakken

Je kopieert `span.price-item.price-item--sale.price-item--last` uit een handleiding. Op jouw thema bestaat die class niet, of hij zit op een verborgen sale-prijs. De app pakt de eerste match. Dat kan de verkeerde regel zijn.

Zelf in Inspect een pad tikken

`div.product > div.info > span:nth-child(3)`. Na de volgende theme-update verschuift de boom. De selector is dood. Je merkt het pas als een klant mailt dat de prijs “niet meebeweegt”.

Alleen het app-block stylen, de themaprijs negeren

De calculator toont zelf een totaal. De prijs boven de knop blijft de variantprijs. Kopers vertrouwen de bovenste regel. In de checkout komt een ander bedrag. Support-tickets volgen.

Geen van die routes vervangt klikken op het échte element op jouw productpagina.

Klikken in plaats van CSS gokken

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

De selector picker zit in App settings, niet in het Premium-plan. Je hebt wél een product-URL nodig.

Product-URL eerst

Plak in Product URL / domain een productpagina die jouw standaardlayout is. De picker opent die pagina. Een testproduct zonder buy-buttons of een wachtwoord-pagina geeft niks bruikbaars.

Pick price on storefront

Er opent een venster. Je klikt op het bedrag dat de klant moet zien. De app vult Price selectors. Eén selector per regel. De eerste die matcht wint. Extra regels mag: fallbacks voor sale-prijs, vergelijkingsprijs of een tweede template.

Pick add to cart on storefront

Zelfde ritueel, nu op de knop. Uitkomst landt in ATC button selectors. Dat dekt thema-knoppen, custom submit en payment-buttons. Zonder juiste ATC-selector lijkt “In winkelwagen” dood, of de regel gaat mee zonder berekende prijs.

Pick product image (alleen als je preview gebruikt)

Live preview / Product Personalizer is Premium. Die overlay moet weten waar de media staat. Pick product image vult Product image selectors. Gebruik je geen Customizer, sla deze over.

Handmatig bijwerken mag altijd: selectors editen, extra fallbacks, reset naar default. De docs raden de picker aan, vooral op custom thema’s.

Praktijk: thema-wissel, prijs blijft hangen

Shop verkoopt raamfolie op maat. Native options: kleur en dikte (twee SKU-assen). Breedte en hoogte zitten in de calculator, formule `product_price + (width * height)` uit de formula-voorbeelden. Het app-block staat onder de prijs, boven Add to cart, zoals de theme-editor-stappen voorschrijven.

Maandag gaat een nieuw thema live. Het block moet je opnieuw plaatsen — Shopify kopieert app-blocks niet mee. Dinsdag staan de velden er weer. De prijsregel beweegt niet. De sticky bar onderaan toont nog de oude variantprijs. Add to cart in die bar is een andere knop dan de knop in het productformulier.

Oplossing:

1. App settings → product-URL van het folie-product.

2. Pick price: klik op de prijs in de productinfo, daarna (tweede keer of extra regel) op de sticky bar als die een eigen bedrag toont. Twee selectors, elk op een regel.

3. Pick add to cart: klik de knop waarmee klanten écht bestellen. Is de sticky bar de primaire knop op mobiel, pick die ook of zet hem als extra regel.

4. Variant selector elements: als kleur een custom radio is, doel je op de innerlijke input, bijvoorbeeld `variant-radios-detail input[type='radio']` — het voorbeeld uit de bindings-docs.

5. Test: wissel kleur, vul 120 × 80, kijk of beide prijsplekken hetzelfde totaal tonen, klik Add to cart, check de regel.

Server-side price validation blijft aan: checkout volgt de formule, niet alleen wat het thema toonde.

Claim niet “werkt op elk thema zonder setup”. De picker bestaat juist omdat markup verschilt. Na elke theme-switch: alle drie de pickers opnieuw, zeggen de docs.

Aan de slag op jouw live thema

1. Installeer Options Price Calculator. Zet het app-block op Default product.

2. Open App settings. Plak een echte product-URL.

3. Pick price. Pick add to cart. Alleen bij live preview: pick product image.

4. Sla op. Open de storefront, niet alleen de editor-preview.

5. Vul een maat, wissel een variant, klik Add to cart. Kijk naar prijsregel, cart drawer en checkoutbedrag.

6. Zet je een nieuw thema live: block opnieuw, pickers opnieuw.

Meerdere fallbacks als je twee templates hebt (gordijn vs. stalen profiel) of een cart drawer naast de pagina-knop. Eerste match telt; zet de meest specifieke regel boven.

Tot slot

Een prijscalculator die alleen in het app-block telt, is voor de koper half werk. De Shopify selector picker prijs knop koppelt de som aan de prijs en de knop van *jouw* thema. Klikken op het element slaat de CSS op. Handmatig mag, gokken hoeft niet.

Na een theme-wissel zijn de oude selectors geschiedenis. Opnieuw picken is sneller dan Inspect. Zet de binding in Options Price Calculator, test één order, en laat de checkout dezelfde som zien als de productpagina.