UI editor (configurator design)
The UI editor controls how the customer-facing configurator looks: templates, colours, layout, typography, shape, and motion. Changes apply to the configurator your visitors use in both iFrame embed and Script inject modes.
The live editor interface is in Dutch. Each setting below lists the Dutch label in parentheses so you can find it in the panel.
Where to find it
Manager → Configurations → open a product → Configurator design (Configurator-design).
The editor shows the settings panel on the left and a live preview on the right. Edit a setting and the preview updates immediately.
Top bar
| Control | Dutch | What it does |
|---|---|---|
| Preview device | Desktop / Mobiel / Componenten | Preview the configurator as desktop, as mobile, or inspect individual components. |
| Product selector | Binnendeur ▾ | Switch which product you are styling. |
| Discard | Verwerpen | Drop unsaved changes. |
| Save | Opslaan | Apply your design to every embed of the product. |
The settings are grouped into four collapsible panels: Templates & colours, Layout, Typography & style, and Behaviour & spinner.
1. Templates & colours (Templates & kleuren)
Start with a layout template (Begin met een layouttemplate)
Pick one of five presets as a starting point. It sets sensible defaults for menu placement, action bar, and shape that you then fine-tune below. Picking a template overwrites the layout-related settings but keeps your colours and typography — treat it as a reset to a known-good baseline.
| Template | Style | Best for |
|---|---|---|
| Wraparound (Rond content · rustig) | Menu wraps around the content; calm | Content-led layouts |
| Step bar (Stapbalk · krachtig) | Prominent step bar; bold | Guided flows where the current step stands out |
| Numbered steps (Num stappen · strak) | Numbered steps; sleek | Linear, form-like configurators |
| Pills (Pills · speels) | Pill-shaped step buttons; playful | Friendly, consumer-facing products |
| Tracker (Voortgang · minimaal) | Progress tracker; minimal | Long flows that need only a subtle progress hint |
Colours (Kleuren)
| Setting | Dutch | What it does |
|---|---|---|
| Primary colour | Primaire kleur | Accent for the active step, the next button, sliders, and selected options. Pick a swatch or use the eyedropper for a custom colour. |
| Background | Achtergrond | Page/canvas background behind the configurator UI. |
Set your brand's primary colour here; it drives most coloured accents, so one change re-themes the whole configurator.
2. Layout (Layout)
Step-menu placement — "Where does the step menu go?" (Waar komt het stappenmenu?)
| Option | Dutch | Result |
|---|---|---|
| Top | Boven | Horizontal menu above the content |
| Bottom | Onder | Horizontal menu below the content |
| Left | Links | Vertical menu on the left |
| Right | Rechts | Vertical menu on the right |
| Around content | Rond content | Menu wraps the content (Wraparound style) |
Step-menu style — "Which step menu suits you?" (Welk stappenmenu past bij je?)
| Option | Dutch | Appearance |
|---|---|---|
| Numbered steps | Num stappen | Numbered items (1, 2, 3 …) |
| Pills | Pillen | Rounded pill buttons |
| Dots | Stippen | Minimal dots |
| Progress bar | Voortgangsbalk | A single filling bar |
Placement and style are independent — e.g. a left Numbered steps menu, or a top Progress bar.
Action bar (Actiebalk)
The action bar holds the next button and the price.
| Setting | Dutch | Options |
|---|---|---|
| Position — "Where do the next button and price go?" | Waar komen de volgende-knop en de prijs? | Top (Boven) or Bottom (Onder) |
| Action bar layout | Actiebalk-layout | Price left (Prijs links), Price right (Prijs rechts), Stacked (Gestapeld), Overlay |
| Density | Dichtheid | Compact, Cozy (Gezellig), Roomy (Ruim) |
Settings panel (Instellingenpaneel)
The area where the customer makes their selections.
| Setting | Dutch | What it does |
|---|---|---|
| Side — "Which side does the settings panel go?" | Aan welke kant komt het instellingenpaneel? | Left (Links) or Right (Rechts) |
| Panel width | Paneelbreedte | Fixed width (e.g. 430px). Wider gives options more room; narrower gives the product preview more space. |
3. Typography & style (Typografie & stijl)
Text (Tekst)
| Setting | Dutch | Options |
|---|---|---|
| Font | Lettertype | Typeface for the whole UI (e.g. Archivo) |
| Headings | Koppen | Bold (Vet), Uppercase (Hoofdletters), Italic (Cursief) — combine as needed |
| Heading size | Kopgrootte | Small (Klein), Medium (Middel), Large (Groot) |
| Text size | Tekstgrootte | Small / Medium / Large — base body text |
| Component text size | Componenttekstgrootte | Small / Medium / Large — text inside controls (option labels, buttons) |
Keep the three sizes in a clear hierarchy (heading > body > component) for balanced, readable screens. Component text is the easiest to set too small on mobile.
Shape (Vorm)
| Setting | Dutch | Options |
|---|---|---|
| Component corners | Componenthoeken | Sharp (Scherp), Soft (Zacht), Curved (Gebogen), Round (Rond) |
| Button corners | Knophoeken | Sharp / Soft / Curved / Round — set separately from components |
| Slider thickness | Sliderdikte | Thin (Dun), Medium (Middel), Thick (Dik) |
Sharper corners read as technical; rounder corners read as soft and friendly.
4. Behaviour & spinner (Animaties & spinner)
Behaviour (Gedrag)
| Setting | Dutch | What it does |
|---|---|---|
| Animations — Components | Animaties · Componenten | Transitions on controls (selecting options, hover) |
| Animations — Layout | Animaties · Layout | Transitions when steps and panels change |
Turn animations down for a snappier, utilitarian feel; up for a more polished feel.
Spinner (Spinner)
The loading indicator shown while the configurator initialises. Choose one of 16 styles (Kies een laad-spinner).
Saving & publishing
Click Save (Opslaan) to apply your design to every embed of the product. Because styling lives on the product (not in the embed code), you can restyle a live configurator without touching the host website. Use Discard (Verwerpen) to drop unsaved changes.
Tips
- Start from a template, then adjust — don't build the layout from scratch.
- Set the primary colour first; it cascades through the accents.
- Check both the Mobiel and Desktop preview — panel side, panel width, and action-bar position read differently per screen size.
- Use the Componenten preview mode to inspect individual controls in isolation.