Add a dropdown option to your option sets so customers can choose from a dropdown menu different parameters of your products.

To add a dropdown 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 Dropdown 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.


Text that will appear on the dropdown before a selection is made. It is usually used to indicate an action, like "select color".
If no placeholder is set, the default one is "choose an option".


The dropdown 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 dropdown 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 dropdown 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 dropdown 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 dropdown 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 dropdowns. 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 dropdowns. 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 dropdowns. 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 Template

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 template you won’t need to assign an ID to the function, since the function will communicate directly with an entire template.

To assign Conditions to a dropdown 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 dropdown

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

To add a dropdown value:
  1. Click Add dropdown 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 dropdown
  4. Give it a behavior. Depending on what function you chose, the behavior value you have to give it ( a position, a product ID, etc.)
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 dropdown. 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 dropdown, 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 0 found this helpful
Have more questions? Submit a request