With the Variants feature, you can add an image for any variant value (it will display for any variant product that uses the value) or any individual variant product. To access this functionality:
- Go to the Products app.
- Select the product of your choice.
- Scroll down to the Variants section.
Variant Value Images
To add one or more images for a variant value, locate the Variant Values section of the grid and press the value you want to edit to reveal options. Here, press the Variant Images section.
You can either choose an image already in your gallery or add a new one by clicking the drop zone and locating it on your device. Once it's in the gallery, close the dialog box and press Save on the product edit page. You'll notice that applicable rows in the Images column in your variant products table inherit variant value images (all variant products that use the value in question). If you have more than one applicable image, you'll see a bubble with a number in it displaying in the top right of the preview set. Press the preview set to view all applied images. Inherited images show a Group Image tag in the gallery.
Variant Product Images
To add one or more images for a specific variant product (not inherited from its constituent variant values), press the plus symbol in the Images column for the row corresponding to the variant product.
You can either choose an image already in your gallery or add a new one by clicking the drop zone and locating it on your device. Once it's in the gallery, close the dialog box and press Save on the product edit page.
If the variant product has inherited images from its variant values, you'll see a preview of them in place of the plus symbol. To add a unique image for that product to go along with the existing set, press it.
The Storefront Experience
Variant images only appear when a Variant is chosen, replacing the other images that are displayed. Thumbnails will appear only when there is more than one image assigned to a Variant.
Shoppers can click the thumbnail to view the full size in the main image area. The image also changes automatically based on the first variant value they select. Thereafter, a spotlight effect shows which image(s) correspond to the selected value(s).
For more information about variants, see the following articles: