Options Mode
Options mode is the heart of the Configurator project type. Here you create option blocks that let end users customise the 3D product — changing materials, colours, visibility, dimensions, and more. Blocks can be reordered by dragging and grouped under custom headings.
Option Block Types
Select Material
Lets users choose from a list of materials to apply to one or more 3D parts.
- 1Click "Add Option Block" and choose "Select Material".
- 2Give the block a label (e.g., "Frame Finish", "Seat Material").
- 3Choose which 3D object(s) the material will be applied to.
- 4Add material choices by selecting from your material library.
- 5Optionally set a default selection.
Priority rule: when overlaps exist, the last applied variant wins (latest user action or conditional-logic reveal has precedence).
Pricing safety: pricing evaluates selected variant values once per linked block/variant key, so duplicate target mappings do not automatically duplicate price.
Colour Variants
Lets users pick a colour from a set of swatches. The colour is applied to a specific material property (usually the base colour) of one or more parts.
- 1Add a "Colour Variants" option block.
- 2Give it a label (e.g., "Body Colour").
- 3Select the target 3D object(s).
- 4Add colour swatches using the colour picker. You can add as many colours as needed.
- 5Each swatch can have a label and optional price modifier.
Show / Hide 3D Objects or Parts
Lets users toggle the visibility of entire 3D objects or individual mesh parts on or off. Useful for optional accessories, add-ons, or alternative configurations.
- 1Add a variant and switch to the "Visibility" appearance mode.
- 2Label it (e.g., "Add Armrests", "Include Headrest").
- 3Choose the target mode: "3D Objects" to show/hide entire models, or "3D Parts" for individual meshes.
- 4Select which 3D object(s) or part(s) to show or hide.
- 5Choose the default state (shown or hidden).
- 6Optionally add a price modifier for the visible state.
Thumbnail Selector
Displays variant choices as a visual thumbnail grid. Users browse and click a thumbnail to select that option. Ideal for large variant sets where visual browsing is more intuitive than text lists.
- 1Add a "Thumbnail Selector" option block.
- 2Give it a label (e.g., "Choose Style", "Select Pattern").
- 3Add variants — each variant gets a thumbnail image (uploaded or auto-generated from the material).
- 4Configure display settings in the block properties panel.
Supports the same overlap behavior as Select Material for appearance variants targeting identical 3D parts.
| Setting | Options | Description |
|---|---|---|
| Thumbnail Style | Grid / Horizontal scroll / Vertical stack / Carousel | Controls how thumbnail cards flow in Preview and Share view. |
| Thumbnail Size | 25×25 / 35×35 / 60×60 / 100×100 / 140×140 | Acts as a soft cap so cards stay close to the intended size while still fitting the sidebar. |
| Thumbnail Shape | Square / Rounded / Circle | Shape of the image or swatch inside the card. The outer card stays rectangular. |
| Columns Count | 1 – 6 | Desktop column maximum. Grid mode automatically downshifts on tablets, phones, and narrow sidebars for large thumbnails. |
| Thumbnail Gap | Small / Medium / Large | Spacing between thumbnails. |
| Label Position | Below / Overlay / Hidden | Where the variant label appears relative to the thumbnail. |
| Show Title | On / Off | Show or hide the block title above the thumbnail grid. |
| Compact Mode | On / Off | Reduces padding for a denser layout. |
Number Input
A numeric input block that lets users enter a quantity or a dimension value. When configured as a dimension (with axis scaling), it dynamically scales the 3D model along the chosen axis.
- 1Add a "Number Input" option block.
- 2Give it a label (e.g., "Width (cm)", "Quantity").
- 3Choose the value type: "Quantity" for a simple number, or "Dimension" for a value that drives model scaling.
- 4For Dimension type: select the scaling axis (X, Y, or Z) and optionally restrict which parts of the model are affected.
- 5Set the unit suffix (e.g., cm, mm, in) and min/max constraints.
| Setting | Description |
|---|---|
| Value Type | Quantity (simple number) or Dimension (scales the model along an axis). |
| Scaling Axis | X, Y, or Z — which axis the dimension value scales (Dimension mode only). |
| Units | Display suffix — cm, mm, in, ft, m, etc. |
| Position Parts | Restrict scaling to specific mesh parts instead of the whole object. |
| Min / Max | Minimum and maximum allowed values. |
| Step | Increment step for the input spinner buttons. |
Toggle Switch
A simple on/off binary toggle. Limited to exactly two variants (e.g., On/Off, Yes/No, With/Without). Works well for optional add-ons.
- 1Add a "Toggle Switch" option block.
- 2Label it (e.g., "Include Roof Rack", "Add Engraving").
- 3Define the two states: each can trigger different materials, visibility changes, or price modifiers.
- 4Set which state is the default.
Section Header
A non-interactive heading that visually groups related option blocks. Can be styled as a simple divider or as a tab-style section break.
| Setting | Description |
|---|---|
| Label | The heading text displayed (e.g., "Exterior", "Interior", "Accessories"). |
| Type | Divider (a horizontal line with text) or Tab (a clickable tab header for tabbed layouts). |
Carousel
Displays variant choices in a horizontally scrollable carousel with navigation arrows. Ideal when you have many variants and want a compact, swipeable presentation.
Carousel appearance variants may also overlap on the same target parts; last applied variant wins.
| Setting | Options | Description |
|---|---|---|
| Arrow Style | Inside / Outside / Hidden | Position or hide the navigation arrows. |
| Animation | Slide / Fade / None | Transition animation between carousel items. |
| Loop | On / Off | Whether the carousel wraps around from last to first item. |
| Show Counter | On / Off | Display a "3 / 12" style counter showing current position. |
| Show Label | On / Off | Display the variant label below each carousel item. |
| Auto Play | On / Off | Automatically advance through items. |
| Auto Play Interval | 1 – 10 seconds | Time between auto-play transitions. |
Scenery
Lets users switch between pre-defined scene backgrounds or environments. Each scenery variant loads a different set of 3D context models and camera settings to place the product in a different visual context.
- 1Add a "Scenery" option block.
- 2Label it (e.g., "Environment", "Room Setting").
- 3For each variant, select one or more context 3D models (the "scenery") from your assets.
- 4Configure camera settings per variant: position, target, FOV, zoom limits, rotation limits, and ground alignment.
- 5Set the default scenery variant.
| Camera Setting | Description |
|---|---|
| Camera Position | The starting camera position (X, Y, Z) for this scenery. |
| Camera Target | The point the camera looks at (X, Y, Z). |
| FOV | Field of view angle. |
| Min / Max Distance | Zoom limits — how close and far the user can zoom. |
| Min / Max Polar Angle | Vertical rotation limits. |
| Min / Max Azimuth Angle | Horizontal rotation limits. |
| Enable Panning | Allow the user to pan the camera. |
| Enable Rotation | Allow the user to orbit the camera. |
| Ground Y | The Y position of the ground plane for shadow alignment. |
Hotspot
Places interactive markers on the 3D model that users can click or hover over to see information popups. Hotspots are useful for product tours, feature highlights, and annotations.
- 1Add a "Hotspot" option block.
- 2Position the hotspot by clicking on the 3D model surface, or enter exact 3D coordinates.
- 3Configure the hotspot appearance and behaviour.
| Setting | Description |
|---|---|
| Position (X, Y, Z) | The 3D coordinates where the hotspot marker appears on the model. |
| Icon | Choose from built-in icons (info, plus, star, pin, etc.) or upload a custom icon. |
| Trigger | Click or Hover — how the popup is activated. |
| Popup Title | The heading text in the popup. |
| Popup Content | Rich text body of the popup. Supports links and basic formatting. |
| Popup Image | An optional image displayed in the popup. |
| Animation | Pulse, bounce, or none — the idle animation of the marker. |
| Colour | The marker icon colour and popup accent colour. |
| Size | Scale of the hotspot marker. |
| Always Visible | Keep the marker visible even when the model part faces away from camera. |
| Attach to Part | Attach the hotspot to a specific mesh part so it moves with animations. |
Other Block Types
| Block Type | Description | Use Case |
|---|---|---|
| Dropdown Select | A dropdown menu with predefined choices. Each choice can trigger different actions. | Size selection, style variants, component choices. |
| Image Upload | Lets users upload their own image to apply as a texture or decal. | Custom branding, personalisation. |
| Text Input | Lets users enter custom text that appears on the 3D model. Toggle Consumer Controls → Font Family to let shoppers pick the typeface, then curate the allowed list in "Consumer-available fonts" (10 system + 40 Google fonts to choose from). Use the "Allowed Characters" segmented control to restrict input to Numbers, Letters, or Alphanumeric — Numbers also triggers the mobile numeric keypad automatically. | Engraving, name personalisation, branded jersey numbers, postal codes. |
| Pattern Designer | Apply and customise repeating patterns on surfaces. | Fabric patterns, tile layouts. |
| Design Canvas | Freeform placement of graphics on 3D surfaces. | Logo placement, decal positioning. |
Modular blocks now have a dedicated guide
Open Modular Projects for variant setup, snap origins, UI Design settings, Grid vs List examples, and material targeting for Preview and Share.