Color Pickers let shoppers choose any color they want — no need to limit them to predefined swatches. They’ll see a color picker on your storefront, allowing them to select custom shades with full flexibility.
You can configure how the color picker option looks and behaves, and decide how it will be used to personalize. However, the color picker interface itself can’t be changed. Shoppers will always see:
A color spectrum selector
Sliders for adjusting color (hue and opacity)
A field to enter HEX, RGBA, or HSLA values directly
In this article:
Settings you can configure on a Color Picker
When you select Color Picker as the option type, you’ll be able to configure how the picker behaves and appears in your store.
To configure these, expand the option in your Option Set and scroll through the available settings.
Click any item below to jump directly to it:
🛠 Basic Settings
⚙️ Advanced Settings
Label
Text that appears above the color picker on your product page (e.g., “Choose text color”)
Required
Make this field mandatory by enabling this toggle. If it's required, shoppers won't be able to complete their purchase without uploading an image. An * next to the option label will indicate it is required on the storefront.
Help Text
Add a short description below the color picker to guide your shoppers. Great to give helpful tips so shoppers know what colors work best.
Default Color
Select the color that will show in the preview right away. You can use it to match your design style or suggest a good starting point for shoppers.
Variable Name (Advanced)
Assign a hidden variable to this option (not visible to shoppers). This allows you to pre-fill it via a URL, useful for marketing campaigns or sharing pre-configured links.Custom CSS Class (Advanced)
Add a custom class name to target and style this option through CSS in your store’s developer settings.
Hide Option (Advanced)
Hide this option completely from shoppers — helpful when you want to include fixed image in the preview without letting customers change it.
How Color Pickers Can Be Used to Personalize
Color pickers let shoppers choose any particular color they want — but where that color is applied to depends on the function you assign to the option.
You can learn more about functions and how they work here.
To assign a function to a Color Picker, expand the Function tab of your option and choose how it should interact with your template.
To personalize your product with a Color Picker, you’ll need to assign a function that controls the color of an element in your design. Here are the functions that work with Color Pickers, click on each one to learn how they can personalize your product:
Text Fill and Outline Color
Updates the fill color or the outline color of a text element.
Image Color / Dynamic Vector Color
Changes the color of an Image upload if it is set to Single Color mode, or of a Dynamic Vector in Single Color mode.