Inventus Online
Inventus Online B.V. — contactgegevens
Handleiding

Modulaire
productconfigurator

Samengestelde producten stap voor stap laten configureren — van stappen en zichtbaarheidsregels tot IMC-codes, componentproducten en de meerprijs-modus


VoorWebshopbeheerders
Versie3.0
Datum31 juli 2026
Voor jouw e-commerce ambities

Inhoudsopgave

  1. 1Introductie3
  2. 2Wat de klant ziet4
  3. 3Begrippen — slugs en IMC7
  4. 3.1De slug7
  5. 3.2De Internal Matching Code (IMC)8
  6. 3.3IMC-templates en placeholders9
  7. 3.4Hoofdproduct en componentproducten11
  8. 4De bouwstenen van een configurator12
  9. 4.1Staptypes12
  10. 4.2Opties: sleutel, zichtbare naam en optie-instellingen12
  11. 4.3Zichtbaarheidsregels14
  12. 4.4Validatieregels16
  13. 4.5Stapvolgorde en vast aantal16
  14. 5Een configurator instellen — stap voor stap18
  15. 6De meerprijs-modus (basisprijs + toeslagen)26
  16. 6.1Hoe de prijs wordt opgebouwd26
  17. 6.2De configurator inrichten26
  18. 6.3De visuele opbouw29
  19. 6.4Wat de klant ziet en bestelt29
  20. 6.5Stappenplan van begin tot eind30
  21. 7Veelgestelde vragen en tips32

Introductie

Met de modulaire configurator stellen klanten op je webshop een samengesteld product stap voor stap samen. Denk aan een boxspring: de klant kiest eerst de afmeting, dan het hoofdbord, het voetbord, de onderbak, het matras, enzovoort. Elke keuze leidt tot een specifiek onderdeelproduct met een eigen prijs; de totaalprijs is de som van alle gekozen onderdelen.

Deze handleiding beschrijft hoe je zo'n configurator inricht in het beheer: van de begrippen (slug en IMC), via de bouwstenen (staptypes, opties, zichtbaarheids- en validatieregels), tot het koppelen van het hoofdproduct en de alternatieve meerprijs-modus. De voorbeelden komen uit twee demo-inrichtingen: een boxspring-configurator (op componentproducten) en een tafelconfigurator (op basisprijs met toeslagen). Welke stappen, regels en grenzen jouw eigen configurator krijgt, bepaal je volledig zelf bij het inrichten.

Gebruik de modulaire configurator wanneer:

  • een product bestaat uit meerdere los te kiezen onderdelen;
  • de klant zelf de samenstelling wil bepalen;
  • prijzen afhankelijk zijn van de gekozen combinatie;
  • bepaalde keuzes alleen beschikbaar moeten zijn op basis van eerdere selecties (bijvoorbeeld: twee losse matrassen alleen bij een breed bed).

Wat je ermee kunt configureren:

  • Afmetingen — de klant kiest een maat (bijvoorbeeld 160x200 cm).
  • Onderdelen — per stap een keuze uit beschikbare opties (bijvoorbeeld een vlak of uitstekend hoofdbord).
  • Ja/nee-keuzes — een stap die aan of uit kan staan (bijvoorbeeld "Wil je één groot matras?").
  • Meerkeuze met aantallen — meerdere opties tegelijk aanvinken, elk met een eigen aantal (bijvoorbeeld accessoires zoals nachtkastjes).
  • Vrije invoer — een tekstveld bij een optie (bijvoorbeeld de afmeting van een plint-uitsparing).
  • Conditionele stappen — stappen die alleen verschijnen op basis van eerdere keuzes.
  • Prijsberekening — automatische optelling van alle gekozen componenten, live zichtbaar voor de klant.
Voordat je begint Je hebt toegang nodig tot het admin panel (beheer) van je webshop. Kennis van het reguliere productbeheer is handig: de onderdelen van een configuratie zijn gewone producten met een prijs. Zie daarvoor de handleiding Producten & variaties.

Wat de klant ziet

Voordat je de configurator inricht, helpt het om te weten wat het eindresultaat is voor de bezoeker van je webshop.

De SAMENSTELLEN-knop en de vanaf-prijs

Op de productpagina van een configureerbaar product staat een SAMENSTELLEN-knop in plaats van de gebruikelijke winkelwagenknop. Het product is dus niet direct te bestellen — de klant stelt het eerst samen. De webshop berekent automatisch een vanaf-prijs: de goedkoopst mogelijke samenstelling, inclusief en exclusief btw.

Productpagina van een configureerbaar product met vanaf-prijs en SAMENSTELLEN-knop
Afbeelding 1 — De productpagina van een configureerbaar product (hier het boxspring-voorbeeld): automatische vanaf-prijs en de SAMENSTELLEN-knop in plaats van de winkelwagenknop.

De wizard

Na een klik op Samenstellen opent een wizard die de klant door de stappen leidt:

  • Stappenteller en stappenlijst — de klant ziet steeds waar hij is in het proces (bijvoorbeeld "Stap 4 van 11") en welke stappen volgen. De lijst is dynamisch: zichtbaarheidsregels laten stappen verschijnen of verdwijnen op basis van eerdere keuzes. Kiest de klant bijvoorbeeld een brede maat en daarna een gesplitste uitvoering, dan groeit de lijst ter plekke met de stappen die daarbij horen.
  • Live prijsberekening — bij elke keuze wordt de totaalprijs direct bijgewerkt in het configuratie-overzicht naast de wizard. De klant ziet dus meteen wat een duurdere uitvoering of een extra optie met de prijs doet.
  • Configuratie-overzicht — aan het einde toont de wizard een overzicht van alle gemaakte keuzes met de totaalprijs, ter controle voordat de klant afrondt.
De wizard met stappenlijst, maatopties en configuratie-overzicht
Afbeelding 2 — De wizard: stappenlijst, keuzeopties (hier de maatkeuze) en het live configuratie-overzicht.

Afronden en extra acties

Vanuit het configuratie-overzicht voegt de klant de complete samenstelling in één keer toe aan de winkelwagen. Daarnaast zijn er drie extra acties:

  • Versturen per e-mail — de klant mailt de configuratie naar zichzelf of iemand anders, bijvoorbeeld om er thuis over te beslissen.
  • Downloaden als PDF — de configuratie als document, met alle keuzes en de totaalprijs.
  • Afspraak maken — de klant plant een afspraak, bijvoorbeeld voor advies in de showroom over de samengestelde configuratie.
Het configuratie-overzicht met totaalprijs, winkelwagenknop en extra acties
Afbeelding 3 — Het configuratie-overzicht met de totaalprijs, de winkelwagenknop en de extra acties.

Bewerken vanuit de winkelwagen

In de winkelwagen staat de configuratie als één samengesteld artikel, met alle gekozen onderdelen als specificatie — inclusief eventueel ingevulde tekstvelden (zoals de afmeting van een plint-uitsparing). Bedenkt de klant zich, dan kan hij de configuratie vanuit de winkelwagen opnieuw bewerken: de wizard opent dan met alle eerdere keuzes al ingevuld, zodat alleen de gewenste stap aangepast hoeft te worden.

De winkelwagen met een samengesteld product
Afbeelding 4 — De configuratie in de winkelwagen: één regel met de complete specificatie en de link "Configuratie bewerken".

Begrippen — slugs en IMC

Twee begrippen komen in deze handleiding steeds terug: de slug (de unieke code van een stap) en de IMC (de code waarmee het systeem het juiste onderdeelproduct vindt). Wie deze twee begrijpt, begrijpt de hele configurator.

Tabel 1 — Begrippen in het kort
BegripBetekenisVoorbeeld
ConfiguratorHet geheel van stappen dat de klant doorlooptBedconfigurator
StapEén keuze in de wizardMatras
SlugUnieke code van een stap, in hoofdlettersMATRAS
OptieEén keuzemogelijkheid binnen een stap, met een sleutel en een zichtbare naamMEDIUM / "Medium"
IMCInternal Matching Code — de unieke code van een product waarmee de configurator het opzoektMAT-MEDIUM-90x200
IMC-templateHet patroon per stap waaruit de IMC wordt opgebouwdMAT-{MATRAS}-{WIDTH}x{LENGTH}
HoofdproductHet configureerbare product dat de klant in de shop zietHet bed dat de klant koopt
ComponentproductEen los onderdeel met eigen IMC en prijsMatras medium 90x200

De slug

Elke stap in de configurator heeft een slug: een korte, unieke code in hoofdletters. Bij het invoeren wordt de slug automatisch omgezet naar hoofdletters.

Tabel 2 — Voorbeelden van slugs
StapSlug
AfmetingenAFMETINGEN
HoofdbordHOOFDBORD
OnderbakONDERBAK
Onderbak linksONDERBAK_LINKS
Groot MatrasGROOT_MATRAS
MatrasMATRAS
StofferingSTOFFERING
PotensetPOTENSET

De slug wordt op drie plekken gebruikt:

  • als verwijzing in zichtbaarheidsregels (bijvoorbeeld "toon deze stap alleen als GROOT_MATRAS gelijk is aan false");
  • als placeholder in IMC-templates (bijvoorbeeld {MATRAS} wordt vervangen door de gekozen waarde);
  • als unieke herkenning van de stap in het systeem.
Goed om te weten Elke slug moet uniek zijn: twee stappen kunnen niet dezelfde slug hebben. Gebruik beschrijvende namen met underscores tussen woorden — dus GROOT_MATRAS, niet GROOTMATRAS.

De Internal Matching Code (IMC)

De Internal Matching Code (IMC) is het systeem waarmee de configurator weet welk concreet product bij een keuze hoort. Elk componentproduct heeft een unieke IMC-code. Wanneer de klant een keuze maakt, genereert de configurator een IMC-code en zoekt het product met precies die code op — inclusief de bijbehorende prijs.

Voorbeeld: kiest een klant een matras "Medium" (sleutel MEDIUM) bij een bed van 90x200 cm, dan genereert het systeem de code MAT-MEDIUM-90x200 en zoekt het het product met exact die IMC-code op.

IMC-templates en placeholders

Elke stap heeft een IMC-template: een patroon met placeholders tussen accolades { } dat wordt ingevuld op basis van de keuzes van de klant.

Tabel 3 — Beschikbare placeholders
PlaceholderBetekenisVoorbeeld
{PARENT_PRODUCT}De IMC van het hoofdproduct, zonder het voorvoegsel PARENT-bed
{WIDTH}Gekozen breedte in cm160
{LENGTH}Gekozen lengte in cm200
{HALF_WIDTH}De helft van de breedte80
{HALF_LENGTH}De helft van de lengte100
{DIMENSIONS}Breedte x lengte160x200
{STAP_SLUG}De geselecteerde waarde van een eerdere stap (vul de slug van die stap in)Afhankelijk van de keuze

