Live preview gepersonaliseerd product Shopify: tekst zien op de productfoto

Een ketting met initialen, een mok met een naam, een telefoonhoesje met logo: de klant koopt geen “medium”, maar *haar* tekst. Wie een live preview gepersonaliseerd product Shopify wil, merkt snel dat native varianten daar niet voor gemaakt zijn. Shopify bewaart geen doorlopende tekst als SKU, en een thema-invoerveld zonder preview laat de klant raden hoe “Emma” op het metaal valt.

Dit artikel legt uit waarom een raster van voorbeeldnamen faalt, hoe je tekst, lettertype en kleur wél op de productfoto toont, en hoe Options Price Calculator dat als Product Personalizer – Live Preview (Premium) koppelt aan een live prijs — zonder een extra variant per zin.

We schreven eerder over gravering en personalisatietoeslag. Daar ging het om de toeslag. Hier gaat het om zien: de tekst op de foto, dezelfde afbeelding in de winkelwagen, en fulfillment die niet hoeft te gissen.

Waarom Shopify geen personalizer is

Shopify-varianten zijn voorraadbare combinaties. Volgens Adding variants mag een product maximaal drie options hebben (bijvoorbeeld Kleur, Materiaal, Maat) en maximaal 2048 variants. De oude limiet van 100 is verhoogd; de drie-optiegrens niet. Extra cellen in je variantmatrix geven je geen vrije tekst, geen lettertypekeuze en geen live overlay op de productfoto.

Line item properties in het thema (`properties[Tekst]`) bewaren de invoer op de orderregel, maar wijzigen de prijs niet en tonen de tekst niet op de media. De klant typt “Emma”, ziet nog steeds de blanco productfoto, en betaalt de vaste variantprijs — of jij gaat screenshots en offertes heen-en-weer sturen.

Wat native wél kan: metaal, kettinglengte of hoesjesmaat als echte SKU, omdat die inkoop en voorraad sturen. De gravuretekst, het lettertype en de kleur van de letters horen daar niet in.

Wat merchants nu proberen

1. Voorbeeldnamen als variant

“Anna”, “Emma”, “Noah” als option values. Dat vreet je 2048-plafond niet meteen op, maar het is geen personalisatie. Wie “Sofía” of een bedrijfsnaam nodig heeft, belt. En de productfoto blijft een stockshot.

2. Alleen een thema-invoerveld

Een Liquid-input onder Add to cart. De orderregel heeft tekst, de winkelwagen toont de standaardthumbnail, en de prijs blijft staan. Retouren volgen: “zo zag ik het niet”.

3. Een mockup-tool los van de checkout

De klant ontwerpt in een externe tool, mailt een PNG, jij maakt een draft order. Geen live prijs, geen `__ooCustomImageUrl` op de regel, en support die de tekst opnieuw intypt.

Geen van die routes geeft je: tekst op de productfoto terwijl iemand typt, lettertype en kleur die meetellen in de som, en dezelfde preview in cart drawer of Ajax cart.

Hoe Options Price Calculator dit oplost

Options Price Calculator is Built for Shopify (5.0 uit 25 reviews op de listing). De listing noemt expliciet live preview for personalized products with custom product options, naast onbeperkte opties (swatches, file upload, custom text, fonts) en dynamische prijzen. Starter $9.99/maand: onbeperkte opties, formula builder, metafields, multilingual, AI-generatie. Premium $14.99/maand: + conditional logic, Font Picker, Product Personalizer – Live Preview, real-time price breakdown. Free: 20 uses; op een Shopify Develop-plan altijd gratis. Facturatie in USD.

Live preview is dus geen Free- of Starter-feature. Zet het niet zo in je productcopy.

Customizer: preview op de productfoto

De docs noemen de add-on Customizer. Die mount de live preview over de productafbeelding van je thema. Daarvoor heb je Storefront Theme Bindings nodig: Product image selectors die naar het media-gebied wijzen. Alleen nodig als je de Customizer gebruikt of als de productfoto moet reageren op calculatorselecties.

Vul die selectors niet met de hand als het niet hoeft. De Selector Picker heeft Pick product image on storefront: er opent een venster met je productpagina, je klikt op de foto, de app schrijft de CSS-selector. Na een theme-switch: opnieuw alle drie de pickers (prijs, Add to cart, productfoto).

De Customizer kan per order een gepersonaliseerde afbeelding maken. Die URL landt op de line item property `__ooCustomImageUrl`. Cart line item image selectors vervangen dan de standaardthumbnail in winkelwagen en cart drawer door die preview. Zonder die selectors ziet de klant op de productpagina wél “Emma”, en in de drawer weer de blanco stockshot.

