Media grouping

Product pages

With Media grouping, you can assign specific sets of images (and videos) to each product variant. When customers select different variants, your product pages will show only the relevant media for that variant and hide the rest.

This guide shows how to set up media groups by editing your product media in the Shopify admin and enable media grouping in your theme editor.

Note Media grouping provides a solution to show specific images. If you want to show different product details as well as images, you may want to use Sibling product swatches, which links variants to their own product pages.

Set up media groups

Media grouping provides a unique solution to assigning multiple images and videos to variants by using the order of your product media.

Start by uploading all of your images and videos to the product media.

Then, re-order the items for each of your variants _in sequence_, so that they are grouped together and follow the same order as your product options.

After ordering your product media, assign the first image of each group to the associated variants. The assigned images specify the start of the sequence of product media to use for variants.

STEPS

In your Shopify Admin:

1. Go to Products to open the product you want to edit.

2. Upload all variant images and videos to your product Media.

3. Using the drag-and-drop handles ⋮⋮, re-order your product media to group together items for each variant in sequence, so that they line up with the order of your product options.

   All media for the first variant should be in the top positions, followed by all media for the second variant, followed by all media for the third variant, etc.

   The example below has images ordered for the color variants 'Purple', 'Green,' and 'Yellow'.

   
4. In the Variants section, assign the first image of each group with the associated variant.

   You need to assign images to every variant. If no image is assigned, the media gallery will not update and will continue to show images of the previously selected variant.

   
5. (Optional.) If you want to show the same product media for variants of the same option, assign the first image to each variant of that option.

   For example, if you have a 'Purple' color option with multiple sizes, assign the first group image to every 'Purple' variant.

   
6. Click Save.

Enable media grouping

After you've set up media groups for your variant images, you can enable media grouping in the Product overview settings of your product template.

STEPS

In your theme editor (Customize):

1. Open the product template.

2. Click the Product overview section.

3. Select the Enable media grouping option.

4. Click Save.

---

Related links Media gallery Variant swatches Sibling product swatches