Zo pakken templates en hun resultaat uit in de praktijk, in dit voorbeeld bij een bed van 160x200 cm:

Tabel 4 — IMC-templates en hun resultaat
StapIMC-templateKlant kiestResultaat
Afmetingen{PARENT_PRODUCT}-{WIDTH}x{LENGTH}160x200bed-160x200
VoetbordVB-{PARENT_PRODUCT}-0-{WIDTH}BijpassendVB-bed-0-160
OnderbakOB-{ONDERBAK}-{WIDTH}x{LENGTH}23 cmOB-23-160x200
Onderbak linksOB-{ONDERBAK_LINKS}-{HALF_WIDTH}x{LENGTH}20 cmOB-20-80x200
MatrasMAT-{MATRAS}-{WIDTH}x{LENGTH}Medium (MEDIUM)MAT-MEDIUM-160x200
TopperTOP-{TOPPER}-{WIDTH}x{LENGTH}Koudschuim (KOUDSCHUIM)TOP-KOUDSCHUIM-160x200
PotensetPOOT-{POTENSET}-zwart12 cmPOOT-12-zwart

Let op: {ONDERBAK}, {MATRAS}, {TOPPER} en {POTENSET} verwijzen naar de slug van de betreffende stap. De waarde die wordt ingevuld is de sleutel van de gekozen optie (bijvoorbeeld 23, MEDIUM of 12 — zie paragraaf 4.2).

De placeholder {HALF_WIDTH}

Bij bredere bedden worden bepaalde onderdelen gesplitst geleverd. De onderbak van een bed van 160 cm breed bestaat bijvoorbeeld uit twee delen van elk 80 cm. Daarvoor bestaat de placeholder {HALF_WIDTH}: die deelt de gekozen breedte automatisch door twee.

Tabel 5 — Werking van {HALF_WIDTH}
Gekozen breedte{WIDTH}{HALF_WIDTH}
140 cm14070
160 cm16080
180 cm18090
200 cm200100

Hoofdproduct en componentproducten

Een configureerbaar product kent twee niveaus:

  1. Hoofdproduct — het product dat de klant in de webshop ziet (bijvoorbeeld het bed zelf). Dit product is gekoppeld aan een configurator.
  2. Componentproducten — de individuele onderdelen (bijvoorbeeld "Matras medium 90x200"). Elk componentproduct heeft een unieke IMC-code en een eigen prijs.

Het hoofdproduct heeft zelf ook een IMC-code, met het voorvoegsel PARENT-. Dat voorvoegsel wordt automatisch verwijderd en de rest vormt de waarde van de placeholder {PARENT_PRODUCT}:

  • Hoofdproduct "Bed" heeft IMC PARENT-BED → {PARENT_PRODUCT} = bed. Het hoofdbord-template HB-{PARENT_PRODUCT}-0-{WIDTH} levert dan codes als HB-bed-0-180 op.
Goed om te weten Dankzij de placeholder {PARENT_PRODUCT} kun je dezelfde configurator met dezelfde stappen gebruiken voor meerdere productlijnen. De IMC-templates passen zich automatisch aan op basis van het gekoppelde hoofdproduct — je hoeft de stappen dus maar één keer in te richten. Componentproducten zet je meestal op zichtbaarheid Verborgen: ze horen niet los in de catalogus, maar moeten wel bestelbaar zijn via de configurator.

De bouwstenen van een configurator

Een configurator bestaat uit stappen; elke stap heeft een type, meestal een set opties, en optioneel zichtbaarheids- en validatieregels. In dit hoofdstuk leer je alle bouwstenen kennen; in hoofdstuk 5 zet je ze in de juiste volgorde in elkaar.

Staptypes

Het type van een stap bepaalt hoe de klant een keuze maakt:

Tabel 6 — Staptypes
TypeSysteemnaamBeschrijving
Afmeting Kiezersize_pickerDe klant kiest uit vooraf ingestelde afmetingen (bijvoorbeeld 90x200, 160x200). Elke maat heeft een breedte en lengte in centimeters.
Enkele Keuzesingle_choiceDe klant kiest één optie uit een lijst (bijvoorbeeld een vlak of uitstekend hoofdbord).
Ja/NeebooleanDe klant maakt een ja/nee-keuze (bijvoorbeeld "Wil je één groot matras?" of "Gestoffeerde matras met anti-slip?").
Meerkeuzemulti_selectDe klant vinkt meerdere opties tegelijk aan, elk optioneel met een aantal (bijvoorbeeld accessoires: twee nachtkastjes en een bedlampje).
AantalquantityDe klant voert een getal in (bijvoorbeeld het aantal extra kussens).

Opties: sleutel, zichtbare naam en optie-instellingen

Bij de staptypes met een keuzelijst stel je opties in. Elke optie heeft:

  • Sleutel (key) — de interne waarde die in de IMC-template wordt gebruikt. Houd deze kort en beschrijvend (bijvoorbeeld VLAK, 23, MEDIUM); de key verschijnt letterlijk in de gegenereerde IMC-code.
  • Zichtbare naam (label) — wat de klant op de website ziet (bijvoorbeeld "Vlak (zelfde breedte als bed)", "23cm hoog (standaard)", "Medium"). Dit mag langere, vriendelijke tekst zijn.
  • Beschrijving en tooltip (optioneel) — extra toelichting voor de klant.

Bij het type Afmeting Kiezer heeft elke optie daarnaast een breedte en lengte in centimeters — daaruit worden de placeholders {WIDTH}, {LENGTH}, {HALF_WIDTH} en {HALF_LENGTH} gevuld.

Een optie met sleutel en zichtbare naam
Afbeelding 5 — Een optie van de stap Matras: de sleutel MEDIUM stuurt de IMC-matching, de zichtbare naam "Medium" ziet de klant.

Optie-instellingen voor bijzondere gevallen

Per optie zijn er aanvullende instellingen voor situaties waarin de standaard IMC-matching niet volstaat:

Tabel 7 — Optie-instellingen
InstellingWat het doetVoorbeeld
IMC OverrideOverschrijft de IMC-template van de stap voor alleen deze optieDe luxe wielset in de stap Potenset matcht een WIEL-product in plaats van een POOT-product
SKU-koppelingKoppelt de optie rechtstreeks aan één product op basis van SKU (vaste prijs, geen IMC nodig); heeft voorrang op IMC-matchingEen accessoire dat in elke maat hetzelfde is
MeerprijsEen vast bedrag (excl. btw) voor deze optie, zonder productmatchingHoofdbord-opties zoals "Plint uitsparing" + € 99
Tekstveld vereisenToont een tekstveld wanneer de optie is gekozen; de ingevulde waarde reist mee naar samenvatting, winkelwagen en bestelling"Afmeting uitsparing (cm)" bij de plint-uitsparing
Optie-afbeeldingEen afbeelding die bij de optie wordt getoond tijdens het kiezenFoto van de onderbak van 10 cm
De aanvullende instellingen van een optie
Afbeelding 6 — De aanvullende optie-instellingen: IMC Override, SKU-koppeling, Tekstveld vereisen en Optie-afbeelding.

Zichtbaarheidsregels

Met zichtbaarheidsregels bepaal je wanneer een stap wordt getoond. Zo maak je de configurator dynamisch: stappen verschijnen of verdwijnen op basis van eerdere keuzes. Elke regel bestaat uit vier onderdelen:

Tabel 8 — Onderdelen van een zichtbaarheidsregel
OnderdeelWat vul je inVoorbeeld
Stap / dimensieDe stap of afmeting waarop je controleertWIDTH of GROOT_MATRAS
OperatorDe vergelijkingGelijk aan, Groter dan, …
WaardeDe waarde waarmee vergeleken wordt180 of true
ActieWat er gebeurt als de regel kloptTonen of Verbergen
Tabel 9 — Beschikbare operatoren
OperatorBetekenis
Gelijk aanWaarde is exact gelijk
Niet gelijk aanWaarde is niet gelijk
Groter danWaarde is groter (alleen voor getallen)
Groter dan of gelijk aanWaarde is groter of gelijk (alleen voor getallen)
Kleiner danWaarde is kleiner (alleen voor getallen)
Kleiner dan of gelijk aanWaarde is kleiner of gelijk (alleen voor getallen)
Een vanWaarde komt voor in een lijst
Niet een vanWaarde komt niet voor in een lijst
BestaatEr is een waarde ingevuld
Bestaat nietEr is geen waarde ingevuld

Je kunt meerdere regels combineren met twee modi:

  • Alle regels moeten kloppen (AND) — de stap wordt alleen getoond als aan alle regels is voldaan.
  • Minimaal één regel moet kloppen (OR) — de stap wordt getoond zodra aan ten minste één regel is voldaan.
Zichtbaarheidsregels op een stap
Afbeelding 7 — Zichtbaarheidsregels op een stap, hier met regeltype OR: de stap verschijnt zodra één van de regels klopt.

Zichtbaarheidsregels per optie

Naast regels op stapniveau kun je ook per individuele optie bepalen wanneer die zichtbaar is. Zo toon je binnen dezelfde stap verschillende opties op basis van eerdere keuzes. Zo stem je twee samenhangende stappen op elkaar af: heeft de klant in de ene stap een hoogte of maat gekozen, dan toont de vervolgstap alleen nog opties die daarbij passen.

Validatieregels

Met validatieregels stel je eisen aan de invoer van de klant:

Tabel 10 — Validatieregels
RegelBetekenis
VerplichtDe klant moet altijd een keuze maken
Verplicht alsDe klant moet een keuze maken als een bepaalde voorwaarde geldt
Verboden alsBepaalde waarden zijn niet toegestaan als een voorwaarde geldt
Gelijk aan veldDe waarde moet gelijk zijn aan die van een ander veld (bijvoorbeeld: de hoogte links en rechts moeten overeenkomen)
Minimum waardeHet ingevoerde getal moet minstens dit zijn
Maximum waardeHet ingevoerde getal mag niet hoger zijn dan dit

Stapvolgorde en vast aantal

Elke stap heeft een volgordenummer dat bepaalt in welke volgorde de stappen aan de klant worden getoond: stap 1 verschijnt als eerste, stap 2 als tweede, enzovoort. Je past de volgorde aan door de nummers te wijzigen of door stappen te verslepen in het beheer.

Goed om te weten Zet stappen waarvan andere stappen afhankelijk zijn altijd eerder in de volgorde. Een zichtbaarheidsregel werkt alleen als de klant die keuze al heeft kunnen maken; hetzelfde geldt voor een placeholder die naar een eerdere stap verwijst.

