Shopify productafbeelding wisselen bij een optie

De klant kiest linnen. De prijs beweegt. Het hoofdbeeld blijft het katoen van de eerste foto. In de winkelwagen hetzelfde plaatje. Fulfillment ziet de stof op de orderregel, de shopper niet. Dat is geen “traag thema”. Native Shopify koppelt media aan varianten, niet aan een calculator-veld.

Wat je zoekt is Shopify productafbeelding wisselen bij optie: één mapping van veldwaarde naar foto, op de productpagina. Optioneel ook de regel in de cart, als de app embed aanstaat. Geen extra SKU per tint stof.

Shopify Help Adding variants blijft drie options en 2048 variants. Niet 100. Linnen versus katoen als échte voorraad hoort daar. De printfoto bij “finish metallic” niet: dat is geen cel in het variant-raster.

Gisteren ging het over de kleurkiezer als veld. Dit stuk is de foto ernaast. De listing van Options Price Calculator noemt swatches en variant images. De mapping zelf staat in de Option images-docs — Premium, en apart van live preview.

Varianten hebben media. Calculator-opties niet.

Een Shopify-variant mag een media-slot hebben. Kleur Rood toont de rode trui omdat Rood een option value is op het product. Drie options, klaar.

Een calculator-optie is géén vierde Shopify-option. Stof, afwerking, gravure-tekst: dat zijn velden. De prijsformule leest ze. Het gallery-blok van het thema niet, tot jij zegt welk plaatje bij welke waarde hoort.

Line item properties (`properties[Stof]`) bewaren de string. Ze wisselen de foto niet. Een Liquid-snippet die “als linnen dan andere URL” hardcodeert, breekt bij de volgende theme-update.

Wat native wél hoort: de stof die je op rol legt, met voorraad. Dat blijft Color/Materiaal als variant. Wat native niet hoort: twintig finish-foto’s als twintig SKU’s, alleen zodat de gallery meeschuift.

Wat shops nu doen tot de inbox vol zit

Elke stof als variant-value

Linnen, katoen, velvet. Eén option-slot op. De koper wil daarna nog een maat in millimeters. Die millimeter is geen variant. De foto’s zitten vast op de stoffen, de calculator eronder heeft zijn eigen dropdown. Twee waarheden, één productpagina.

Foto in de swatch, niet in de gallery

De Swatch-docs laten een image op het staaltje toe (JPEG, PNG, WebP, GIF). Dat is het knopje. Het hoofdbeeld blijft de eerste productfoto. Shoppers klikken velvet en zien nog steeds linnen op 1200 pixels.

Live preview voor alles

Live preview (Product Personalizer) is Premium en iets anders: een laag over de productfoto, bijvoorbeeld tekst of een upload. Option images wisselen de bestaande foto. Geen overlay, geen customizer-bestand. Docs zeggen het hard: apart van live preview.

Geen van die routes geeft je: calculator-veld → hoofdfoto (en cart-thumb als de embed aanstaat), zonder extra variants.

Premium: veldwaarde naar foto

Options Price Calculator is Built for Shopify (5.0, 26 reviews). Onbeperkte productopties en formules, zonder extra varianten. Live listing, facturatie in USD:

• Free — 20 uses; op een Shopify Develop-plan altijd gratis

• $9.99/maand — onbeperkte opties, AI, formula builder, metafields, styling, multilingual

• $19.99/maand (Premium) — + conditional logic, Font Picker, live preview, price breakdown, lookup tables en file uploads

• $39.99/maand — + conditional fields, draft-order checkout, admin-calculator, setup-service

Option images zitten op Premium. Claim ze niet op Free of $9.99.

Option images (Premium): in plaats van alleen de prijs te updaten, wisselt de calculator het hoofdbeeld — en de cart line image als de app embed actief is — op basis van:

• één optie (één veldwaarde → één foto)

• een combinatie (twee of meer veldwaarden → één foto)

