Overview
Product images can be tagged in the CMS so that the image in the gallery changes when your customer selects a variant of a master product.
You can see an example of this 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 each image to match the product options. Read on for a quick How To.
Prerequisites
This article assumes you are already using Product Variants on your site. If you're not, or you need information on how to set this up, see our guide - Product Variants.
Upload and Tag product images
You may already have all of your images uploaded for the various product options. If this is the case, you can skip steps 4-6 below and go straight to adding tags.
- In the CMS, navigate to Products & Categories → Product Maintenance.
- Search for a master product and click 'Edit'.
- Scroll to the Media section where product images are displayed.
- If all required images for this product are already there, skip to step 7.
- otherwise, continue on to upload your images.
- Click 'Upload Image', then 'Select Files' to browse to your image file.
- Select the file and let it load (unless the file is unusually large, this should be very quick). Once complete, click 'Add'.
- You should now see the image thumbnail displayed, along with a Tag input field.
- Add a Tag to the image. The tag should correspond to a variant value of one of the child products (e.g. "Red"). You can add multiple tags to an image if required.
- Repeat Steps 4-7 as needed for any other images for this product.
- 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.
Related articles