Vast aantal

Op de stap staat daarnaast het veld Vast aantal: het aantal stuks waarvoor deze stap altijd meetelt in de prijsberekening. Standaard staat dat op 1 — dat is het normale gedrag. Zet je het op 2, dan telt de prijs van het gekozen onderdeel twee keer mee. Dat gebruik je wanneer één keuze in de praktijk altijd meerdere stuks oplevert, bijvoorbeeld twee identieke bodems onder één bed, zonder dat je de klant twee keer dezelfde vraag wilt stellen.

De optielijst blijft daarbij de stukprijs tonen; het configuratie-overzicht en het totaal tonen het bedrag maal het aantal. Splits je een onderdeel al in twee aparte stappen (bijvoorbeeld links en rechts, elk met een eigen product), dan heb je dit veld niet nodig — die stappen worden immers los geprijsd.

Een configurator instellen — stap voor stap

Een complete configurator zet je in zeven stappen op. De eerste vijf richten de configurator zelf in; de laatste twee koppelen de producten eraan.

Stap 1 — Configurator aanmaken

  1. Open het overzicht — ga in het beheer naar E-commerce → Modulaire Configurators en klik op Modulaire Configurator aanmaken.
  2. Vul de gegevens in — een beschrijvende Naam (bijvoorbeeld "Bedconfigurator") en optioneel een korte Beschrijving.
  3. Kies de prijsmodus — voor een configurator met componentproducten kies je IMC (productmatching). De alternatieve meerprijs-modus komt in hoofdstuk 6 aan bod.
  4. Zet Actief aan — daarmee wordt de configurator beschikbaar voor gebruik.
  5. Sla op — de configurator bestaat nu, maar heeft nog geen stappen.
Het overzicht Modulaire Configurators
Afbeelding 8 — Het overzicht Modulaire Configurators, met per configurator het aantal gekoppelde stappen.
Het configurator-formulier met naam, prijsmodus en actief-schakelaar
Afbeelding 9 — Het configurator-formulier: naam, beschrijving, prijsmodus IMC (productmatching) en de Actief-schakelaar.

Stap 2 — Stappen aanmaken

Ga naar E-commerce → Configurator Stappen en maak per onderdeel een stap aan. Voor elke stap vul je in:

  1. Naam — wat de klant ziet (bijvoorbeeld "Matras").
  2. Slug — de unieke code in hoofdletters (bijvoorbeeld MATRAS); deze wordt automatisch omgezet naar hoofdletters.
  3. Beschrijving en tooltip — de beschrijving verschijnt als toelichting boven de opties ("Kies de hardheid van je matras"); de tooltip als informatie-icoon naast de staptitel.
  4. Stap Type — kies het juiste type: Afmeting Kiezer, Enkele Keuze, Ja/Nee, Meerkeuze of Aantal (zie paragraaf 4.1).
  5. Opties — voeg de beschikbare keuzes toe, elk met een sleutel (bijvoorbeeld MEDIUM) en een zichtbare naam (bijvoorbeeld "Medium"). Bij Afmeting Kiezer vul je per optie ook de breedte en lengte in centimeters in.
  6. IMC-template — het patroon voor de productmatching, bijvoorbeeld MAT-{MATRAS}-{WIDTH}x{LENGTH} (zie paragraaf 3.3).
  7. Actief — zet de schakelaar aan en sla op.
Het stap-formulier met naam, slug, beschrijving en type
Afbeelding 10 — De basisgegevens van een stap: naam, slug, beschrijving, tooltip en staptype.
Het IMC-template van een stap
Afbeelding 11 — Het IMC-template van een stap, opgebouwd uit vaste tekst en placeholders.

Stap 3 — Stappen koppelen aan de configurator

  1. Open de configurator en ga naar het onderdeel Configurator Stappen.
  2. Klik op Stap Toevoegen en selecteer de gewenste stap.
  3. Stel de volgorde in — een lager nummer wordt eerder getoond.
  4. Geef aan of de stap verplicht is en stel eventueel een standaardwaarde in — die is dan alvast voorgeselecteerd voor de klant (bijvoorbeeld "GEEN" bij de stap Voetbord).
  5. Herhaal dit voor alle stappen.
De gekoppelde stappen met volgorde, verplicht, standaardwaarde en IMC-template
Afbeelding 12 — De gekoppelde stappen in één overzicht: type, volgorde, verplicht, standaardwaarde en IMC-template.
Goed om te weten Stappen zijn herbruikbaar: je maakt een stap één keer aan en kunt die in meerdere configurators opnemen. De volgorde, het verplicht-zijn en de standaardwaarde stel je per configurator apart in.

Stap 4 — Zichtbaarheidsregels instellen (optioneel)

  1. Open de stap en ga naar het onderdeel Zichtbaarheid Regels.
  2. Klik op Regel Toevoegen.
  3. Kies de stap of dimensie waarop je wilt controleren (bijvoorbeeld Breedte (WIDTH)).
  4. Kies de operator (bijvoorbeeld "Groter dan of gelijk aan") en vul de waarde in (bijvoorbeeld 160).
  5. Kies de actie — Tonen of Verbergen.
  6. Stel het regeltype in — alle regels moeten kloppen (AND) of minimaal één (OR).

