Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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 productstyle or colour option.  

You can see Check out an example of this below.

This particular long sleeve 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 that product's options .  Read on for a quick How To(or variants).  Ready to try it out? Read on..
 

Info
titlePrerequisites

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.

...

You may already have all of your product images uploaded for the various product optionsmaster products. If this is the case, you can skip steps 4-6 below and 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 product images are displayed.
    1. If all required images for this product are already there, skip go to step 7.
    2. otherwise, continue on to upload your images.
  4. Click 'Upload Image', 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'.
     
  6. You should now see 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 the child products (e.g. "Red"). You can add multiple tags to an image if required.
     
  8. Repeat Steps 4-7 the above steps as needed for any other images for this productthe remaining product images.
  9. Click 'Save' or 'Save and Exit'. 

...

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

 

 

Content by Label
showLabelsfalse
showSpacefalse
titleRelated articles
cqllabel in ("cms","how-to","product_content")

...