Voorbeeld: stof linnen → foto A. Stof linnen + finish metallic → foto B. Katoen blijft foto C, of combinatie.

Waar je het zet

1. Open de calculator in de Calculator builder.

2. Stap Product preview.

3. Option images openen.

4. Feature aanzetten, regels toevoegen.

5. Beelden uploaden of kiezen, mappen op veldwaarden.

6. Opslaan en testen op een productpagina.

Stabiele keys, geen losse labels

Docs-tip: gebruik duidelijke option keys (dropdown / radio / swatch-waarden). Hernoem je later het label van “Linnen” naar “Linnen (gewassen)”, blijft de mapping staan als de key hetzelfde is.

Begin met regels op één veld. Combinaties pas als écht één foto van twee keuzes afhangt. Houd bestanden redelijk klein voor de storefront.

Gallery van het thema

Storefront Theme Bindings: product image selectors wijzen naar het media-gebied. Die selectors gebruikt de app om het getoonde beeld te wisselen. Eerste selector die matcht, wint. Knop Pick product image on storefront vult het veld. Alleen nodig bij een afwijkende gallery, of als je de Customizer gebruikt.

Cart-thumbs: de embed moet aan. Anders wisselt de PDP wél en de cart nog de standaard productfoto. Dat is geen bug in de mapping, dat is de embed.

Live preview / Customizer is een andere Premium-laag. Option images hebben geen gepersonaliseerde render nodig. Verwar `__ooCustomImageUrl` (customizer) niet met deze mapping.

Praktijk: gordijn, stof vast, finish als foto

Shop “Raamlijn”. Twee stoffen op voorraad: linnen en katoen. Dat blijft Materiaal als native variant — echte rollen, echte SKU’s. De finish (mat / metallic) is geen voorraad. Metallic mag een andere sfeerfoto.

1. Installeer Options Price Calculator. Premium ($19.99/maand) voor option images. Starter bouwt de velden; de fotowissel niet.

2. Swatch of dropdown `finish`, key `finish`, waarden `mat` en `metallic`. Stof blijft de Shopify-variant.

3. Product preview → Option images. Twee regels: `mat` → foto mat, `metallic` → foto metallic. Nog geen combinatie.

4. Theme app block op de productpagina. Selectors: prijs, Add to cart, en product image als de gallery niet standaard is.

5. Embed aan. Test: kies metallic, kijk naar het hoofdbeeld, voeg toe, open de cart. Daarna linnen + mat, zelfde check.

Wil metallic op linnen een derde plaatje? Dan pas een combinatieregel: variant blijft linnen (SKU), velden `finish=metallic` → foto D. Katoen + metallic kan foto E zijn, of dezelfde D als het visueel niet scheelt.

Koppel de calculator via Linking Products & Variants. Eén calculator op beide stof-varianten volstaat als alleen `product_price` verschilt.

Aan de slag

1. Open de listing. Free: 20 uses. $9.99 voor de velden. $19.99 als je de foto wilt laten meebewegen.

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

3. Product preview → Option images. Keys gelijk trekken met dropdown/radio/swatch. Eerst één veld.

4. Theme bindings: product image selector als de gallery afwijkt. Embed aan voor de cart-thumb.

5. Test op de storefront, niet alleen in de builder. Leeg veld, wissel van variant, wissel van finish, kijk naar cart en orderregel.

Theme bindings bestaan omdat thema’s verschillen — niet “werkt overal zonder setup”. Server-side price validation hoort bij de app; die gaat over bedragen, niet over JPG’s.

Tot slot

Shopify productafbeelding wisselen bij optie is een Premium-mapping, geen extra Color-option. Eén veld of een combinatie. Hoofdfoto op de PDP; cart-thumb als de embed aanstaat. Los van live preview. Shopify zelf stopt bij drie options en 2048 variants. Die limiet omzeil je niet met twintig finish-SKU’s.

Zet de mapping in Options Price Calculator. De klant kiest de stof. Het beeld volgt. Jij houdt de voorraad op de rollen die je écht legt.