Stap 5 — Validatieregels instellen (optioneel)

  1. Open de stap en ga naar het onderdeel Validatie Regels.
  2. Klik op Validatie Toevoegen.
  3. Kies het regeltype (bijvoorbeeld "Verplicht" of "Gelijk aan veld") en stel — afhankelijk van het type — de afhankelijke stap en de voorwaarde in.

Stap 6 — Componentproducten aanmaken of importeren

Voor elke mogelijke combinatie van keuzes moet er een product bestaan met de juiste IMC-code. Dit is de belangrijkste stap:

  1. Maak voor elk onderdeel een product aan in het productbeheer (E-commerce → Producten), zoals je gewend bent. Bij grote aantallen loopt dat snel in de duizenden artikelen; gebruik dan de productimport.
  2. Geef elk product een Internal Matching Code die exact overeenkomt met het patroon van de IMC-template van de bijbehorende stap.
  3. Stel de prijs in op het product — deze prijs telt mee in de totaalprijs van de configuratie.
  4. Zet de zichtbaarheid op Verborgen — componentproducten horen niet los in de catalogus.

Reken vooraf uit hoeveel producten je nodig hebt. Een template als MAT-{MATRAS}-{WIDTH}x{LENGTH} met 3 keuzes in 21 maten vergt 63 producten; voor onderdelen die gesplitst geleverd worden komen de halve maten daar nog bovenop.

Belangrijk — dek alle combinaties af Ontbreekt een componentproduct, dan kan de configurator bij die combinatie geen product (en dus geen prijs) vinden en loopt de klant vast. Controleer bij het inrichten — en bij elke nieuwe optie of maat die je later toevoegt — dat er voor élke mogelijke combinatie een product met de juiste IMC-code bestaat. De IMC moet exact kloppen, inclusief hoofdletters en scheidingstekens.
Componentproduct met Internal Matching Code
Afbeelding 13 — Een componentproduct: de Internal Matching Code staat bovenaan het productformulier, de zichtbaarheid op Verborgen.

Stap 7 — Hoofdproduct koppelen

  1. Open het hoofdproduct (bijvoorbeeld het bed zelf) via E-commerce → Producten.
  2. Vul de Internal Matching Code van het hoofdproduct in, met het voorvoegsel PARENT- (bijvoorbeeld PARENT-BED). Dit veld staat bovenaan het productformulier, onder het artikelnummer. Het voorvoegsel wordt automatisch verwijderd om de placeholder {PARENT_PRODUCT} te vullen.
  3. Ga naar het tabblad Geavanceerd en selecteer bij het veld Modulaire Configurator de configurator die je hebt aangemaakt.
  4. Sla op — op de productpagina in de webshop verschijnt nu de SAMENSTELLEN-knop met de automatisch berekende vanaf-prijs.
Het hoofdproduct met een Internal Matching Code met voorvoegsel PARENT-
Afbeelding 14 — Het hoofdproduct: de Internal Matching Code met het voorvoegsel PARENT- staat bovenaan het productformulier.
Het veld Modulaire Configurator op het tabblad Geavanceerd
Afbeelding 15 — De koppeling op het tabblad Geavanceerd: het veld Modulaire Configurator verwijst naar de configurator.

De meerprijs-modus (basisprijs + toeslagen)

Naast de IMC-prijsmodus uit de vorige hoofdstukken kent de configurator een tweede prijsmodus: Meerprijs (basisprijs + toeslagen). Deze modus is gemaakt voor maatwerkproducten die als één artikel worden gemaakt en geleverd — in de voorbeelden hieronder een maatwerktafel: de klant kiest een vorm, rand, kleur, onderstel en maat, ziet het gekozen blad en onderstel als afbeelding opbouwen, en de prijs groeit mee met elke keuze. Er worden géén losse componentproducten gematcht — je stelt één basisprijs in en per keuze een toeslag.

Goed om te weten De meerprijs-modus is een aparte uitbreiding die per webshop wordt geactiveerd. Zie je de keuze "Meerprijs (basisprijs + toeslagen)" niet staan bij Prijsmodus, dan is de module voor jouw webshop niet ingeschakeld.

Hoe de prijs wordt opgebouwd

De totaalprijs van een samenstelling is altijd de som van drie onderdelen:

Tabel 11 — Prijsopbouw in de meerprijs-modus
OnderdeelWaar stel je het inVoorbeeld
BasisprijsOp de configurator zelf (sectie Prijsinstellingen)€ 499,00
Toeslag per gekozen optiePer optie van elke keuzestap (veld Toeslag)Ovaal blad + € 49,00
MaattoeslagIn de maatmatrix (tabblad Maattoeslagen): één bedrag per combinatie van lengte en breedte240 × 110 cm + € 130,00

De laagste mogelijke combinatie bepaalt automatisch de "vanaf-prijs" die bezoekers bij het product zien. Ontbreekt de basisprijs, dan toont de webshop "Prijs niet beschikbaar" en kan de klant de samenstelling niet bestellen.

De configurator inrichten

Een meerprijs-configurator gebruikt dezelfde stappen en stapkoppelingen als een IMC-configurator, met een aantal extra instellingen.

Prijsmodus en prijsinstellingen

  1. Kies de prijsmodus. Zet bij het aanmaken of bewerken van de configurator het veld Prijsmodus op Meerprijs (basisprijs + toeslagen). Er verschijnen dan extra secties in het formulier.
  2. Vul de prijsinstellingen in. Voer de Basisprijs in (verplicht in deze modus) en kies de bijbehorende belastingklasse.
  3. Stel de visualisatie in. Kies de beeldverhouding van het voorbeeldvenster (standaard 4:3) en bepaal met de schakelaar of bestellen geblokkeerd moet worden wanneer er voor een gekozen combinatie nog geen bladafbeelding bestaat.

