Variant images set

This feature is currently only available in our themes Impact, Warehouse, Focal v8 (or higher) and Prestige v7 (or higher).

Shopify only allows you to attach one image per variant out of the box. However, in some circumstances, you may want to connect different images per variant and automatically hide those that do not belong to the selected variant.

For instance, if you have a T-Shirt available in two colors (Black and White), you may want to show five images for the black variant and five for the white variant.

Until Shopify can add a native solution to this problem, our themes come with a solution that relies on the Alt tag. Please note that this solution is manual and might not be usable if you have a huge product inventory.

Configuring alt tags

To use this feature, follow the steps below:

1/ Identify the product option that controls the change of the image set. Most of the time, it will be the Color option, but it can be any other option (such as Scent or Material).

To simplify this tutorial (of course, you will need to adjust it to your products), we will assume we have an option named Color with Black and Silver values. Our goal is to display different sets of images when the Black or Silver option is selected.

2/ Once you have identified the option name, we need to edit the Alt tag of each image, click on an image in the "Media" list:

3/ Then, click on the Add alt text:

4/ In the Alt text, enter the hash character (#), followed by the option name, an underscore, and the option's value. For instance, to show this image only when the black option is selected, we need to enter the alt tag #color_black, as shown below (make sure to click on "Save alt text"):

If the option is made of several words (for instance, Deep blue), enter the option value as it. For instance, #color_deep blue

If you also separate the option value by an underscore, it won't work.

The screencast below summarizes the different steps:

5/ Repeat the process for each image.

Keep in mind, the ALT tag is used for Accessibility and SEO purposes. However, as you are using this feature, you are effectively using the ALT tag for another purpose.

  • If you want to control your alt tag independently, you will need to use a variant image set app, or separate your products into individual products. If you want to separate your products you can then use our feature for Product Variations to group similar products.

FAQ

  • How to show an image for every variant? If there is one or multiple images that you do want to show for every variant, simply do not set any Alt tag with the # character.
  • Is it possible to show an image set based on multiple options? No. You can only have an image set for one option only.
  • Is it working with multi-languages? Because this approach relies on Alt tags, which are currently not translatable, this feature won't work if you use multi-languages. If you have such problems, we recommend you rely on an app such as this one (we do not provide support for apps, please reach the app developers if you are facing any issues). You can also use the "product variation" feature instead, which allows you to link different products.