Dynamische productopties Shopify: live keuzes zonder extra varianten

Dynamische productopties Shopify zijn velden die de prijs op de productpagina laten meebewegen terwijl de klant kiest: een kleurstaal, een dropdown afwerking, een checkbox voor cadeauverpakking, een getal voor breedte. Dat is iets anders dan een extra variant. Een variant is een SKU met voorraad. Een dynamische optie is een keuze of invoer die de formule voedt — en die je native Shopify-product niet kan dragen zodra je drie options of een continue maat nodig hebt.

Dit stuk is voor merchants die hun productpagina als configurator willen, niet als spreadsheet in een select-box. Je ziet wat Shopify wél en niet doet, waarom thema-inputs de kassa niet aanpassen, en hoe je met Options Price Calculator swatches, dropdowns, checkboxes en een live prijs zet zonder een SKU per combinatie.

Wat native Shopify op de productpagina toestaat

Shopify Help Adding variants is nog steeds de grens:

• maximaal drie options per product (Size, Color, Material — of welke drie namen je ook kiest);

• maximaal 2048 variants (de oude 100-grens is in oktober 2025 verhoogd, changelog).

Die twee getallen lossen verschillende problemen op. 2048 is ruimte voor discrete combinaties die je écht op voorraad legt. Drie options is het plafond voor native keuzes. Een vierde dropdown, een vrije tekst, een file upload of een getypte centimeter past daar niet in. Meer SKU’s maken de catalogus groter, niet dynamischer.

In de community komt dat wekelijks terug. Adding more than 3 options in Shopify admin vraagt om extra velden *zonder* app; de antwoorden belanden bij metafields die niet als echte option werken, of bij een app. How can I add option choices to product variants wil planner-opties waarvan sommige de prijs wél moeten wijzigen. Native variants kunnen dat alleen als elke combinatie een SKU is — en je hebt maar drie slots.

We schreven eerder over de harde drie-optiegrens. Hier gaat het om het gedrag van de pagina: welke veldtypes je nodig hebt, en waarom de prijs live moet meeschuiven.

Wat shops nu proberen — en waar het ophoudt

Varianten als UI

Je stopt elke afwerking, elke zoom, elke extra in een option value. De klant ziet dropdowns, jij ziet honderden SKU’s. Voorraad per cel is vaak fictie. Feeds, kortingen en related products worden rommelig. En zodra iemand een eigen maat wil, is de matrix alsnog te grof.

Line item properties in het thema

Liquid-inputs `properties[Gravering]` of `properties[Breedte]` belanden op de orderregel. Fulfillment kan de tekst lezen. De prijs verandert niet. Shopify bewaart metadata; de regelprijs blijft die van de gekozen variant. In Can we add the option to personalize an item without an app? staat het expliciet: naam en kleur vastleggen kan in code, een toeslag bij personalisatie vraagt een app. Dat is geen bug. Properties zijn geen prijsmotor.

Losse producten per extra

Cadeauverpakking, spoed, montage: elk een extra product in de cart. Werkt voor simpele add-ons, niet voor een formule (breedte × hoogte × tarief) en niet voor een samenhangende configurator op één pagina.

Geen van die paden geeft je dynamische productopties: keuzes die de zichtbare prijs bijwerken én hetzelfde bedrag in checkout innen.

Welke veldtypes een configurator nodig heeft

Een dynamische productpagina is een set velden, geen extra option-rij in Admin. In Options Price Calculator (Built for Shopify) bouw je die velden in een calculator en koppel je die per variant. De app is geen voorraadvervanger: echte SKU’s blijven native variants. Alles wat geen eigen voorraadregel nodig heeft, wordt een veld.

Typische types uit de documentatie:

