# Media grouping

With **media grouping**, your product pages will show only the relevant media for the selected variant and hide the rest.

{% hint style="info" %}
If you want to show different product details as well as images, you may want to use [Sibling product swatches](https://help.fluorescent.co/eclipse/product-pages/sibling-product-swatches), which links variants to their own product pages.
{% endhint %}

### Set up media groups

***

To create **media groups** for variants, first **re-order the product media for each of variant *****in sequence***, so that they are grouped together and follow the same order as your product options. Then **assign the first image of each group to the related variant**. 

{% hint style="info" %}
When selected, variants will display the assigned image and all following images up until the *next* variant's assigned image.
{% endhint %}

 

In your **Shopify admin**, go to **Products** to open the product you want to edit:

{% stepper %}
{% step %}

### Re-order product media in the same order as variants

Using the drag-and-drop handles **`⋮⋮`**, re-order your product media to **group together items for each variant.** The order of the groups should match the order of the variants.

> 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. 

![Images ordered for the color variants 'Purple', 'Green,' and 'Yellow'.](https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F8Y3uYWvYtWNOKUvgP0zR%2Fmedia-group-order.png?alt=media\&token=bf4cdd0a-4265-4c11-9b33-8bf8ca0746d8)
{% endstep %}

{% step %}

### Assign the first image of each group to variants 

In the **Variants** section, click the **Add image** button next to each variant. Select the first image of the group related to that variant. 

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

If your product has **multiple options**, assign the first image to each variant of that option.

> For example, if your product has both color and size options, assign the first group image to variants with the same color.

<div><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FQo0nkbOvki76EyB1HLBp%2Fmedia-group-variant.png?alt=media&#x26;token=61180b8f-8605-4434-922a-9bc9af9abfa1" alt="Assign the first group image to the related variant." width="375"> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FsJlb8N9FINH6T0dEVZ1Q%2Fmedia-group-option.png?alt=media&#x26;token=f2ffa61c-1edf-49ad-953e-1cb428432cab" alt="" width="375"><figcaption><p>For multiple product options, assign the first group image to each related variant.</p></figcaption></figure></div>
{% endstep %}
{% endstepper %}

### 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.

In your theme editor (**Customize**):

1. Open the product template.
2. Click the **Product overview** section.
3. Toggle on **Enable media grouping** option.
4. Click **Save**.