PRODUCT - Creating variant image set
This feature is currently only available on our themes Impact, Warehouse, Focal v8 (or higher) and Prestige v7 (or higher). For other themes, you will need to reach a development service like TaskHusky to develop the necessary custom code for you, or by using apps such as Variant Image Penguin.
Out of the box, Shopify only allows you to attach one image per variant. However, in some circumstances, you may want to attach different images per variants, and automatically hide the images that do not belong to the selected variant. For instance, if you have a T-Shirt that is available in two colors (Black and White), you may want to show 5 images for the black variant, and 5 different images for the white variant.
To do that, our theme Warehouse comes with a built-in solution based on alt tag. As Shopify does not offer the ability to create group of images natively, the process is a bit manual, though.
First, you will need to figure out the name of the option that will be responsible to control the change of image set. Most of the time, the option will be called "Color", but it can be anything (like "Scent", "Material"... or whatever). To keep things simple, in our example we will use the standard "Color" option, with the following values:
This option contains several colors (Black and Silver), and the goal is to display different images when Black is selected, different images when Silver is selected... and so on.
Once you have found out the option name, you need to edit the ALT tag of each image. To do that, hover the image in Shopify admin, and click on the "ALT" icon:
In the ALT tag, enter a hash character (#), followed by the option name, followed by one underscore, and the value of the option. For instance, in this example we are editing the ALT tag of an image that should appear when the "Silver" color is selected. I therefore need to enter #color_silver:
At first, the ALT tag is used for SEO purpose. However, as you are using this feature, you are effectively using the ALT tag for another purpose. However, there are two mechanisms to circumvent this.
- If you do not include anything before the hash (#) character, the theme will automatically use the product title as the ALT tag (which is a sane replacement that should be enough in 99% of cases).
- If you still want to tag advantage of the variant image group but still be able to specify your own custom ALT tag, simply add the custom ALT tag before the hash character. For instance: My custom ALT #color_silver. In this situation, the element before the hash will be used as an ALT tag, while the part after will be used to configure the the image group.
To summarize, here are various example of ALT tag that you can use based on what you want to achieve:
- To specify an image that would be visible only for the color "red" (assuming the option for the variant is called Color), and let the theme choose a default ALT tag for the image: #color_red
- To specify an image that would be visible only for the color "red" (assuming the option for the variant is called Color), and use your custom ALT tag: Red t-shirt for men #color_red
If your color is made of several words (for instance "Deep Blue"), then you must write the color name in lowercase WITHOUT any separator between each words of the color.
For instance, the correct alt tag would be:
#color_deep blue
Repeat the process for all images.
Make sure that you properly adjust the option name. In our example, our option being called "Color", the alt tags contains the "color" prefix. You will need to change it accordingly based on your option
How to have images that are displayed for all variants?
Do not include any ALT tag, and the image will be included for all variants.
Can I have an image attached to only some colors (but not all)?
An image can be attached to one color (or to all by not editing the alt tag), however you cannot attach an image to some colors only. To do that you will need to upload several copies of your image, and attach them individually to each color.