Color Picker

The Color Picker option type allows customers to select a color from a predefined palette or a color spectrum, including RGB, HSL, and Hex. This option is commonly used for products that offer color customization, such as clothing, accessories, or home decor items.

Basic option settings

1. Option Name

This is the internal name for the Color Picker option within the app’s settings. It helps you manage and organize the option but does not appear on the storefront product page.

2. Label on Product

This is the text that appears above the Color Picker on the product page. It provides context or instructions for the customer, such as "Select your preferred color" or "Choose a color for your item."

3. Label on Cart

This is the text that appears on the Cart summary screen, Checkout, and Order detail page, next to the color selected by the customer. It ensures the selected color is clearly displayed with their order details, such as "Color: Red."

4. Add-On Product

This feature allows you to apply an additional charge based on the color selected. For example, choosing a custom or premium color might incur an extra fee.

5. Conditional Logic

This feature allows you to set rules that determine when the Color Picker should be shown or hidden based on other customer selections. For instance, the Color Picker might only appear if the customer selects a product variant that offers color customization.

How to set up Conditional logic for your options

---

Advanced option settings

1. Required Field

This setting ensures that the customer must select a color before proceeding with their purchase. If enabled, the Color Picker becomes mandatory.

2. Hide "Label on Product"

This option allows you to hide the label that typically appears above the Color Picker on the product page, simplifying the interface if the label is unnecessary.

3. Default Value

This setting allows you to pre-select a default color in the Color Picker, which will be displayed when the customer first views the product. Customers can change this selection if they prefer a different color.

4. Tooltip

This setting allows you to provide additional information in a pop-up message when the customer hovers over the information icon. It provides brief, contextual information without cluttering the interface.

5. Help Text

This setting displays directly beneath the Text option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.

6. Class Name

This setting allows you to assign a custom CSS class to the Color Picker. This enables you to apply specific styling or behavior to the field based on your design needs.