Shopify dropdown met prijstoeslag, zonder extra variant

Stofsoort, voering, laklaag, montageset: de klant kiest er één uit een lijst, en die keuze mag geld kosten. Dat is geen vierde Shopify-option. Het is een Shopify dropdown met prijstoeslag. Wie die lijst als variantoptie aanmaakt, verdubbelt de catalogus, eet een van de drie options op, en houdt voorraad bij van combinaties die nooit in het rek liggen.

Thema’s tekenen variantopties vaak als dropdown. Daardoor voelt “nog één keuzelijst” als iets dat je in Products hoort te zetten. Daar hoort het niet. Een native option value is een SKU. Een calculator-dropdown is een label plus een getal. Alleen dat getal gaat de prijs in.

Gisteren ging het over radioknoppen of varianten: één keuze, alle rijen zichtbaar. Is de lijst lang of de kolom smal, dan past een dropdown beter. Dit stuk is die compacte lijst: waarom een extra variant de verkeerde plek is, wat shops nu doen, en hoe je met Options Price Calculator de gekozen waarde in de formule stopt.

Een keuzelijst op de productpagina is nog geen SKU

Shopify-varianten zijn voorraadbare combinaties. Adding variants zet twee harde grenzen: maximaal drie options per product (Maat, Kleur, Materiaal, …) en maximaal 2048 variants. De oude 100-limiet is weg; de drie-optiegrens niet. Shopify zegt zelf: meer options of meer variants? Dan een app, of thema-code die line item properties ophaalt. Die properties wijzigen de prijs niet.

Elke extra value vermenigvuldigt het raster. Stof (10) × kleur (8) × voering (4) = 320 SKU’s — en je hebt nog geen ophangsysteem. Elke cel krijgt prijs, voorraad en optioneel media. Shopify staat tot 250 media per product toe. Een foto per voering is geen plan.

Wat native wél hoort: stof of kleur als variant, omdat je die inkoopt en legt. Wat native niet hoort: een prijskeuze zonder eigen voorraad — standaard / premium / thermisch — als option value. Dat eet een van je drie slots.

Wat webshops nu doen

Voering als derde option

“Afwerking: standaard / verduisterend / thermisch” naast stof en kleur. Dan heb je eiken-standaard, eiken-verduisterend, eiken-thermisch, en hetzelfde nog eens voor elke kleur. Voorraad klopt nooit: je hebt geen “eiken + thermisch” als losse plank. Thermisch is een toeslag, geen houtsoort.

Een Liquid-select in het thema

`properties[Voering]` op de orderregel. De keuze staat er. De checkout telt de productprijs. Jij tikt het verschil er later bij, of de klant betaalt te weinig. Geen live totaal.

Een tweede product “Verduisterende voering”

Twee keer Add to cart. De helft vergeet het. Kortingen en verzending zien twee losse regels.

Geen van die routes geeft je: één compacte lijst, live som, SKU’s alleen voor wat je écht legt.

Dropdown in de calculator, variant op de SKU

Options Price Calculator is Built for Shopify (5.0, 26 reviews op de listing). Onder Customization staat Dropdowns. Onbeperkte productopties, dynamische prijzen met formules, live totaal — zonder extra varianten of handmatige offertes. Starter $9.99/maand: onbeperkte opties, formula builder, metafields, multilingual. Premium $14.99/maand: + conditional logic, live preview, price breakdown. Free: 20 uses; op een Shopify Develop-plan altijd gratis. Facturatie in USD.

De vuistregel is simpel. Moet je voorraad, inkoop of een barcode per combinatie bijhouden? Dat is een variant. Wijzigt alleen de prijs of de ordertekst, en ligt er geen extra doos van? Dat is een dropdown. Meerdere extra’s tegelijk? Dan checkboxes, niet één dropdown — de Dropdown-docs zeggen dat expliciet: precies één keuze.

Hoe het veld rekent

De dropdown-docs zijn het contract. De klant kiest één optie uit een vaste lijst. Elke rij is een label plus een Value (float). Die waarde gaat de formule in: vast bedrag, multiplier, of een tussenstap.

Key bijvoorbeeld `lining` of `material_type` — alleen kleine letters, cijfers, underscores. Label erboven: `Voering`. Opties:

