Configurable products are a native functionality from Magento.
To learn how to create configurable products you can follow this great tutorial by Magento:
Attributes that are compatible with Customily, and that will work with the preview are:

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! 

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. 

Adding Customily functions to the Configurable Product's attributes

1. Create a configurable product, with all its attributes and child products (simple products associated with the configurable one). 
 
2. Under the general information of the product, scroll to the end to find the Product Customization Id and assign the Template ID of the preview you'd like to load by default on that product. Turn Enable Customization to Yes
 
 
3. Save the changes by clicking Save on the top right corner
 
4. Once the product is saved, scroll back to the end of the General Information section, to find the “Attributes Options” field. Click Edit to assign Customily Functions to the attributes.
 
 
5. A dialog will appear with all the attributes from the configurable product. Click and expand each attribute to add a Customily Function to it. This will connect the attribute with the dynamic behavior on the preview.
 
 
6. Click Add Function
 
 
7. Select a Customily Function from the menu
 
Functions are the actions that the option will trigger on the preview.  
Function types available are:

Change Font Type

Executes the change of font in a text.

Learn more about font type function

Change Text Color

Executes the change of color in a text.

Learn more about text color function

Change 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.

Learn more about dynamic image function

Change 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.

Learn more about dynamic vector function

Change Vector Color

Executes the change of color in a vector element.
 
Learn more about vector color function

Change Image Color

Executes the change of color in an image uploaded by a customer.
 
Learn more about image color function

Change Product

Executes a change in the assigned Customily Template ID. This is used to load a different preview template on the product.

Learn more about change product function
8. 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.)
 
9. If necessary, add the option's position, or Template ID for each attribute value. 
 
Tip:
You can add as many functions as you like to an attribute. This is useful if you want the attribute to change several things at a time, for example the colors or fonts of various elements on the preview.
9. Repeat these steps by expanding all the attributes, to add the functions to them. Once you are done click Save on the top right corner to close the dialog.
 
10. When you are back on the product configuration page, click Save on the top right corner, to save the entire product.
 

Adding Customizable Options to a configurable product

Configurable products can also have Customizable Options. These need to be added directly to the configurable product (the parent product).
 
To learn how to add options to your product you can follow this great tutorial by Magento:
Learn how to add customizable options to your Magento products
 
Once you have the options added, you can link them with Customily. 
Watch out:
A warning sign from Magento will appear when you try to add a customizable option on a configurable product. It reads:
 
"Custom options with price type "percent" is not available for configurable product."
 
Don't mind this message! You can add the customizable options without any trouble, so just ignore it 🙂 

Share

Was this article helpful?

0 out of 0 found this helpful
Have more questions? Submit a request