Three Options Configuration

Step-1 Add Product Images & Create Variant-Based Image Sets

Open the product in your store admin and create image sets based on Color, Size and Material variants.

For example, if your product has three options (Color, Size and Material), combinations with different image sets:

  • Yellow / Small – 3 images: Yellow-S1, Yellow-S2, Yellow-S3

  • Yellow / Medium – 2 images: Yellow-M1, Yellow-M2

  • Blue / Small – 2 images: Blue-S1, Blue-S2

  • Blue / Large – 2 images: Blue-M1, Blue-M2

  • Green / Medium – 2 images: Green-M1, Green-M2

  • Orange / Large – 2 images: Orange-L1, Orange-L2

Arrange all color images sequentially.

Note: To ensure the correct first image is assigned to each variant, rename color images in sequence (e.g., Black-1, Black-2, Black-3), and assign Black-1 to the Black variant."

Step 2: Assign Images to Each Variant Combination

  • Click on the arrow icon to open the variants of the color.

  • Click the arrow icon next to the Colour option to open its variants.

  • Under each Color, select the relevant Size variant image.

For example:

Select Yellow-S1 for the Yellow / Small variant Select Yellow-M1 for the Yellow / Medium variant Select Blue-L1 for the Blue / Large variant Select Green-1 for the Green / Medium variant Select Orange-L1 for the Orange / Large variant

Repeat this process for all Color–Size variant combinations.

  • Repeat this for all Color–Size combinations.

Step 3: Configuration Done

The final set up will look just like the snapshot below.

Step 4: Final Output

The images of the selected variant are visible as expected.

Last updated