Focus visitors’ attention on images of the selected product color within the gallery on Product pages.

Setup

The solution lies in linking the variant image with other images of the same color in the Media library. We'll connect them through the Alt text of the images.

1. In Media, find the image associated with the variant.
2. Click Edit, and in the window that opens, click Add alt text.
3. The alt text can be anything. In parentheses, write the color name, like (Black), and save it.
4. Now, find another image of this black color and duplicate the prefix (Black) after its alt text.
5. Remember to save the changes on the product page.

Repeat this process with all images in Media, and enable ‘Show only media of selected variant’ checkbox in the Product overview section of the Product template.

After saving, you'll see the following before/after: