Shopify kleurkiezer als productoptie: geen SKU per tint

De klant wil het kozijn in RAL 7016, of het printvlak in precies het groen van hun huisstijl. Jij hebt in Shopify al Size, Materiaal en Afwerking. Een vierde option “Kleur” bestaat native niet — en 200 RAL-codes als values is geen kiezer, dat is een spreadsheet in een dropdown. Wat je zoekt is een Shopify kleurkiezer productoptie: een veld op de productpagina, de gekozen tint op de orderregel, zonder een SKU per hex.

Shopify Help Adding variants blijft drie options en 2048 variants. Niet 100. Een hex-code is geen voorraadcel. Een Liquid-invoer `properties[Kleur]` bewaart de string, maar wijzigt de prijs niet. Theme-inputs zijn geen calculator.

Eerder schreven we over onbeperkte kleurstalen: swatches als vaste keuzes. Dit stuk is het andere veld: de Color Picker, met twee standen. De listing van Options Price Calculator noemt swatches onder Customization. De picker zelf staat in de Color Picker-docs.

Een tint is geen variantoptie

Varianten zijn combinaties die je kunt inslaan of een media-slot geven. “#1B3A4B” is geen SKU. Zet je twintig RAL-codes als option values, dan eet dat één van je drie slots. De koper wil daarna alsnog “iets donkerder” mailen. Je hebt dan een raster vol tinten én nog steeds geen echte kiezer.

Wat native wél hoort: de folie die je op rol legt, of de lak die je op voorraad hebt. Dat is Color als Shopify-option, met echte SKU’s. Wat native niet hoort: elke mogelijke hex als option value, laat staan elke RAL uit de waaier.

Line item properties lossen de prijs niet op. “Metallic + €18” is geen checkout-bedrag tot iets de som live berekent. Een HTML-color-input in het thema zonder formule is decoratie: de orderregel toont een code, de kassa telt de productprijs.

Wat webshops nu doen tot de inbox vol zit

RAL als variant-values

Tien codes in Color. Werkt tot iemand 7016 wil en jij alleen 7015 hebt staan. Of tot metallic een toeslag moet dragen. De lijst groeit; je derde option-slot is op.

Vrije tekst “Gewenste kleur”

De klant typt `antraciet`, `RAL 7016`, `zoals op de foto`. Fulfillment ontcijfert. Geen consistent formaat, geen verplichte keuze, geen koppeling naar een toeslag.

Color-input in het thema

`properties[Printkleur]` op de orderregel. Checkout negeert hem. Jij mailt naderhand over speciale inkt. Geen live totaal, geen “verplicht vóór Add to cart”.

Swatches als vierde Shopify-option

Dat is geen vierde option. Shopify stopt bij drie. Swatches in een app-veld zijn iets anders — we behandelden die apart. Hier gaat het om één Color Picker-veld met twee modi, niet om een extra SKU-as.

Geen van die routes geeft je: native color-input óf een vaste lijst met staal + prijs, verplicht veld, tint op de order — zonder extra variants.

Twee standen: vrij kiezen of vaste kleuren

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

De Color Picker is een formulierveld, geen Shopify-option. De docs zijn stellig: twee smaken.

Picker — elke tint, geen prijs

De klant pakt een native color-input. Jij zet een Default color in hex, bijvoorbeeld `#000000`. De gekozen kleur is alleen informatie. Ze telt niet mee in de formule, omdat een vrije hex geen zinvol getal is. Gebruik deze stand als de keuze puur cosmetisch is: “print dit paneel in jullie huisstijl, de prijs blijft gelijk.”

Options — vaste kleuren, wel een getal

De klant kiest uit jouw lijst. Elke optie heeft:

• Option label — wat de klant leest, te vertalen

• Color — het staaltje naast het label

• Value (float) — het getal in de formule

Sleep de volgorde. Markeer één optie als default. Gebruik deze stand als kleuren de prijs raken (premium lak, speciale inkt) of als je merkpalet vast wilt houden.

De tip in dezelfde docs: Options als de kleur de prijs raakt of je merkkleuren wilt. Picker alleen als elke tint mag en niets extra kost.

Label, key, verplicht

