Shopify lettertypekiezer bij gravering: zonder SKU per font

De klant wil “Jansen” in een scriptletter op het eiken naambord, of “EVA” in een strak slab-font op de hanger. Jij hebt Size, Materiaal en Afwerking al als Shopify-opties. Een vierde option “Lettertype” bestaat native niet, en Script / Slab / Serif als values lost het echte probleem niet op: de tekst zelf is open. Wat je zoekt is een Shopify lettertypekiezer gravering — één veld waarin de koper font, tekst én optioneel kleur kiest, zonder een SKU per combinatie.

Shopify Adding variants staat drie options en 2048 variants toe. Een Google Font is geen SKU. Een Liquid-invoer `properties[Tekst]` bewaart de zin, maar wijzigt de prijs niet en laat het lettertype niet meetellen. Theme-inputs zijn geen calculator.

Eerder schreven we over live preview van gepersonaliseerde producten: tekst op de productfoto. Dit stuk gaat over het veld ervoor — de lettertypekiezer zelf. De listing van Options Price Calculator noemt fonts onder Customization; op Premium is dat de Font Picker.

Een lettertype is geen variantoptie

Varianten zijn combinaties die je kunt inslaan of een media-slot geven. “Pacifico” is geen voorraad. Zet je vijf fonts als option values, dan eet dat één van je drie slots. De koper typt daarna alsnog de naam in een los tekstvak — of mailt hem. Je hebt dan een SKU-raster vol fonts én nog steeds geen gestructureerde tekst.

Wat native wél hoort: houtsoort of metaal als echte SKU, omdat je die legt. Wat native niet hoort: elke mogelijke typeface als option value, laat staan elke mogelijke gravurezin.

Line item properties lossen de prijs niet op. “Pacifico + 12 tekens” is geen checkout-bedrag tot iets de som live berekent. Een dropdown “Kies je font” in het thema zonder formule is decoratie.

Wat webshops nu doen tot de inbox vol zit

Script / Blok / Handschrift als drie variant-values. Werkt tot iemand een vierde wil, of tot een gelicentieerd font een toeslag moet dragen. De lijst groeit; de tekst zit er nog steeds niet in.

Alleen vrije tekst: de klant typt `Jansen`, `JANSEN`, of plakt emoji. Fulfillment ontcijfert. Geen consistent font, geen per-teken-prijs.

Mockup buiten checkout: Canva, PNG in de mail, draft order. Geen live totaal, geen fontwaarde in de formule. Retouren volgen: “dat is niet het lettertype dat ik bedoelde”.

Geen van die routes geeft je: dropdown met Google Fonts, vrije tekst ernaast, optioneel kleur, en drie losse prijsbijdragen — zonder extra variants.

Font, tekst en kleur in één Premium-veld

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 Font Picker (Premium) is geen Starter-veld. Claim hem niet op Free. Docs: één samengesteld blok, tot drie bedieningen:

1. Dropdown voor het lettertype (ingebouwde picker, Google Fonts).

2. Vrije tekst — standaardlabel “Text to engrave”, te vertalen.

3. Optioneel kleur: curated lijst, vrije picker, of beide.

Elk onderdeel kan de prijs apart raken. Dat is waarom het veld bij gravure, signing en print past — niet omdat het een vierde Shopify-option is.

Label, key, verplicht

Label staat boven de fontdropdown. Docs-voorbeeld: `Font`. Op de Nederlandstalige storefront bijvoorbeeld “Lettertype” of “Kies je font”.

Key is de technische id. Alleen kleine letters, cijfers en underscores; geen spaties. Typisch: `text` of `engraving`. Die key is hoe de formule het veld vindt.

Required field aan: de klant moet elk zichtbaar onderdeel afronden — font, tekst én (als je kleur toont) kleur — vóór Add to cart. Zet het aan als fulfillment geen blanco bord laser. Zet het uit als de gravure optioneel is.

Fontopties: label, Google Font, waarde

Elke optie heeft een Label, het Font zelf en een numerieke Value (float). Docs: `0` voor vrije fonts, `5` voor gelicentieerde. Sleep de volgorde, markeer een default, voeg of verwijder opties wanneer je wilt.

De Value is de Font option value in de formule. Pacifico gratis, een licensed slab + €5: dat is geen extra Shopify-variant, dat is een getal op de option.

Tekst hoort er altijd bij

De tekstinvoer staat altijd naast de fontdropdown. Je vertaalt het label per taal in het Translations-tabblad van de calculator. Multilingual zit op Starter+; de Font Picker zelf blijft Premium.

Geen lettertypekeuze nodig? Dan is dit het verkeerde veld. Gebruik een Text Field: numeric value bijvoorbeeld `12` betekent leeg = `0` in de formule, iets getypt = 12. De Font Picker is voor het moment dat het font zelf een keuze is.

