Add a swatch option to your option sets so customers can choose from visible icons different parameters of your products.

To add a swatch option

  1. Create a new option set or edit an existing one
  2. Click Add option 
  3. Expand the newly added Option by clicking on it 
  4. Select Swatch as option type 
  5. 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.

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.


The swatch selection will be required to add the product to cart. This means the customer will have to choose an option in it 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.

Hide visually

Check it if you want to hide the option from the product page. It is useful if you want to have some predefined option on the preview you don't want customers to change.
However, it is hardly used.

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 swatch options, it could tell it what element it will change on the preview and how, like a color, a font style, etc.

To assign a Customily Function:
  1. Expand the Customily Functions section by clicking on it.
  2. Click Add a Customily Function 
  3. Select the Customily Function you want to use 
Functions available for the swatch options are:


This is used when you want to load pre-defined texts into a text element on the preview.

Text Color

One of the most used functions for swatches. This is used when you want to change the color of a text element on the preview. 

Font Type

One of the most used functions for swatches. This is used when you want to change the font of a text element on the preview. 

Dynamic Image

Also, one of the most used functions for swatches. This is used when you want to change between positions of a dynamic image on the preview.
This function is ideal if you want to change the color of the overall product, patterns, materials, etc.

Dynamic Vector

Similar to the dynamic image, this is used when you want to change between positions of a dynamic vector on the preview.
This function is ideal if you want to change between pre-defined icons or clipart.

Change Product

This function is used when you want to change the preview to a different template. For example, if you want to switch between designs on the preview, you can use this function to link each design to a different personalization template from your admin.
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 your function is to change product you won't need to assign and ID to the function, since the function will communicate directly with an entire template.

To assign Conditions to a swatch option

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: 
  1. Expand the Conditions section by clicking it 
  2. Click Add Condition 
  3. 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

To add values to your swatch

One of the most important elements of the swatch are all the different values customers will be able to choose from.

To add a swatch value:
  1. Click Add swatch value 
  2. Expand the newly added value by clicking on it 
  3. Give it a Value Name. This is how the value will be displayed on the option details, the value name will not be visible for customers. 
  4. Give it a Tooltip (if desired). The tooltip will be visible for customers when they hover over the swatch. 
  5. Give the value a swatch color or a swatch image. This is the icon that will be displayed on the option. 
  6. Give it a behavior. Depending on what function you chose, how behavior works for the values:
Customily Function
Behaviour values
The pre-set text you want to use
Text Color
Color position
Font Style
Font position
Dynamic Image
Image position
Dynamic Vector
Vector position
Change Product
Template ID
Can a value be selected by default?
You can choose a certain value to be selected by default on the swatch. All you need to do is check the selected checkbox on the value configuration.

You can easily rearrange the order of the values by clicking the arrows on the right. 

If you want to remove a value, hit the cross.

Once you have finished configuring your swatch, 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.


Was this article helpful?

0 out of 1 found this helpful
Have more questions? Submit a request