Articles on: Option

Color Picker

📌 The Color Picker Field enables customers to select a custom color using an interactive color panel. It's ideal for customizable products where the color of the item or text is important.

🔧 Basic Settings

Name – Change the display name shown to customers.
Required Field – Make the field mandatory before form submission.
Default Value: Set a default color (via hex code) to be pre-selected when the page loads.
Column width - Option represents a percentage of the overall width, e.g., 100%, 50%.
Add-on Price – Add an extra cost when a customer fills out this field.
Conditional Logic – Show/hide this field based on other option selections.

💡 Advanced Settings

Color Preview Function:

This feature allows the selected color from the Color Picker to be linked to elements such as a Single line text, Multi line text, enabling a real-time preview.

🎨 Example:

When a customer chooses a color and types into a text field, or views static content like a heading or paragraph, the text will dynamically reflect the selected color. This enhances interactivity and lets customers better visualize personalized options.

For other setting of Help text position/ HTML class /Column width, You can set up the same as other elements

Allow transparency

After enabling this feature, customers can select both color and transparency__.

Updated on: 10/08/2026

Was this article helpful?

Thank you!