Page History

Overview

Product images can be tagged in the CMS so that the image in the gallery changes on selection when your customer selects a variant of a master product variant. 

To You can see an example of this , visit https://www.elevenworkwear.com.au/men-s/pants/pant-cargo-cool-ripstop and select a colour option from the dropdown list.

You'll notice the image in the gallery updates according to the colour you choose. 

...

...

For below.

This particular shirt is available in several different colours. When the user selects a colour from the dropdown list, the image automatically changes (as long as there is an image tagged to match that colour option).

To take advantage of this functionality, all you need is a master product with multiple images loaded, and tags on the images each image to match the product options.  This guide details the steps required Read on for a quick How To. 
 

Upload and Tag product images

You may already have all of your images uploaded for your productsthe various product options. If this is the case, you can skip steps 34-5 6 below and begin go straight to adding tags.  

1. In the CMS, navigate to Products & Categories → Product Maintenance. 
2. Search for a master product and click 'Edit'. 
3. Scroll to the Media section where the product images are displayed.and click .
   1. If all required images for this product are already there, skip to step 7.
   2. otherwise, continue on to upload your images.
4. Click 'Upload Image' to add a new image.Browse to the image file and select it. Once it's 100% loaded, then 'Select Files' to browse to your image file. 
5. Select the file and let it load (unless the file is unusually large, this should be very quick). Once complete, click 'Add'.
   Image RemovedImage Added 
6. The image You should now appear in the listsee the image thumbnail displayed, along with a Tag input field. 
7. Add a Tag to the image. The tag should correspond to a variant value of one of your the child products (e.g. "BlueRed"). 
   Image Removed. You can add multiple tags to an image if required.
   Image Added 
8. Repeat Steps 34-6 7 as necessary needed for additional any other images for this product.
9. Click 'Save' or 'Save and Exit'. 

And voila!  

Load the product page in another browser or incognito tab. Check that the image automatically changes when you select different variants.