Kleur: lijst, picker of beide

Zet Allow customer to choose color aan als de letters een kleur mogen hebben.

• Options: curated kleuren, elk met Label, Color en Value.

• Picker: vrije kleur, één numerieke waarde zodra er iets gekozen is, plus een default in hex.

• Both: twee radio’s, “Standard colors” / “Custom color”, beide te vertalen.

De prijs van de kleur is Font color option value. Intern: `{key}_color`.

Formule: drie bijdragen, geen `product_price + pacifico`

In de Formula Builder zijn `+ - × ÷ ( )` toegestaan. `product_price` is de geselecteerde variant — hier het naambord of de hanger.

De Font Picker verschijnt in Form fields met vriendelijke namen: Font option value, Number of characters, Font color option value. Je hoeft de interne keys niet te onthouden. Achter de schermen is `{key}_chars` het aantal tekens; `{key}_color` de kleurwaarde.

Per teken plus fonttoeslag (key `text`):

``` product_price + text_chars * 0.40 + text ```

`text` is hier de font-optiewaarde, niet de zin. Docs-tip: een computed property “Engraving total” houdt de hoofdformule kort. Afronden aan het eind: `Math.round(...)`.

Kleur erbij:

``` product_price + text_chars * 0.40 + text + text_color ```

Minimum- of maximumlengte, of “tweede fontoptie krijgt een andere factor”, is Premium conditional. `{key}_optidx` (nul-gebaseerde index van font of kleur) bestaat alleen in die regels, niet in de gewone formule. Op Starter bestaat de Font Picker niet.

De toeslag voor gravering behandelden we eerder als vast bedrag. Hier is de toeslag gekoppeld aan font, tekens en kleur in hetzelfde blok.

Praktijk: eiken naambord, hout als SKU, font als kiezer

SKU’s blijven native: eiken / zwart eiken (twee values). Dat is één option. Geen “Lettertype”-option, geen “Tekst”-option.

Calculator op Premium:

• Font Picker `engraving`, required, drie fonts (Blok = 0, Script = 4, Slab = 6)

• Kleurlijst: zwart = 0, wit = 0, goud = 8

• Formule `product_price + engraving_chars * 0.50 + engraving + engraving_color`

Klant kiest eiken (variant €42), typt “JANSEN” (6 tekens), pakt Script en goud: `42 + 3 + 4 + 8 = 57`. Live op de pagina, dezelfde som in checkout. Op de orderregel staan font, tekst en kleur — geen extra Shopify-variant “eiken-script-goud-jansen”.

Live preview (Product Personalizer) is een apart Premium-onderdeel: overlay op de productfoto. De Font Picker werkt ook zonder overlay; fulfillment leest dan de orderregel. Wie beide wil, zet Customizer én Font Picker aan — label beide als Premium.

Koppel de calculator via Linking Products & Variants. Eén calculator voor de hele bordlijn volstaat als alleen `product_price` per houtsoort verschilt.

Vertalingen: hoofdlabel, “Text to engrave”, kleurlabels en de radio’s “Standard colors” / “Custom color” in het Translations-tabblad. De formule blijft hetzelfde.

Aan de slag

1. Installeer Options Price Calculator. Free: 20 uses (Develop altijd gratis). Starter $9.99/maand voor velden en formules. Premium $14.99/maand voor de Font Picker (en live preview als je de overlay wilt).

2. App block op de producttemplate, onder de prijs, boven Add to cart — How to Add the Extension to the Product Page.

3. Voeg Font Picker toe. Key `engraving` of `text`. Required aan als blanco gravure niet mag.

4. Houd hout, metaal of maat als Shopify-varianten. Fonts en zinnen niet.

5. Test: wissel van font, typ een korte en een lange naam, kies een kleur, laat het veld leeg (moet blokkeren als Required aan staat), controleer live prijs, winkelwagen en orderregel.

Server-side price validation voorkomt dat alleen de browser telt. Theme bindings bestaan omdat thema’s verschillen — niet “werkt overal zonder setup”.

Tot slot

Een Shopify lettertypekiezer gravering is geen vierde variantoptie en geen Canva-rondje. Het is één Premium-veld: font (met Google Fonts), tekst, optioneel kleur, en drie prijsbijdragen in de formule. Native Shopify stopt bij drie options en 2048 variants; “Pacifico + Jansen” hoort daar niet in. Per-teken en gelicentieerde fonts tel je als getallen, niet als SKU’s.

Zet de Font Picker in Options Price Calculator (Premium) en laat de volgende klant het lettertype kiezen vóór Add to cart — niet in een mail achteraf.