Product configurator in je webshop: wat het is, wat het oplevert en hoe je het bouwt

Een product configurator is een onderdeel van je webshop waarin de klant zelf zijn product samenstelt: afmetingen, materiaal, kleur, opties. Bij elke keuze ziet hij de prijs en het resultaat, in beeld of in 3D. Het levert het meest op bij maatwerk, producten met veel varianten en producten die nu via een offerte lopen.

Een product configurator vervangt de rij keuzelijstjes op een productpagina door een stappenplan. De klant kiest per stap, ziet wat die keuze doet met het product en de prijs, en legt aan het eind één samengesteld product in de winkelwagen of vraagt er een offerte voor aan.

Het verschil met gewone varianten zit in de regels. Een variant is een vaste combinatie die al bestaat: maat M in blauw. Een productconfigurator werkt met regels: een tafel van 180 centimeter kan alleen met vier poten, eiken kost per centimeter meer dan grenen, en een bepaalde afwerking is niet leverbaar in combinatie met een andere. Die regels zijn het eigenlijke werk; de schermen eromheen zijn het zichtbare deel.

Drie onderdelen zitten in elke configurator:

• Keuzes en afhankelijkheden: wat kan met wat, en wat valt af na een keuze.
• Prijsregels: een vaste toeslag, een percentage, of een prijs per maat of per aantal.
• Weergave: tekst, een foto per keuze, een samengestelde afbeelding of een 3D-model.

Niet elke shop heeft er een nodig. Drie situaties waarin hij zich wel terugbetaalt:

• Maatwerkproducten. Gordijnen op maat, meubels, bordjes met tekst. De klant kan niet kiezen uit een voorraad, dus hij moet iets kunnen invullen.
• Veel varianten. Een product met vijf opties en tien waarden per optie heeft meer combinaties dan je als losse varianten wilt beheren, en meer dan een platform als Shopify toestaat: daar kan een product tot 2.048 varianten en maximaal drie opties hebben.
• Offerteproducten. Wat nu via mail en telefoon loopt, omdat de prijs afhangt van de keuzes. Een configurator die de prijs direct laat zien, haalt een deel van die vragen weg, en de aanvragen die overblijven zijn al ingevuld.

In alle drie gevallen doet een configurator hetzelfde: hij haalt een twijfelmoment weg. De klant hoeft niet te raden wat iets kost of hoe het eruitziet. Of dat meer bestellingen oplevert, meet je net als elke andere wijziging in je shop; hoe je dat aanpakt, lees je in ons stuk over conversie.

Wat hij niet doet: een product verkopen dat niemand zoekt. Een configurator maakt een goed product makkelijker te kopen, niet een onbekend product bekend.

De weergave is de keuze die het meest bepaalt wat de bouw kost.

Weergave	Hoe het werkt	Past bij
Tekst en keuzelijsten	alleen keuzes en een prijs	technische producten, onderdelen
2D, een foto per keuze	per optie een eigen beeld	kleuren, stoffen, afwerkingen
2D, samengesteld beeld	lagen die over elkaar vallen	producten met losse onderdelen
3D	één model dat van kleur en vorm verandert	meubels, voertuigen, producten met veel combinaties

Een 3D configurator is het zichtbaarste en het zwaarste. Je hebt een 3D-model nodig van het product en van elke variatie, en dat model moet klein genoeg zijn om op een telefoon snel te laden. Shopify ondersteunt 3D-modellen als productmedia in de formaten GLB en USDZ, en adviseert voor een model een bestand van ongeveer 4 MB. Buiten Shopify is model-viewer van Google een veelgebruikte open source bouwsteen om een 3D-model op een pagina te tonen, ook in augmented reality.

Onze vuistregel: begin met 2D, tenzij de klant het product echt van alle kanten moet zien om te kunnen kiezen. Foto's per keuze zijn goedkoper te maken, laden sneller en zijn makkelijker bij te werken als het assortiment verandert.

Er zijn drie manieren om een online configurator in je shop te krijgen.

Met een extensie of app

Voor eenvoudige samenstelopties is een bestaande uitbreiding genoeg. Op WooCommerce doet de extensie Product Add-Ons dat: keuzelijsten, vinkjes, tekstvelden, een bestandsupload, en per optie een vaste toeslag, een percentage van de prijs of een bedrag per aantal. Op Shopify kan een thema met line item properties extra velden aan een product hangen, zoals een graveertekst of een upload, en voor meer dan drie opties verwijst Shopify naar apps uit de App Store.

Als maatwerk

Zodra de regels ingewikkeld worden, of de configurator het hart van de shop is, bouwen we hem zelf. Dan staan de keuzes, de afhankelijkheden en de prijsregels in een CMS dat de redactie zelf beheert, en is de configurator een eigen onderdeel van de site. Dat doen we met maatwerk op Payload voor het beheer en Next.js voor de site zelf, zodat de configurator snel reageert op elke keuze.

Koppelen

Een configurator staat niet los van de rest. Vier koppelingen komen bijna altijd terug:

• Prijsregels uit de bron. Staan prijzen in een ERP of een prijslijst, dan leest de configurator ze daar en onderhoudt niemand ze op twee plekken.
• Voorraad en levertijd per onderdeel, zodat een keuze die niet leverbaar is ook niet te kiezen is.
• Order naar de administratie. Het samengestelde product moet met alle keuzes in de order staan, zodat de productie of het magazijn weet wat er gemaakt moet worden en niemand het opnieuw hoeft uit te vragen.
• Offerte naar het CRM. Een samengesteld product dat als aanvraag binnenkomt, hoort met alle keuzes en de bron van het bezoek in je CRM te staan, bijvoorbeeld in HubSpot. Dan belt verkoop iemand die al weet wat hij wil.

Twee dingen horen er altijd bij. Een samenvatting aan het eind, waarin de klant alle keuzes nog één keer ziet voordat hij bestelt. En een configurator die op een telefoon net zo goed werkt als op een groot scherm: keuzes onder elkaar in plaats van naast elkaar, grote aanraakvlakken, en een beeld dat meeschuift zodat de klant ziet wat hij kiest.

Een vast bedrag is er niet, omdat de spreiding te groot is. Wat de prijs bepaalt:

• Het aantal keuzes en regels. Vijf onafhankelijke opties zijn eenvoudig; afhankelijkheden tussen opties kosten de meeste tijd.
• De weergave. Tekst is het goedkoopst, 3D het duurst, omdat daar de modellen bij komen.
• De koppelingen. Prijzen uit een ERP, voorraad per onderdeel, offertes naar een CRM.
• Het beheer. Kan de redactie zelf opties en prijzen wijzigen, of moet daar een ontwikkelaar voor komen?

De ondergrens is een extensie: Product Add-Ons kost in de marketplace van WooCommerce € 69 per jaar. Voor maatwerk noemen we een vaste prijs vooraf zodra duidelijk is welke keuzes, regels en koppelingen erin moeten. Een product configurator die op een middag in te richten is en een die maanden werk is, heten hetzelfde, dus begin met de lijst regels, niet met het ontwerp.

• Shopify Help Center: adding variants, opgehaald op 29 september 2026
• Shopify.dev: line item properties (Liquid, line_item), opgehaald op 29 september 2026
• Shopify Help Center: creating 3D models for merchants, opgehaald op 29 september 2026
• Shopify Help Center: product media types, opgehaald op 29 september 2026
• Product Add-Ons, WooCommerce Marketplace, opgehaald op 29 september 2026
• WooCommerce: Managing products, opgehaald op 29 september 2026
• model-viewer, Google, opgehaald op 29 september 2026