Create a Color Picker

1. How Does the Color Picker Display?

The Color Picker displays as a customizable color input field, allowing customers to manually select any color they want using a color wheel or by entering a hex code. It’s perfect for use cases where customers need flexibility in choosing a unique color rather than choosing from predefined options.

Example on storefront:

A product allows customers to pick any color they like for custom printing, painting, or embroidery.

2. How to Create a Color Picker

Step 1: Add a New Option

Go to your Option Set > Click Add Option > Color Picker.

Step 2: Configure the Field

Enter an Option Name (e.g., “Pick Your Color”).

You can tick:

✅ “This option is required” if customers must select before adding to cart

How it looks on the storefront:

✅ “Hide option name” if you want to hide the option title above swatches

How it looks on the storefront:

Other Features:

Price Add-On > Create Fee – What is it & How to Use
Price Add-On > Assign to Variant – What is it & How to Use
SKU – What is it & How to Use

Step 3: Advanced Settings (If Needed)

Conditional Logic: Enable conditional logic if you want the Color Picker to show/hide only when a customer selects a specific option from another field. How to set up Conditional logic?

Help text: Add a short description to explain the purpose of the Color Picker option. It can be displayed as Tooltips or Content (Below/Beside the option title, Below the option).