Rol-stappen toewijzen

In de sectie Rol-stappen vertel je de configurator welke gekoppelde stap welke rol vervult. Deze vijf rollen sturen zowel de prijsberekening als de visuele opbouw aan:

Tabel 12 — De vijf rol-stappen
RolStaptypeGebruikt voor
VormEnkele keuzeBladafbeelding en toeslag
RandEnkele keuzeBladafbeelding en toeslag
KleurEnkele keuzeBladafbeelding en toeslag
OnderstelEnkele keuzeOverlay-afbeelding onder het blad en toeslag
MaatAfmeting kiezerMaattoeslag uit de matrix (alleen prijs, geen afbeelding)

Bij de opties van de keuzestappen vul je per optie het veld Toeslag in en optioneel een optie-afbeelding. Bij de opties van de onderstel-stap stel je daarnaast de overlay-positie in (links, boven, breedte en hoogte in procenten, plus de laagvolgorde) zodat de foto van het onderstel op de juiste plek onder het tafelblad valt.

De maatmatrix vullen

Op het tabblad Maattoeslagen maak je per combinatie van lengte en breedte één regel aan met de bijbehorende toeslag. De kleinste maat geef je toeslag € 0,00; grotere maten een oplopend bedrag. Elke combinatie kan maar één keer voorkomen.

Bladafbeeldingen koppelen

Op het tabblad Bladafbeeldingen koppel je per combinatie van vorm, rand en kleur één foto van het tafelblad uit de mediabibliotheek. Het overzicht toont hoeveel van alle mogelijke combinaties al een afbeelding hebben en welke er nog missen, zodat je gericht kunt aanvullen. De maat heeft géén invloed op de afbeelding — alleen op de prijs.

Tip Fotografeer blad en onderstellen vanuit hetzelfde camerastandpunt en op hetzelfde formaat ("volbeeld"). De overlay-instelling kan dan gewoon op de standaardwaarden blijven staan en elke combinatie valt automatisch mooi samen.
Het configurator-bewerkscherm in meerprijs-modus
Afbeelding 16 — De extra instellingen van de meerprijs-modus.
Bladafbeeldingen per combinatie
Afbeelding 17 — Bladafbeeldingen per combinatie van vorm, rand en kleur.

De visuele opbouw

Tijdens het samenstellen ziet de klant het product visueel opgebouwd worden uit twee lagen: de foto van het tafelblad (bepaald door de gekozen combinatie van vorm, rand en kleur) met daaronder de foto van het gekozen onderstel als overlay. Bij elke wijziging van een keuze ververst het beeld direct mee.

De opbouw begint al vóórdat de klant alles heeft gekozen: voor nog niet gemaakte keuzes toont de webshop tijdelijk de eerste optie van die stap. Pas wanneer vorm, rand én kleur definitief gekozen zijn en er voor die combinatie geen afbeelding bestaat, verschijnt een nette melding dat de afbeelding nog niet beschikbaar is. Met de eerder genoemde schakelaar bepaal je of bestellen in dat geval toch mogelijk is.

Wat de klant ziet en bestelt

De maatkeuze wordt de klant aangeboden als twee losse keuzelijsten (lengte en breedte); zodra beide zijn gekozen rekent de webshop de bijbehorende maattoeslag mee. Het configuratie-overzicht toont de basisprijs, elke gekozen optie met zijn toeslag, de maattoeslag en het totaal — inclusief of exclusief btw, afhankelijk van de weergave.

Bij het toevoegen aan de winkelwagen wordt de samenstelling als één regel opgeslagen, met de complete keuze-samenvatting en een vastgelegde prijs. Wijzig je daarna als beheerder prijzen of toeslagen, dan heeft dat géén invloed op samenstellingen die al in een winkelwagen of bestelling staan — nieuwe samenstellingen rekenen uiteraard wél met de nieuwe bedragen. Prijswijzigingen in de maatmatrix zijn na opslaan direct actief voor nieuwe samenstellingen.

De tafelconfigurator op de webshop
Afbeelding 18 — De tafelconfigurator zoals de klant hem ziet.

Stappenplan van begin tot eind

  1. Maak de vijf stappen aan. Vorm, Rand, Kleur en Onderstel als Enkele keuze (met per optie een toeslag en eventueel een afbeelding; bij het onderstel ook de overlay-instellingen), en Maat als Afmeting kiezer met alle leverbare maten.
  2. Maak de configurator aan met prijsmodus Meerprijs, de basisprijs, belastingklasse en visualisatie-instellingen.
  3. Koppel de stappen in de juiste volgorde via het tabblad Configurator Stappen en zet ze op verplicht.
  4. Wijs de rol-stappen toe in de sectie Rol-stappen: vorm, rand, kleur, onderstel en maat.
  5. Vul de maatmatrix met een toeslag per maatcombinatie.
  6. Koppel de bladafbeeldingen per vorm-, rand- en kleurcombinatie en controleer de dekkingsindicator.
  7. Koppel de configurator aan het winkelproduct (veld Modulaire Configurator op het productbewerkscherm, tabblad Geavanceerd). Dat product vormt straks de bestelregel.
  8. Test de flow op de webshop: doorloop alle keuzes, controleer beeldopbouw en prijsopbouw, en plaats een testbestelling.