• [Dropdown](https://docs.onlineorigins.nl/articles/6784116-dropdown) — één keuze uit een lijst (materiaal, afwerking, servicelevel). Elke optie heeft een numerieke waarde die de formule in kan: toeslag, multiplier, of 0 als de keuze alleen voor fulfillment is.

• [Swatch](https://docs.onlineorigins.nl/articles/5916022-swatch) — hetzelfde als een enkele keuze, maar visueel (kleur of beeld). Handig als twaalf stoffen geen twaalf variants verdienen.

• [Checkbox](https://docs.onlineorigins.nl/articles/3700642-checkbox) — aan/uit. Aangevinkt gebruikt de formule de ingestelde waarde (bijvoorbeeld `5` voor cadeauverpakking, of `1.1` als multiplier); uit is `0`.

• Number input — de klant typt een maat of hoeveelheid. Dat is het stuk dat native options structureel niet aankunnen.

• Tekst, textarea, file upload — gravering, opmerking, logo. Die data gaat mee naar de order; een uploadtoeslag kan via de formule.

• Radio buttons — zelfde logica als dropdown, andere UI.

Elk veld heeft een key. Die key wordt een variabele in de formule, zoals de docs bij Variables and Field Values uitleggen. Dropdown, radio en swatch leveren de float van de gekozen optie; een checkbox de waarde of `0`; een number input het getal zelf. De prijs op de pagina volgt live mee.

Conditional logic, font picker, live preview (Product Personalizer) en een real-time price breakdown zijn Premium. Noem ze alleen als je dat plan gebruikt; een Starter-shop heeft de formule, AI-hulp bij velden, metafields en meertalige labels wél.

Live prijs: de formule, niet de variantcel

Zonder formule zijn opties alleen labels. Met formule wordt de productpagina een calculator. Uit de formulevoorbeelden:

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

`product_price` is de prijs van de huidige variant. Wisselt de klant van hout naar metaal (echte SKU’s), dan verandert de basis; breedte en hoogte blijven velden. Add-on via checkbox:

``` product_price + gift_wrap ```

Of setup plus oppervlakte, zoals in dezelfde docs:

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

Een dropdown `material_type` kan als multiplier: `product_price * material_type`. Helpers als `Math.min`, `Math.max`, `Math.ceil` bestaan voor afronden. Staffels (“als width > 200 een hoger tarief”) en een harde minimumprijs zijn Premium if/then — zie Conditional Pricing.

Server-side price validation hoort bij de safety van de app: de berekende prijs is niet alleen een JavaScript-show op de storefront. Op de order komen de ingevulde opties mee, zodat werkplaats en bevestigingsmail dezelfde keuzes zien.

Voorbeeld: één pagina, vijf keuzes, één SKU

Stel: een houten plank op maat. Je hebt nodig:

1. Breedte (cm, number)

2. Lengte (cm, number)

3. Houtsoort (swatch, acht beelden — de meeste zonder eigen voorraad)

4. Afwerking (dropdown: blank, geolied, gelakt — elk een toeslag)

5. Afzagen op lengte (checkbox, vaste zaagkost)

Native Shopify geeft je drie options. Dit zijn vijf interacties, waarvan twee continu. In OPC blijven één of twee échte varianten over als je wél voorraad per collectie wilt (bijvoorbeeld eiken versus beuken als SKU). De rest zijn velden. Formule:

``` product_price + (width * length * rate) + finish + cutting ```

De klant ziet het totaal veranderen bij elke klik. Geen matrix van 8 × 3 × oneindige centimeters. Hetzelfde patroon geldt voor gordijnen, spandoeken of een tas met gravering: visuele keuze + optionele toeslag + vrije invoer, zonder extra variant.

Gisteren schreven we over prijs op eigen maat (number fields i.p.v. S/M/L). Dynamische productopties zijn de bredere toolkit: niet alleen het getal, ook hoe je keuzes toont.

Aan de slag in de theme editor

1. Installeer Options Price Calculator. Free plan: 20 uses (op een Shopify Develop-store altijd gratis). Starter is $9.99/maand voor onbeperkte opties, formule, AI, metafields en meertaligheid; Premium $14.99 voor conditional logic, font picker, live preview en price breakdown. De listing staat op 5.0 uit 22 reviews.

2. Zet het app block op de productpagina: Online Store → Themes → Customize → Products → Default product → Add block → Apps. Aanbevolen plek: onder de prijs, boven Add to cart. Thema’s verschillen; de selector picker in de app bestaat juist om prijs en knop te koppelen als je theme dat nodig heeft.

3. Bouw velden (keys netjes, lowercase). Geef dropdowns en swatches een float per optie.

4. Schrijf één formule. Test op de storefront: elke input moet het bedrag en later de cart-regel meenemen.

5. Link de calculator per variant. Eén variant mag één calculator; wisselt de klant van SKU, dan wisselt de set velden mee.

Houd native variants voor wat je op voorraad legt. Dynamische productopties Shopify zijn voor de rest: UI, formule, orderregel — zonder je catalogus te laten exploderen.

Tot slot

Native Shopify stopt bij drie options en bij prijs-per-SKU. Dynamische productopties — swatches, dropdowns, checkboxes, getallen, uploads — horen naast die SKU’s, met een formule die live én in checkout klopt. Installeer Options Price Calculator en zet de eerste calculator op één product voordat je de hele catalogus ombouwt.