2. Select Option Sets to create a new set of options
3. Select New Option Set to create a new set from scratch
4. Add a Title to your option set. Use an easily identifiable name
5. Select Add Option to start adding options to your set
6. Expand the newly added Option by clicking on it
7. Select a Type of Option and configure it. Type of options available, and they're configurations are:
Text Input
An option where customers can type their own text.
The parameters you can define for a Text input are:
Option label: Title of the option
Help text
Placeholder: Example text to appear on the input box
Initial value: Initial text that will appear on the preview
Max. length: Maximum amount of characters allowed
Make it textarea: Add several lines to the input box
Max. number of lines: Maximum number of lines for the text box (only available for text area)
Required: Make the option mandatory
Hide Visually: To hide this element from the option set.
Learn more about Text inputs
Dropdown
An option where customers can choose a value from an expandable list. It can be used to select fonts, colors, styles, and almost anything! The parameters you can define for a Dropdown are:
Option label: Title of the option
Help text
Placeholder: Displayed text on the dropdown menu
Required: Make the option mandatory
Hide visually: To hide this element from the option set.
Dropdown values: Add the different values inside the dropdown. These are the values customers will be able to choose from.
Learn more about Dropdowns and how to add values to them
Swatches
An option where customers can choose a value from a series of icons. It can be used to select fonts, colors, styles, and almost anything! Similar to the dropdown, but with much more visual feedback. The parameters you can define for Swatches are:
Option label: Title of the option
Help text
Required: Make the option mandatory
Hide visually: To hide this element from the option set.
Swatch values: Add the different values inside the swatch list. These are the values customers will be able to choose from.
Learn more about Swatches and how to add values to them
Image Upload
An option where customers can click a button and upload their own image into the product The parameters you can define for Image upload are:
Option label: Title of the option
Help text
Button text: Text that will appear in the button
Button class: To apply special styling to the button
Required: Make the option mandatory
Hide visually: To hide this element from the option set.
Learn more about Image upload
Checkbox
An option for customers to check the selection. Very useful if you want customers to state they have read and verified their personalization. The parameters you can define for Checkbox are:
Option label: Title of the option
Help text
Required: Make the option mandatory
Hide visually: To hide this element from the option set.
Learn more about Checkboxes
8. Once you have selected an option type, you will add a Customily Function to the option to give it the dynamic behaviour on the preview. First, expand the Customily Function menu
9. Select Add Customily Function
10. Select a Function Type
Functions are the actions that the option will trigger on the preview. Function types available are:
Text
Executes the action of adding text on the preview. It is used mostly with text inputs, but it can also be used with dropdowns or swatches if you want to type predefined text.
Learn more about text function
Text Color
Executes the change of color in a text. It is used with dropdowns and swatches.
Learn more about text color function
Font Type
Executes the change of font in a text. It is used with dropdowns and swatches.
Learn more about font type function
Dynamic Image
Executes the change of a dynamic image in the preview. This can be many things depending on the dynamic image, like the color of the product, pattern, icons, etc. It is used with dropdowns and swatches.
Learn more about dynamic image function
Dynamic Vector
Executes the change of a dynamic vector in the preview. This can be many things depending on the dynamic vector, like icons, patches, designs, etc. It is used with dropdowns and swatches.
Learn more about dynamic vector function
Upload Image
Executes the upload of the customers image into the preview. It is used exclusively with upload image option.
Learn more about upload image function
Change Product
Executes a change in the assigned Customily Template ID. This is used to load a different preview template on the product. It is used with dropdowns and swatches.
Learn more about change product function
11. Enter the Personalizable Element ID to connect the function with a specific element from the preview. This is the Unique ID of the element that was created on your template (for example text elements, dynamic images, image placeholders, etc.)
12. If needed you can add Conditions to the option. Conditions will let you show or hide the option, depending on if another option is selected. To add a condition, click the conditions expandable menu.
Learn how to add conditions
14. Repeat these steps by clicking Add Option again, to add all the options you want into the set.
15. Once you are done click Save Option Set. When the button turns green the option set has been saved! You can click Back and go back to the main menu.
Important:
If the button turns red, it means that the option set was not saved. Please check your internet connection and try saving it again. If the problem continues contact support.
