Colour Picker Widget

Let customers personalise products with any colour or quick presets. Learn how to set up the Colour Picker Widget and connect it to your 3D meshes.

The Colour Picker widget lets customers dynamically change the connected materials in the configurator's front end. It is particularly useful for offering custom colour options.

Create the Colour Picker option block

Navigate to the product admin's Options tab and click New Option Block.
Select Colour Picker as the mode type.
Configure the widget according to your preferences.

Name

Description

Material

The default material for the Colour Picker, which can be linked to a mesh. This is optional, as you can also use the Colour Picker to override other material parameters based on rules.

Show Presets

Selecting Yes allows you to define a list of presets for fast selections. Choose No to omit the presets.

Allow User to Clear Value

If set to No, the Colour Picker cannot be cleared. If set to Yes, the Colour Picker can be reset to blank in the configurator view.

Initial Value

If Allow User to Clear Value is set to No, this field becomes visible. It defines the starting value for the widget. The starting value will be this one unless a different starting value is set in your default configuration, in which case the default configuration takes the highest priority.

Presets

If Show Presets is set to Yes, this section appears, allowing you to add colour presets for quick selection.

Assign it to a group and save

Assign your Colour Picker to a group for it to appear.
Save your work.

Connecting the Colour Picker

There are several ways to connect the Colour Picker to a specific mesh. Here are three common approaches:

If you've added a default material, the Colour Picker should be the primary option for configuration.

Navigate to the 3D tab and go to the Meshes section.
Find the meshes you want to assign the widget to.
Choose mode Dynamic and select the Colour Picker as the value.

To use the Colour Picker based on specific rules, use the Trigger and Action rule logic. For instance, set a trigger like "Select custom colour" and then choose an action, such as overriding meshes with another material (for example, the Colour Picker).

Alternatively, override material parameters. The material parameters window opens, allowing you to override the currently selected material with the Colour Picker as an albedo input.

Picking and reusing colours

The colour picker includes tools that make it quicker to choose and reuse colours. They are available in standard and modular configurators, in admin colour settings and in AI Studio.

Tool

What it does

Pick from screen

Samples a colour from anywhere on your screen, for example from a brand guide or a photo open in another window.

Recently Used

Lists your last 16 colours, newest first, together with their opacity. Select one to reuse it in any colour field.

Value labels

In configurator colour pickers, drag the red, green and blue value labels to adjust their numbers. Where opacity is available, you can drag its label too.

Pick from screen depends on your browser. If your browser doesn't support screen colour picking, you can still choose colours with the palette, hue slider or values.

Configurator view appearance

The appearance of the Colour Picker in the configurator view varies based on the theme used. Below are examples of how it appears in the Mimeeq theme: