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. Rename the images in sequence to keep them organized.

For example, if your product has three options — Color, Size, and Material, the image sets can be named using short initials of their variant combinations.

For Yellow-Cotton-Small variant, the first picture in the set is named as YCS-1

Option
Image Count
Images renamed

Yellow-Cotton-Small (YCS)

3 images

YCS-1, YCS-2, YCS-3

Yellow-Cotton-Medium (YCM)

2 images

YCM-1, YCM-2

Yellow-Linen-Small (YLS)

3 images

YLS-1, YLS-2, YLS-3

Blue-Linen-Small (BLS)

2 images

BLS-1, BLS-2

Blue-Linen-Large (BLL)

3 images

BLL-1, BLL-2, BLL-3

Green-Cotton-Small (GCS)

3 images

GCS-1, GCS-2, GCS-3

Arrange all color images sequentially.

circle-info

Note: To ensure the correct first image is assigned to each variant, please rename your images in a clear sequence based on Color–Size–Material.

For example:

  • Black – Medium – Cotton → rename images as BMC-1, BMC-2, BMC-3

  • Assign BMC-1 as the first image for the Black / Medium / Cotton variant.

Following this naming order will help the system correctly map images to their respective variants.

Step 2: Assign Images to Each Variant Combination

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

circle-info

Note: Shopify allows only one featured image per variant. When assigning images to a variant, make sure to select the first image from the image set created for that specific variant. This image will act as the variant’s featured image when the variant is selected.

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

You can refer to the table above to see the image names assigned to each respective Color and Size variant.

For example:

Image Name (Search)
Assigned to the variant

YCS-1

Yellow-Cotton-Small

BCS-1

Blue-Cotton-Small

GLM-1

Green-Linen-Medium

RLL-1

Red-Linen-Large

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