Articles on: Configurator

Colour Picker Widget


The Colour Picker widget enhances the configurator's front end by allowing customers to dynamically alter the connected materials. This is particularly useful for offering custom colour options.


How to Set Up the Widget
Connecting the Colour Picker
Configurator View Appearance


How to Set Up the Widget

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.

Below is a table detailing various options for the Colour Picker and their descriptions:

1.MaterialThe 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.
2.Show PresetsSelecting "Yes" allows you to define a list of presets for fast selections. Choose "No" to omit the presets.
3.Allow User to Clear ValueIf 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.
4.Initial ValueIf "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.
5.PresetsIf "Show Presets" is set to "Yes," this section appears, allowing you to add colour presets for quick selection.

Product Page -> Options -> Add Option Set

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

Create Colour Picker Option -> Assign to Group -> Save Changes

Connecting the Colour Picker

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

Direct Connection: If you've added a default material, the Colour Picker should be the primary option for configuration. Simply navigate to the 3D tab, 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.

How to Connect Colour Picker to 3D Meshes

Material Override: If you prefer to use the Colour Picker based on specific rules, you can use the Trigger and Action rule logic. For instance, you can set a trigger like "Select custom colour" and then choose an action, such as overriding meshes with another material (e.g., the Colour Picker).

Rules -> Trigger & Actions -> Override Material

Override Material Parameters: Alternatively, you can override material parameters. In this case, the material parameters window will open, allowing you to override the currently selected material with the Colour Picker as an albedo input.

Rules -> Trigger & Actions -> Override Material Parameters

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:

Desktop OpenMobile Open
Desktop OpenMobile Open

Updated on: 05/02/2024

Was this article helpful?

Share your feedback


Thank you!