> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/nimbus-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/nimbus-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. **Grouping type > Variant group**
5. 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://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FOjfmqOPdpqkn7Ud4td6L%2F2025-05-07_15-31-31.jpg?alt=media&amp;token=59d66373-87e7-4dff-a45a-53b21722b9f5" alt=""><figcaption></figcaption></figure>

2 . Match Variant Color options order with product images

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FFpyNVQRa0h0eIpqAlcXd%2FFrame575.jpg?alt=media&amp;token=3a1995ce-57cd-4824-acbb-3b451b640249" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FAO7eXNNcowJEEnGMQAaj%2FFrame576.jpg?alt=media&amp;token=32a40b0d-b96b-4c54-9a55-b4473319a0b3" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
On the left-sidebar, add **Product information. ⇒ Grouping type > Alt image group**\
There is one more way to use the alt image. For each alt tag of the image, you need to use the syntax For example: #oran\_Black<br>
{% endhint %}