Configure option components individually

This guide shows how to configure option components individually. In this example, we create a circular option list.

Drag and drop the circular option list

• Drag a key into the circular option list within the product component.

Configure the circular option list

• Ensure the circular option list is placed correctly within the product component.

• Set up the list without any swatch options.

Inner circle setup

• Adjust the inner circle settings as needed.

• Example: Set the inner circle to a specific variant, such as "extra small."

Add custom options

• To add custom options, duplicate the container inside the option list.

• Select a specific variant (e.g., small, medium, large) for each duplicated container.

Duplicate and modify containers

• Duplicate containers as necessary to match the number of variants you have.

• For example, if you have two variants, duplicate the container twice.

Add descriptions and images

• For each duplicated container, add custom descriptions as needed.

• Search for and add images to the container.

• Delete unnecessary layers and select dynamic data for the image, ensuring it reflects the current product or selected variant.

Set image properties

• Set a fixed height for the images (e.g., 150px) and adjust the fillable height as needed.

Finalize the option list

• Ensure the number of containers inside the option list matches the number of variants.

• Example: For six variants, you should have six containers inside the option list.