> 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/stiletto/product-pages/variant-options/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](/stiletto/product-pages/variant-options/sibling-product-swatches.md), which links variants to their own product pages.
{% endhint %}

<details>

<summary>Why is the featured product image blank?</summary>

If you have [media grouping](/stiletto/product-pages/variant-options/media-grouping.md) and the [show featured media first](/stiletto/product-pages/layout-and-style/media-gallery.md#media-options) option enabled, the featured image may be blank if the featured image is not included in a media grouping. Either add the featured image as the first image in each media grouping, or turn off the option to show featured media first(click *Product overview* section to find settings).

</details>

<h2 align="center">Set up media groups</h2>

***

To create **media groups** for variants, first **re-order the product media for each of variant&#x20;*****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 %}

### <mark style="color:$primary;">Re-order product media in the same order as variants</mark>

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.

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

{% step %}

### <mark style="color:$primary;">Assign the first image of each group to variants</mark>

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="/files/oVeOyrEblvGr573xGRxX" alt="Assign the first group image to the related variant." width="188"> <figure><img src="/files/2xBhW6Oh9EzHwRopJIQE" alt="" width="188"><figcaption><p>For multiple product options, assign the first group image to each related variant.</p></figcaption></figure></div>
{% endstep %}

{% step %}

### <mark style="color:$primary;">Enable media grouping</mark>

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**.
>    {% endstep %}
>    {% endstepper %}

***

> **Related links**\
> [Media gallery](/stiletto/product-pages/layout-and-style/media-gallery.md)\
> [Variant swatches](/stiletto/product-pages/variant-options/variant-swatches.md)\
> [Sibling product swatches](/stiletto/product-pages/variant-options/sibling-product-swatches.md)