2. Search or browse to the BigCommerce product you’d like to add the personalization behavior to and select it.
Tip:
You can use the search bar to search for a product by it's name.
3. Once inside the product configuration, assign the Template ID of the preview you'd like to load by default on that product.
4. Choose if you want to show the preview immediately when the product page loads. Otherwise, the default behavior is to load the page with your usual product image and show the preview only when customers interact with the options.
5. Customily will automatically recognize the BigCommerce Option Set for that product. You will see the list of all the different options available on your product displayed as shown below. If you haven’t assigned an option set to your product yet, you will need to do that on your BigCommerce Admin as shown here.
8. Click and expand each option to add a Customily Function to it. This will connect the option with the dynamic behavior on the preview.
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
Color
Executes the change of color in a text. It is used with dropdowns and swatches.
Learn more about text color function
Font
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
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
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 Add Customily Condition button.
14. Repeat these steps by expanding all the options, to add the functions to all the options from the set.
15. Once you are done click Save at the top of the screen. When the button turns green the product 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 product set was not saved. Please check your internet connection and try saving it again. If the problem continues contact support.
