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 Upsell product > 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).
Here is an example of the Help text as Tooltips looks like on the storefront:
Placeholder Text: A short hint shown inside the input field to guide customers on what to enter.
How it looks on the storefront:
3. Real-World Applications
Custom printed products (e.g., T-shirts, mugs)
Personalized embroidery or engraving
Home decor with paint color options
DIY and art kits
4. Key Features of Color Picker
Customers freely select any color using a color wheel
Flexible and user-friendly for personalization
Ideal for products requiring true customization
Simple, one-click interface for color selection
Last updated