> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/edge-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://oranthemes.gitbook.io/edge-theme/collections-and-products-pages/product-page/media-grouping.md).

# Media grouping

Using media grouping, your product pages will display only the media related to the chosen variant while concealing the others.

## Set up media grouping <a href="#h_01hen2009mbj6jykr5c7cnkw5z" id="h_01hen2009mbj6jykr5c7cnkw5z"></a>

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), open the template selector.
2. Select **Products**, then **Default product.**
3. On the left-sidebar, add **Product information. ⇒ Enable media grouping**&#x20;
4. Make necessary changes > **Save.**
   {% endhint %}

{% hint style="warning" %}
Define option names to which the color swatch variant picker will be applied.\
**Theme settings / Color swatch**
{% endhint %}

### Product media grouping <a href="#h_01hen2009ng4ystcdywecqdy4e" id="h_01hen2009ng4ystcdywecqdy4e"></a>

1 . Sorting product pictures making sure they are aligned

<figure><img src="/files/QZFFrhRl8YLvyaUXvmZC" alt=""><figcaption></figcaption></figure>

2 . Match Variant Color options order with product images

<figure><img src="/files/671nwFYdHhb7rfA7ujtL" alt=""><figcaption></figcaption></figure>

3 . Attach the first image of each group to a variant image.

<figure><img src="/files/JvahF3EqOZq4hyBwKRG2" alt=""><figcaption></figcaption></figure>