> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/product-pages/media-gallery/media-grouping.md).

# 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](/eclipse/product-pages/sibling-product-swatches.md), 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. 

<img src="/files/lKVGptcGcP9z3n5TMxL3" alt="Images ordered for the color variants &#x27;Purple&#x27;, &#x27;Green,&#x27; and &#x27;Yellow&#x27;." width="563">
{% endstep %}

{% step %}

### Assign the first image of each group to variants&#x20;

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

> 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="/files/oVeOyrEblvGr573xGRxX" alt="Assign the first group image to the related variant." width="375"> <figure><img src="/files/2xBhW6Oh9EzHwRopJIQE" 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**.