Goed om te weten De knoppen voor e-mailen, PDF downloaden en een afspraak maken werken in de meerprijs-modus hetzelfde als in de IMC-modus; de samenvatting toont de gekozen opties met hun toeslagen.

Veelgestelde vragen en tips

Hoe werkt de prijsberekening?

De totaalprijs van een configuratie is de som van de prijzen van alle geselecteerde componentproducten en vaste meerprijzen. Het systeem:

  1. doorloopt alle zichtbare stappen;
  2. genereert per stap de IMC-code (of gebruikt de vaste meerprijs of SKU-koppeling van de optie);
  3. zoekt het bijbehorende product op;
  4. telt de prijs van dat product op bij het totaal;
  5. vermenigvuldigt de prijs met een aantal waar dat van toepassing is: het aantal dat de klant kiest bij meerkeuze- en aantalstappen, en het vaste aantal dat op de stap zelf is ingesteld.

De klant ziet dit live in de wizard: elke keuze werkt de totaalprijs direct bij. Productprijzen voer je exclusief btw in; de webshop toont ze inclusief btw.

Wat als een product niet gevonden wordt?

Kan de configurator bij een bepaalde combinatie geen product vinden, dan bestaat er geen product met de gegenereerde IMC-code. Controleer in deze volgorde:

  1. Is het componentproduct aangemaakt? Ga naar het productbeheer en zoek op de verwachte IMC-code of productnaam.
  2. Klopt de IMC-code exact? De code moet exact overeenkomen, inclusief hoofdletters en scheidingstekens: MAT-MEDIUM-90x200 is iets anders dan mat-medium-90x200 of MAT_MEDIUM_90x200.
  3. Zijn alle combinaties afgedekt? Heb je een nieuwe maat of optie toegevoegd, dan moeten ook alle bijbehorende componentproducten voor die maat bestaan.

Hoe voeg ik een nieuwe maat toe?

  1. Open de stap Afmetingen onder E-commerce → Configurator Stappen.
  2. Klik op Keuze Toevoegen en vul de sleutel in (bijvoorbeeld 220x200), de zichtbare naam (bijvoorbeeld "Extra breed (220x200)") en de breedte en lengte.
  3. Maak alle benodigde componentproducten aan voor de nieuwe maat: loop elke stap met een IMC-template langs en maak voor de nieuwe maat het bijbehorende product aan — inclusief eventuele varianten op halve breedte als je templates {HALF_WIDTH} gebruiken. In de meerprijs-modus volstaat één nieuwe regel in de maatmatrix.
Belangrijk Een nieuwe maat is pas compleet als álle componentproducten voor die maat bestaan — inclusief eventuele varianten op halve breedte wanneer je templates {HALF_WIDTH} gebruiken. Ontbreekt er één, dan loopt de klant bij die combinatie vast in de wizard.

Hoe voeg ik een nieuwe stap toe?

  1. Maak de stap aan onder E-commerce → Configurator Stappen, met een beschrijvende naam en een unieke slug in hoofdletters.
  2. Kies het juiste type en voeg de opties toe (sleutel en zichtbare naam).
  3. Stel een IMC-template in als de stap aan een product gekoppeld moet worden; sturende stappen (zoals een ja/nee-keuze die alleen andere stappen aanstuurt) hebben geen template nodig.
  4. Voeg de stap toe aan de configurator via Stap Toevoegen en stel de juiste volgorde in.
  5. Maak de bijbehorende componentproducten aan met de juiste IMC-codes, of stel vaste meerprijzen in op de opties.

Kan ik dezelfde stap in meerdere configurators gebruiken?

Ja. Stappen zijn herbruikbaar: je maakt een stap één keer aan en neemt die op in meerdere configurators. De volgorde, het verplicht-zijn en de standaardwaarde stel je per configurator apart in.

Kan ik een configurator tijdelijk uitschakelen?

Ja. Zet de schakelaar Actief uit bij de configurator. De configurator is dan niet meer beschikbaar op de webshop, maar alle instellingen blijven bewaard — je schakelt hem op elk moment weer in.

Kan ik een individuele stap uitschakelen?

Ja. Elke stap heeft een eigen Actief-schakelaar. Schakel je een stap uit, dan wordt deze niet meer getoond in de configurators die de stap gebruiken — zonder dat je de stap hoeft te verwijderen. De inrichting (opties, regels, template) blijft bewaard.

Wat is het verschil tussen de sleutel en de zichtbare naam van een optie?

De sleutel (key) is de interne waarde die in de IMC-template wordt gebruikt en letterlijk in de gegenereerde IMC-code verschijnt; houd deze kort en beschrijvend (VLAK, 23, MEDIUM). De zichtbare naam is wat de klant op de website ziet ("Vlak (zelfde breedte als bed)", "23 cm hoog (standaard)", "Medium") — dat mag langere, vriendelijke tekst zijn. Een zichtbare naam kun je altijd veilig aanpassen; een sleutel niet, want die zit verwerkt in de IMC-codes van je componentproducten.

Tip Test na elke wijziging de configurator zelf in de webshop: doorloop de wizard met een paar uiteenlopende combinaties — juist ook de combinaties waarbij extra stappen verschijnen of verdwijnen — en controleer of elke stap een product en een prijs oplevert. Zo merk je een ontbrekend componentproduct eerder op dan je klant.