We use Image Alt text to group images with the same alt text attribute and match with the variant color of the product.
Suppose you have a product which has 4 colors, each color has multiple images like this demo: https://arena-thelook.myshopify.com/collections/denim-shorts/products/lexiing-product-sample
From your Shopify admin, go to Online Store > Themes. Click “Customize” button of theme you want to edit.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit and click Customize.
- From the top bar drop-down menu, select the type of page that you want to edit.
- Click the Product Section to customize. Eg. Product pages default
Edit Product Image Alt to match Group Image. You may change alt of product image variant image by following instruction https://help.shopify.com/en/manual/products/product-variant-images#add-alt-text-to-product-images
- From your Shopify admin, go to Products.
- Click the name of the product that you want to edit.
- Hover over the product image and click ALT.
Add or edit your alt text in Image alt text follow format: group-"color name"
Example : you have color is “White”, just add “group-white”, or “group-yellow” for “Yellow” color. But if your color name has many words such as “Dark Blue”, just add “group-dark-blue”.
- Continue to process alt text with the remaining images.
Note: If you want to display image in all variant color please add **image alt text** is: **group-all**.