Add-ons op Shopify productpagina: toeslag zonder extra varianten

Cadeauverpakking, een wenskaart, spoedproductie of een extra jaar garantie: dat zijn add-ons op Shopify productpagina, geen nieuwe kleur of maat. Toch eindigen ze vaak als extra variant-optie of als Liquid-checkbox die wél op de order verschijnt en niet in het bedrag. De klant vinkt “+ €4,95 inpakken” aan, de cart rekent de catalogusprijs.

Dit stuk is voor shops die extra’s naast het product willen verkopen — juwelen, prints, kaarsen, textiel — zonder de catalogus te verdubbelen. Je ziet waarom native variants en thema-inputs daarvoor te kort schieten, en hoe je met Options Price Calculator een checkbox of radio-set zet waarvan de toeslag live meeloopt naar checkout.

Het Shopify-probleem: een extra is geen SKU

Volgens Adding variants mag een product maximaal drie options hebben en maximaal 2048 variants. De variantcap ging in oktober 2025 van 100 naar 2048 (changelog). Dat helpt kledinggrids. Het helpt niet als “cadeauverpakking” de vierde keuze is, of als je Size, Color en Material al gebruikt.

Zet je gift wrap wél als variant, dan verdubbel je elke combinatie. Tien maten × acht kleuren = 80 SKU’s; plus “wel/niet inpakken” = 160. Voorraad op “ingepakt/rood/M” is betekenisloos: je pakt in ná bestelling. Feeds, kortingen en POS zien ruis. En je hebt je drie-optieplafond opgebruikt voor iets dat geen eigen voorraadregel is.

Shopify’s eigen vintage-tutorial Add a gift wrap option lost dat op door een los product “Gift wrapping” in de cart te duwen. Dat werkt tot iemand de regel verwijdert, tot je per product een ander tarief wilt, of tot je drie add-ons tegelijk wilt (inpakken + kaart + spoed). Dan heb je Ajax, hidden products en thema-onderhoud.

Wat merchants nu proberen

1. Een checkbox in Liquid

In How to add a checkbox for gift wrapping on a product page? is het recept bekend: `<input name="properties[Gift wrap]">` in het productformulier. De keuze komt op de orderregel. Fulfillment ziet “Yes”. De prijs verandert niet. Hetzelfde zie je in How to add a chargeable add-on: een snippet “toont” +¥500 in de cart-template, maar checkout rekent die yen niet tenzij je er een fee-SKU, draft order of cart transform naast zet. We schreven eerder waarom line item properties geen prijs wijzigen.

2. Gift wrap als tweede product + Ajax

Community-advies in Add a price “from $X” is: maak een los add-on-product, update de getoonde prijs met JavaScript, en post beide regels via `/cart/add.js`. Dat is fragiel. De klant haalt de wrap-regel uit het mandje. Express checkout (Shop Pay) slaat je script over. Per product een ander tarief betekent meerdere hidden SKU’s.

3. Elke extra als variant-optie

“Afwerking: standaard / cadeau / luxe” als derde option lijkt schoon, tot je al Size en Color hebt, of tot luxe-inpakken €12 is ongeacht de SKU. Dan moet je elke combinatie handmatig duurder maken. Vergeet je één cel, verkoop je onder de kostprijs.

Checkbox + formule, geen extra variant

Options Price Calculator zet onbeperkte velden op de productpagina: checkboxes, radio’s, dropdowns, tekst, file upload. Geen extra variant per vinkje. De checkbox is precies voor optionele extra’s.

Docs-voorbeeld, letterlijk het gift-wrap-patroon uit Pricing / Formula Examples:

``` product_price + gift_wrap ```

Veld:

• Label: `Cadeauverpakking (+ €4,95)`

• Key: `gift_wrap` (alleen lowercase, cijfers, underscores)

• Numeric value: `4.95`

• Default: unchecked

Aangevinkt telt de formule `4.95` mee; uit staat de waarde op `0`. De klant ziet het productprijs-element live bijwerken. Op de order komen de gekozen opties mee, zodat inpaktafel en bevestigingsmail dezelfde extra zien.

Meerdere extra’s stapelen zonder Premium:

``` product_price + gift_wrap + greeting_card + rush ```

Drie checkboxes, drie keys, drie numeric values. Geen 2³ extra SKU’s. Wil de klant kiezen tussen *standaard inpakken* (€4,95) en *luxe doos* (€12) — wederzijds uitsluitend — dan is een radio of dropdown beter: elke optie krijgt een numeric value, unchecked/“geen” is `0`.

Conditional logic (Premium) is pas nodig als de toeslag van iets anders afhangt, bijvoorbeeld “luxe wrap alleen als de kaart is aangevinkt”, of een minimumbedrag. Zie Conditional Pricing. Live preview van tekst op een doos is ook Premium (Product Personalizer). Een vaste cadeautoeslag is dat niet.

Houd native variants voor echte voorraad: kleur die je op de plank legt, of een SKU met eigen inkoop. Inpakken, spoed en kaart horen naast die SKU, niet erin.

Voorbeeld: kaarsenwebshop in december

Je verkoopt geurkaarsen. Variants: geur (acht) × formaat (drie) = 24 SKU’s. Dat is voorraad. In het hoogseizoen wil je:

1. Cadeauverpakking — €4,95 (checkbox)

2. Handgeschreven kaart — €2,50 + tekstveld (checkbox + custom text)

3. Verzenden vóór 20 december — €7,50 (checkbox, of een date-veld als je een deadline toont)

Native zou je een vierde en vijfde option nodig hebben, of 24 × 2 × 2 extra combinaties. In OPC blijven de 24 SKU’s staan. De calculator hangt je aan het product (of per variant als de luxe-geur een ander inpak-tarief heeft). Formule:

``` product_price + gift_wrap + greeting_card + rush ```

`greeting_card` is `2.50` of `0`. Het tekstveld levert geen prijs, alleen de boodschap op de order. Test: vink inpakken aan, prijs +€4,95; vink uit, terug naar `product_price`. Voeg daarna de kaart toe. Rond af in de formule als je in centen wilt landen, bijvoorbeeld met `Math.round` aan het eind.

Hetzelfde patroon geldt voor juwelen (poetsdoek + etui), posters (koker vs. plat), of B2B (spoedproductie naast een setupfee). Voor gravering-toeslag met vrije tekst schreven we een apart stuk; add-ons zijn de variant daarvan zonder personalisatie-laag.

Wat je nodig hebt om te starten

1. Installeer Options Price Calculator. Free: 20 uses (op een Shopify Develop-plan altijd gratis). Starter ($9.99/mo): onbeperkte opties, formula builder, metafields, meertaligheid. Premium ($14.99/mo): conditional logic, font picker, live preview, price breakdown.

2. Zet het app block op het producttemplate: theme editor → Products → Default product → Add block → Apps. Plaats het onder de prijs, boven Add to cart. Stappen: How to add the extension to the product page.

3. Maak een calculator. Eerste veld: checkbox `gift_wrap`, numeric value = je toeslag. Optioneel: extra checkboxes of een radio voor wrap-niveau.

4. Formule: `product_price + gift_wrap`. Preview met aan/uit.

5. Link de calculator aan het product of de variant. Open de storefront, vink aan, controleer cart én checkout — niet alleen de productpagina.

6. Custom theme? Gebruik de selector picker voor prijs en Add to cart; de meeste thema’s werken out of the box, zwaar aangepaste niet.

Server-side price validation (safety) is een globale Theme-setting, standaard uit tot je hem aanzet. Handig als je niet wilt dat iemand het payload-bedrag in de browser herschrijft. Dat is geen Premium-feature.

Tot slot

Add-ons op Shopify productpagina horen geen extra variant-optie te zijn. Drie options en 2048 variants beschermen je SKU-grid; ze zijn niet gebouwd voor “+ inpakken”. Een Liquid-checkbox bewaart tekst. Een hidden gift-wrap-product verdwijnt uit het mandje. Een formule `product_price + gift_wrap` rekent de toeslag in hetzelfde bedrag dat checkout ziet.

Zet de checkbox live: installeer Options Price Calculator en koppel hem aan één product deze week. Als december-volume komt, schaal je dezelfde calculator naar de rest van de catalogus — zonder 160 nieuwe SKU’s.