Label staat boven het veld. Docs-voorbeeld: `Frame color`. Op de Nederlandstalige storefront bijvoorbeeld “Kozijnkleur” of “Printkleur”. Houd het kort.

Key is de technische id. Alleen kleine letters, cijfers en underscores; geen spaties. Voorbeelden uit de docs: `frame_color`, `print_color`. Die key is hoe de formule en de conditionals het veld vinden.

Required field aan: geen kleur, geen Add to cart. Zet dat aan als fulfillment de tint écht nodig heeft. Zet het uit als de kleur optioneel is (standaard zwart is prima).

Wat de formule wel en niet doet

In de formula builder verschijnt het veld onder Form fields, bij zijn label. Kies je het, dan komt de Value van de gekozen optie in de expressie — in Options-modus. In Picker-modus levert dezelfde chip niets. `product_price + frame_color` is dus alleen zinvol als `frame_color` Options is en Standaard `0` heeft, Metallic `18`.

`product_price + #1B3A4B` is geen formule. Tel geen hex op.

Conditionele formules zijn Premium (Conditional Pricing). Daar krijg je `{key}_optidx`: de positie van de gekozen optie, nul-gebaseerd, alleen in de als-regel — niet in de gewone formule. Docs-voorbeeld: “als de tweede kleur gekozen is, doe X.” Claim geen optidx-regel op Free of Starter.

Verwissel dit veld niet met de optionele kleur in de Font Picker. Die kleur zit ín het Premium-fontblok (`{key}_color`). De Color Picker is een los veld; de docs markeren hem niet als Premium.

Praktijk: folie als SKU, tint als veld

Shop “Raamzicht”. Twee foliesoorten op voorraad: mat en spiegel. Dat blijft Color/Materiaal als native variant — echte rollen, echte SKU’s. De printtint op de folie is geen voorraad. Metallic inkt + €22.

1. Installeer Options Price Calculator. Starter bouwt het veld. Premium alleen als je `{print_color}_optidx` in een if/then wilt.

2. Color Picker, label `Printkleur`, key `print_color`, Required aan.

3. Mode Options. Drie regels: Antraciet `#2F3437` waarde `0`, Wit `#F5F5F5` waarde `0`, Metallic `#C0C0C0` waarde `22`. Default Antraciet.

4. Formule: `product_price + print_color`. Mat + metallic = variantprijs + 22. Spiegel + antraciet = alleen variantprijs.

5. Theme app block onder de prijs, boven Add to cart. Selectors voor prijs en winkelwagen horen bij jouw HTML; custom thema’s gebruiken de selector picker.

Wil de klant écht elke hex? Zet dezelfde key op Picker, default `#2F3437`. De formule wordt `product_price`. De tint staat op de orderregel; de kassa telt geen extra. Geen SKU “mat-#1B3A4B”.

Koppel de calculator via Linking Products & Variants. Eén calculator voor beide folies volstaat als alleen `product_price` verschilt.

Aan de slag

1. Open de listing. Free: 20 uses. Starter $9.99/maand. Premium $14.99/maand als je conditionals op de gekozen optie nodig hebt.

2. App block op de producttemplate — How to Add the Extension to the Product Page.

3. Voeg Color Picker toe. Key `frame_color` of `print_color`. Kies Picker of Options; meng die twee doelen niet in één veld.

4. Houd folie, hout of lak die je legt als Shopify-variant. Vrije of toeslagkleuren niet.

5. Test: kies een vaste kleur, wissel van variant, laat het veld leeg (moet blokkeren als Required aan staat), controleer winkelwagen en orderregel. In Picker-modus: het totaal mag niet meebewegen met de hex.

Theme bindings zijn er omdat thema’s verschillen — niet “werkt overal zonder setup”. Server-side price validation hoort bij de app.

Tot slot

Een Shopify kleurkiezer productoptie is een veld, geen vierde Color-option. Picker: elke tint, geen prijs. Options: staal, label, float — dat getal mag je optellen. Shopify zelf stopt bij drie options en 2048 variants. Die limiet omzeil je niet met 200 RAL-SKU’s.

Zet de kiezer in Options Price Calculator. De klant pakt een tint. Jij houdt de voorraad op de rollen die je écht legt.