Velden: Font Picker of tekst + file upload

Voor gravure, signing of print is de Font Picker (Premium) het juiste blok. Het is één samengesteld veld:

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

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

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

Elk onderdeel kan de prijs raken. Font-opties hebben een Label, een Font en een numerieke Value: `0` voor vrije fonts, `5` voor gelicentieerde. Zet Required field aan als je geen blanco gravure wilt: dan moeten font, tekst én (als zichtbaar) kleur ingevuld zijn vóór Add to cart.

Geen lettertypekeuze nodig? Gebruik een Text Field (`text_input`, lowercase key). Numeric value bijvoorbeeld `5`: leeg = `0` in de formule, iets getypt = 5. Logo erbij: file upload, de docs rekenen de geconfigureerde waarde × aantal bestanden.

Formule: toeslag + per teken

In de Formula Builder zijn `+ - × ÷ ( )` toegestaan. `product_price` is de prijs van de geselecteerde variant — hier het basisproduct (ketting, mok, hoes).

De Font Picker verschijnt in het Form fields-dropdown met vriendelijke namen: Font option value, Number of characters, Font color option value. Intern is `{key}_chars` het aantal tekens in Text Field, Textarea of Font Picker-tekst; `{key}_color` de numerieke waarde van de gekozen kleur.

Eenvoudig: basis + gravuretoeslag zodra er tekst is (Text Field numeric value `12`):

``` product_price + engraving ```

Per teken plus fonttoeslag (Font Picker-key `text`):

``` product_price + text_chars * 0.35 + text ```

`text` is hier de font-optiewaarde. Een computed property “Engraving total” houdt de hoofdformule leesbaar, zoals de font-docs adviseren. Afronden aan het eind: `Math.round(...)`.

Minimum- of maximumlengte, of een hogere factor boven 20 tekens, is Premium conditional — niet Free/Starter. `{key}_optidx` (nul-gebaseerde index van font of kleur) bestaat alleen in die regels.

Voorbeeld: zilveren hanger met initialen

SKU’s blijven native: metaal (zilver / verguld) en kettinglengte (40 / 45 / 50 cm). Dat zijn twee van je drie options. Geen “Tekst”-option.

Calculator op Premium:

• Font Picker `text`, required, twee fonts (Script = 0, Slab = 4)

• Optionele kleurlijst: zwart = 0, rose = 3

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

Klant kiest verguld 45 cm (variant €48), typt “EVA” (3 tekens), kiest Slab en rose: `48 + 1.20 + 4 + 3 = 56,20`. Live op de pagina, dezelfde som in checkout. De Customizer legt “EVA” in Slab over de hangerfoto. In de cart drawer vervangt `__ooCustomImageUrl` de stockthumbnail.

Koppel de calculator via Linking Products & Variants. Eén calculator voor de hele sieraadlijn is genoeg als alleen `product_price` verschilt. Een tweede product (mok i.p.v. hanger) krijgt een andere image-selector of een tweede calculator als de overlay-positie niet klopt.

Multilingual (Starter+): labels van de Font Picker vertaal je in het Translations-tabblad — hoofdlabel, “Text to engrave”, kleurlabels, radio’s “Standard colors” / “Custom color”. De formule blijft hetzelfde.

Wat je nodig hebt om te starten

1. Installeer Options Price Calculator. Free: 20 uses (Develop-plan altijd gratis). Starter $9.99/maand voor velden en formules. Premium $14.99/maand voor Font Picker én Product Personalizer – Live Preview.

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. Open App settings: Product URL, daarna Pick product image (en prijs + ATC). Zet cart-thumbnailselectors als je de gepersonaliseerde afbeelding in de drawer wilt.

4. Maak de Font Picker of het tekstveld. Koppel de calculator aan de varianten. Houd metaal en maat als Shopify-varianten; tekst niet.

5. Test: typ “EVA”, wissel van font en kleur, controleer overlay, live prijs, winkelwagenfoto en orderregel.

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

Tot slot

Een live preview gepersonaliseerd product Shopify is geen variant per naam. Het is tekst, lettertype en kleur op de productfoto, met een formule die die keuzes prijst, en dezelfde preview in de winkelwagen. Native Shopify stopt bij drie options en 2048 variants; vrije tekst op de media hoort in de Customizer.

Zet Font Picker en live preview in Options Price Calculator (Premium) en laat de volgende klant “EVA” zien vóór Add to cart — niet pas op de pakbon.