# Filter media by variant

{% hint style="danger" %}
**This guide applies to Aurora version 3.1.0 and newer**
{% endhint %}

The feature allows you to show for every product only the media associated with the selected option value. To set up media filtering, add a rule with a product option (`color`, or any other) and option values, one (for example, `green`) or more (for example, `green`, `sunny yellow`, `black/white`), as alt text to the corresponding product media.

To add alt text to the product media, follow the steps below:

1. From your Shopify admin, go to [**Products**](https://admin.shopify.com/products).
2. Click the name of the product to open the product details.
3. Click a product media item to open the **Media preview**.
4. Click **Add alt text**.
5. Enter a rule with the option and the option value (or values) as shown below. The letter case doesn’t matter.

{% hint style="success" %}
**#color\_green** (for one value)

**#color\_green, sunny yellow, black/white** (for multiple values)
{% endhint %}

* <sup>start with a hash character (#)</sup>
* <sup>add option name (ex. color)</sup>
* <sup>add an underscore</sup>
* <sup>add one option value (ex. green) or multiple values separated by commas (ex. green,sunny yellow,black/white)</sup>

<div data-with-frame="true"><figure><img src="https://641405055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbSw8I8m5dlO1sOJutja5%2Fuploads%2F1u3cXaNAzHVMI9iabJyw%2Ffilterbyvar.png?alt=media&#x26;token=8146585b-4f53-455a-a185-bcfd405059a2" alt=""><figcaption></figcaption></figure></div>

6. Click **Save alt text**.
7. Use left and right arrows to navigate through the media gallery, and add alt text with the corresponding option values to all the product media.
8. &#x20;Repeat the steps for all the products you want to filter the media for.&#x20;

{% hint style="warning" %}
**IMPORTANT:**

* You can filter media for one product by the "color" option and for another product - by the "material" option, but you can’t use more than one option within one and the same product.
* If you add any other data to the alt text field, for SEO or accessibility reasons, you need to place it BEFORE the media filtering rule (i.e. before the #).
* If you have a multi-language store, the **media filtering will work only with the store’s default language**.
  {% endhint %}

To enable product media filtering in the theme, follow the steps below:

1. Open the product page and select the **Product information** section, or add the **Featured product** section to any page in your store.
2. Select the checkbox **Show only selected variant’s media**.
3. **Save** the changes in the theme editor.

If a product variant has no media assigned with alt text, all the media available for this product will show when the variant is selected.

### Video Guide

{% hint style="danger" %}
Applies only to **Aurora 3.0.3** and older (**down to 2.4.0**)
{% endhint %}

{% embed url="<https://youtu.be/MPwyJZqkDqs>" %}
Filter media by variant
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://getsitecontrol.gitbook.io/aurora-theme/tutorials/filter-media-by-variant.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.