Add a color picker option to your option sets so customers can freely choose the color of their personalization in an easy and simple way.
Use color pickers to change the color of:
- text
- vectors
- user uploaded images
To add a color picker option
- Create a new option set or edit an existing one
- Click Add option
- Expand the newly added Option by clicking on it
- Select Color Picker as option type
- Configure the options parameters
Option Label
The title of the option that will appear on your product page.
Something like "Choose your ... ", "Select ...", or simply what the option is like "color" are the most used labels.
Something like "Choose your ... ", "Select ...", or simply what the option is like "color" are the most used labels.
Help Text
A secondary text to give customers some extra information, tips or help.
It's a good place to guide customers on what they can choose from, or let them know some extra information about their choice.
It's a good place to guide customers on what they can choose from, or let them know some extra information about their choice.
Required
The color picker selection will be required to add the product to cart. This means the customer will have to choose a color to be able to make a purchase.
If the customer makes no selection, it will let them know so they can choose something and add to cart properly.
An asterisk (*) next to the option's title indicates that the swatch is required.
If the customer makes no selection, it will let them know so they can choose something and add to cart properly.
An asterisk (*) next to the option's title indicates that the swatch is required.
Default Color
You can configure through what color will be used by default on the preview.
This is the color that the preview will have before customers make a choice on the color picker.
Note:
Text, vector and image placeholder elements (when in single color mode) work with color picker by default. This means there is no need to configure them or make any changes on the templates. Just add the color picker options and customers will be able to select any color on them.
To assign a Customily Function to a swatch option
Once you have defined your option, you need to add a Customily Function to it.
Customily Functions are the way we assign actions to the options. It tells the option how to affect the preview. For example, in the case of the color picker option, it tells it what element will change colors on the preview.
To assign a Customily Function:
Customily Functions are the way we assign actions to the options. It tells the option how to affect the preview. For example, in the case of the color picker option, it tells it what element will change colors on the preview.
To assign a Customily Function:
- Expand the Customily Functions section by clicking on it.
- Click Add a Customily Function
- Select the Customily Function you want to use
Functions available for the swatch options are:
Text Color
This is used when you want to change the color of a text element on the preview.
Image Color
This is used when you want to change the color of a user uploaded image on the preview.
Dynamic Vector Color
This is used when you want to change the color of a vector element on the preview.
4. Assign the Unique ID of the element that will work with that function 
If you are not sure what the Unique ID for the element is, learn how to know the Unique ID of an element here.
If you are not sure what the Unique ID for the element is, learn how to know the Unique ID of an element here.
To assign a condition to the color picker function
Conditions create rules that will show or hide an option based on the customer's previous selections. With conditions you can, for example, show an option only if another specific option is selected.
To assign Conditions:
To assign Conditions:
- Expand the Conditions section by clicking it
- Click Add Condition
- Complete the condition's rules
- Select action Show / Hide
- When select option (the option that will generate the condition)
- is -> select a value from that option
Once you have finished configuring your color picker, you can move on to adding more options to the option set. If you are done with all the options just hit save and go back to the main menu.
Share
Was this article helpful?
Have more questions? Submit a request