Product Customizer & Bundle Builder: Using the Associated Options Feature to Render The Design

Your product customization service may provide a design, where customers get to choose and customize one or more parts. With the Associated Options feature, you can make the content, characteristics or attributes of the parts as options, and the corresponding  parts (actual elements like images and texts) will be rendered in the final design for customers to preview the effect. This makes your customization service a more intuitive and dynamic experience.

Use Cases

Example 1

Customers get to choose an image with descriptive text, and the preview renders how it is overlaid on the entire design.

Example 2

Customers select a skin color from the color swatch for a character, and the preview displays the character image with this skin color.


 

Example 3

Customers choose a text from the dropdown menu, and it is rendered on the product image.

How This Feature Works

To achieve this customization experience, you actually create two sets of options. The first one is for customers to interact with. It can be a simple color swatch, text dropdown, or anything that clearly represents the customization choice. The second one is for rendering the final product image. Then you associate them and make the options from each set match up. For example, your first set is a color watch for the character of a cat, in the order of white, black, orange, and gray colors. Then for your second set, you should provide images of cats in the same order (that is, white cat, black cat, orange cat, and gray cat). So that when a customer selects the color of orange, the preview will overlay the orange cat image on the product image. 

The general steps are as follows:

1. Create the first set of options (A) that customers see and choose from. Since these options are not used for rendering, move it out of the canvas area.
2. Create the second set for rendering (B). Ensure to select Hide this Option. So it won’t be displayed on the product page as options.
   
3. Associate Set A and B by selecting “B” from the Associated Options dropdown menu in Set A component. Ensure that the order of options in A and B matched up correctly.