> 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="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FDXF4n95UqvFUsoeeRsyh%2F2025-05-07_15-31-31.jpg?alt=media&amp;token=33f22c1f-6f63-4095-8c51-4fd7579de032" alt=""><figcaption></figcaption></figure>

2 . Match Variant Color options order with product images

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FQF8TTmPXMgIPEyZmvllg%2FFrame575.jpg?alt=media&amp;token=8ffa31a5-ba47-4d09-90cc-42310c1093fa" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FBr0C0ccpjcVG9IHxIjRH%2FFrame576.jpg?alt=media&amp;token=be1775f5-e2a2-483b-be9c-e1950171fac4" alt=""><figcaption></figcaption></figure>