This feature helps you to display product images by a variant group.
For example, the pictures of products with the same color will be displayed together when you change the options. You can refer to the video below:
Important note:
You only can configure the Group media alt text for one of the variant options. It means, if you config the alt text following the Color option, you can not config for Size option.
Variant image group do not work if your variant name includes " letters. Example
1. Enable Group media
Go to Theme settings > Product Single > Enable use group media.
2. Config with a single language
If you only have one language in your store (example: English), you need to follow these steps:
Step 1: From Shopify Admin > Products > Open a product that you want to show Group variants image.
Step 2: Edit Alt Text
Click on an image to add Alt Text. Enter Color_”the color of your variant”.
For example Color_White Cream, Color_Heart Dotted. You must enter all the same Alt Text for a group of images.
This is the result:
3. Config with multi-languages
If you have multi languages in your store (example: English and French), you need to follow these steps:
Step 1: From Shopify Admin > Products > Open a product that you want to config Group variants image.
The required alt format: t4optionX_Y
The position of X and Y can be explained by the image below:
X: is the Option name. The number of x in the alt text should be counted from 0. So if you have 2 variant options: Color - (X)0 and Size - (X)1. You can choose which variant to be grouped.
Y: is the Options value. The number of y in the alt text also should be counted from 0. So if you have 3 options values: Black - (Y)0, Green - (Y)1 and White - (Y)2.
Step 2: In the Media option, click on each product image to add Alt text.
Configure alt text following the first variant option: Color.
For example, all images for "Color: Black" will have the same alt "t4option0_0", "Color: Green" -> "t4option0_1". Please follow this video:
The result:
Configure alt text following the second variant option: Size
For example, all images for "Size: S" will have the same alt "t4option1_0", "Size: M" -> "t4option1_1". Please follow this video:
The result:
4. Change main image when choosing different variants
If you want to change the main image when choosing different variants (like Color-Size) as video below:
You need to choose an image for each variant here: