> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/features-and-advanced-setup/display-only-media-related-to-chosen-variant.md).
# Display only media related to chosen variant
Show the photos, videos, and models of the selected color in the product gallery. Each file's alt text ends with that color's option value in parentheses.
Black / S and Black / M share one set of files, because both variants use the color Black. Size and every other option leave the gallery unchanged.
{% hint style="info" %}
**Theme Editor → Products → \[your product template] → Product overview → Show only media of selected variant**
{% endhint %}
The same switch is on the Quick view template and on a Featured product section. Turn it on for each template that uses the gallery.
***
{% stepper %}
{% step %}
### Set the color option
Decide which product option is the color. **Theme settings → Product card → Color labels** does this for the gallery and for color swatches on product cards. Leave the field empty when the option name contains Color or Colour. On a translated storefront the theme looks for the translated word, such as Farbe, Couleur, or Colore. For any other name, list them separated by commas: `Color, Shade, Finish`. Capitalization is ignored. A filled field replaces the automatic rule, so include every color option name the catalog uses. When a product has two options that both count as colors, the gallery follows the first of them in the product's option list.
{% endstep %}
{% step %}
### Label each media file
Open **Shopify Admin → Products → \[your product] → Media** and edit each file on its own. In the alt text, end with the color's option value in parentheses: a black photo might read `Front view (Black)`, a blue one `On model (Ocean Blue)`. The words in parentheses are the value shoppers see on the swatch. Capitalization is ignored, so `(Black)` and `(black)` are the same color. Spaces stay as spaces, so the value Ocean Blue matches `(Ocean Blue)`. If the alt text has several pairs of parentheses, Avante uses the last pair. An alt text that is only the product title counts as no color — Shopify often fills that in until you edit it.
{% endstep %}
{% step %}
### Assign the opening image
Open **Variants** and assign that color's opening image to one variant of the color, for example Black / S. The gallery opens on this image. Repeat for every color.
{% endstep %}
{% step %}
### Enable the setting
In the product template, open **Product overview** and turn on **Show only media of selected variant**.
{% endstep %}
{% endstepper %}
Photos of packaging, the brand, or the product as a whole apply to every color. Leave the parentheses out of their alt text, and turn on **Show also general product media** in the same section. With that setting off, those files stay hidden.
***
### Common issues
The gallery stays the same when the color changes
* **Color labels** includes this option name, or the option name contains Color or Colour.
* Each file of that color ends with the option value in parentheses, for example `(Ocean Blue)`.
* **Show only media of selected variant** is on for the template this product uses.
Only one file is visible
The other files are hidden because their alt text does not match the color value. Open **Media** and compare the text in parentheses with the option value. An untouched alt text that only repeats the product title does not count as a match.
Lifestyle photos disappear, or they show on every color
Files with no color in parentheses are general media. They stay in the gallery for every color when **Show also general product media** is on. With that setting off, they stay hidden.
The filter works on one product and skips another
Each product template has its own switch. Open **Theme Editor → Products → \[that template] → Product overview** and turn on **Show only media of selected variant**. Do the same on Quick view when the popup uses this gallery.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/avante-themes/features-and-advanced-setup/display-only-media-related-to-chosen-variant.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.