Follow these steps to manually create an option set for your products
1. Open store
2. Select Create / Edit Options to see your option sets list.
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 their 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
- Required: Make the option mandatory
- Help text
- Placeholder: Example text to appear on the input box
- Initial value: Default 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)
- Max. characters per line (only available for text area)
- Hide option: To hide this element from the option set.
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
- Required: Make the option mandatory
- Help text
- Placeholder: Displayed text on the dropdown menu
- Hide option: 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.
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:
Similar to the dropdown, but with much more visual feedback. The parameters you can define for Swatches are:
- Option label: Title of the option
- Required: Make the option mandatory
- Hide option: 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.
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:
The parameters you can define for Image upload are:
- Option label: Title of the option
- Required: Make the option mandatory
- Help text
- Initial image: Default image that will appear by default on the preview
- Button text: Text that will appear in the button
- Button class: To apply special styling to the button
- Min. image height and width: To set the minimum resolution needed for uploaded pictures
Vector Upload
An option where customers can click a button and upload their own vector into the product
The parameters you can define for Image upload are:
The parameters you can define for Image upload are:
- Option label: Title of the option
- Required: Make the option mandatory
- Help text
- Button text: Text that will appear in the button
- Button class: To apply special styling to the button
Learn more about Vector 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:
The parameters you can define for Checkbox are:
- Option label: Title of the option
- Required: Make the option mandatory
- Help text
8. Once you have selected an option type, you will add a Customily Function to the option to give it the dynamic behavior on the preview.
Functions are the actions that the option will trigger on the preview.
Functions are the actions that the option will trigger on the preview.
To assign a function, expand the Customily Function menu
9. Select Add Customily Function
10. Select a Function Type
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
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
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
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
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
It is used with dropdowns and swatches.
Learn more about dynamic vector function
Dynamic Vector Color
Executes the change of the color of a dynamic vector in the preview.
It is used with dropdowns and swatches.
Learn more about dynamic vector color function
It is used with dropdowns and swatches.
Learn more about dynamic vector color function
Upload Image
Executes the upload of the customer's image into the preview.
It is used exclusively with the upload image option.
Learn more about upload image function
It is used exclusively with the upload image option.
Learn more about upload image function
Image color
Executes the change of color in a customers uploaded image.
It is used with dropdowns and swatches
Learn more about image color function
Upload Vector
Executes the upload of the customer's vector into the preview. It is used exclusively with the upload vector option.
Learn more about upload vector function
Learn more about upload vector function
Change Template
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 template function
It is used with dropdowns and swatches.
Learn more about change template function
11. Enter the Personalizable Element ID to connect the function with a specific layer from the preview. This is the Unique ID of the layer 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.
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.
What if my product already has some options as variants?
If your product already has some options set as variants you don't need to add that option again with Customily.
Learn how to connect that variant with a Customily function to make changes on the preview here.
Learn how to connect that variant with a Customily function to make changes on the preview here.
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.
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.
If the problem continues contact support.
Share
Was this article helpful?
Have more questions? Submit a request