| Label | Value | Betekenis | |-------|-------|-----------| | Geen extra voering | `0` | geen toeslag | | Verduisterend | `18` | vast extra bedrag | | Thermisch | `28` | vast extra bedrag |

Of als multiplier, zoals example 3 in de formulevoorbeelden: `1` / `1.2` / `1.5` bij een materiaalkeuze.

Variables and Field Values behandelt Dropdown, Radio en Swatch hetzelfde: de formule krijgt het getal van de geselecteerde optie. Een checkbox is anders (waarde of `0`).

Required aan als de keuze verplicht is voor prijs of fulfillment. Default option: één regel vooraf geselecteerd, of leeg zodat de klant bewust kiest.

Formule: plus of keer de keuze

De Formula Builder staat `+ - × ÷ ( )` toe. `product_price` is de prijs van de gekozen variant. In de Form fields-lijst verschijnt de dropdown op zijn label; invoegen plaatst het getal van de geselecteerde optie.

Toeslag optellen:

``` product_price + lining ```

Materiaal als multiplier (docs example 3):

``` product_price * material_type ```

Oppervlakte plus voering:

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

Afronden aan het eind: `Math.round(...)` of `Math.ceil(...)`.

Alleen een extra regel als *deze* optie gekozen is, terwijl twee labels hetzelfde getal hebben? Dat is Premium conditional. De dropdown-docs geven je dan de positie van de keuze (1e, 2e, 3e). In Variables heet dat `{key}_optidx` — alleen in conditional rules, niet in de gewone formule. Zet dat niet op Free/Starter.

Praktijk: gordijn met voeringkeuze

SKU’s blijven native: stofcollectie (linnen / velvet) en kleur (zand / grafiet). Twee van je drie options. Geen “Voering”-option.

Calculator:

• Dropdown `lining`, verplicht, geen default

• Geen extra voering — value `0`

• Verduisterend — value `18`

• Thermisch — value `28`

• Number inputs `width` en `height` (cm) als je per m² rekent

• Formule `product_price + (width * height) + lining`

Klant kiest velvet / grafiet (variantprijs €42), 1,20 × 2,50 m, thermisch: `42 + (1.20 * 2.50) + 28`. Live op de pagina, dezelfde som in checkout. Fulfillment leest “Thermisch” op de orderregel. Je hebt geen SKU “velvet-grafiet-thermisch” op voorraad.

Twee verschillende voeringen in één order: twee keer Add to cart. Quantity 2 is twee identieke gordijnen met dezelfde dropdown. De calculator prijst één stuk; Shopify-quantity vermenigvuldigt die regel.

Koppel de calculator via Linking Products & Variants. Eén calculator voor de serie is genoeg als alleen `product_price` verschilt.

Aan de slag

1. Installeer Options Price Calculator. Free: 20 uses (Develop-plan altijd gratis). Starter $9.99/maand. Premium $14.99/maand als je conditionele regels per gekozen optie nodig hebt.

2. Zet het app block op de producttemplate, onder de prijs en boven Add to cart — How to Add the Extension to the Product Page.

3. Voeg een Dropdown toe. Key `lining`. Labels kort. Values: `0` / `18` / `28`, of `1` / `1.2` / `1.5` als je vermenigvuldigt.

4. Houd kleur, maat en materiaal als Shopify-varianten. Prijslijsten zonder eigen voorraad niet.

5. Test: wissel van variant, kies elke rij, controleer live prijs en winkelwagen.

Server-side price validation (app-instelling) voorkomt dat alleen de browser-prijs telt. Theme bindings zijn er voor thema’s met een afwijkende variantselector — niet “werkt overal zonder setup”.

Is de lijst kort en moet elke keuze in één oogopslag zichtbaar zijn? Gebruik dan radio’s. Is hij lang, of is de kolom smal? Dropdown.

Tot slot

Een Shopify dropdown met prijstoeslag is geen extra variantoptie en geen notitie die jij later beprijst. Het is één compacte lijst waarvan het getal in de formule valt: optellen, vermenigvuldigen, klaar. Native Shopify stopt bij drie options en 2048 variants; een vierde keuzelijst zonder magazijn hoort niet in dat raster.

Zet de dropdown in Options Price Calculator en laat de volgende klant voering of materiaal kiezen zonder een extra SKU.