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
Create a new option set or edit an existing one
Click Add option
Expand the newly added Option by clicking on it
Select Swatch 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.
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.
Required
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:
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
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.
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:
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
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:
Click Add swatch value
Expand the newly added value by clicking on it
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.
Give it a Tooltip (if desired). The tooltip will be visible for customers when they hover over the swatch.
Give the value a swatch color or a swatch image. This is the icon that will be displayed on the option.
Give it a behavior. Depending on what function you chose, how behavior works for the values:
Customily Function
Behaviour values
Text
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.
Tip:
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.
