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

<details>

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

If you have [media grouping](https://help.fluorescent.co/stiletto/product-pages/variant-options/media-grouping) and the [show featured media first](https://help.fluorescent.co/stiletto/layout-and-style/media-gallery#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>

### Set up media groups

***

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**.&#x20;

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

&#x20;

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.&#x20;

![Images ordered for the color variants 'Purple', 'Green,' and 'Yellow'.](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-c35df3dbf9444d8af306de1ee255661b73c1df07%2Fmedia-group-order.png?alt=media)
{% 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="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-ad052314ae6e208530988c48d9c2553df52d68ab%2Fmedia-group-variant.png?alt=media" alt="Assign the first group image to the related variant." width="375"> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-7762f61482abd2316747734347545d635784bbaa%2Fmedia-group-option.png?alt=media" 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**.

&#x20;

***

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