# How to setup Product images with alt
This guide explains what **Product Images with Alt** is, how it works, and how to set it up correctly in Shopify.
## Overview
**Product Images with Alt** allows product images to change dynamically based on the selected variant.
When a customer selects a variant (for example, **Black**), only images that belong to that variant will be displayed. This helps customers view the correct product version without confusion.
## How It Works
The feature uses **image alt text** to determine which images should be shown.
* When a variant is selected
* The system looks for product images whose **alt text matches the variant name**
* Only matching images are displayed
* All other images are hidden
## Example
* Selected variant: **Black**
* Displayed images: Images with alt text **“Black”**
* Hidden images: Images with other alt values (e.g. “White”, “Red”)
## Before You Start
Make sure that:
* Your product has **variants** (such as Color, Style, or Finish)
* Each variant has its own set of images
* You use **exactly the same wording** for variant names and alt text (case-sensitive)
{% stepper %}
{% step %}
#### Open the Product in Shopify Admin
1. Go to **Shopify Admin**
2. Click **Products**
3. Select the product you want to apply **Product Images with Alt**
{% endstep %}
{% step %}
#### Add Alt Text to Product Images
You must assign the **variant name** as the alt text for each corresponding product image.
**Example**
If the variant name is **“Natural Oak”**, all images of that variant must have:
```
Alt text: Natural Oak
```
**How to add alt text:**
1. Click on a product image.
2. In the image details panel, find the **Alt text** field under **Information** then **enter the variant name.**
3. Click **Save.**
Repeat this process for **all variant images**.
{% endstep %}
{% step %}
#### Enable “Media by Alt”
1. Go to your **Template** and Open the **Featured Product** section.
2. Enable the **Media by Alt** option then **save** the changes.
{% endstep %}
{% endstepper %}
### Result
Once enabled:
* Selecting a variant will no longer slide to a single image
* Instead, **all images matching the selected variant’s alt text will be displayed**
* Customers see only relevant images for the chosen variant
### Best Practices
* Use **exact variant names** for alt text (no extra words)
* Avoid mixing formats (e.g. use “Black”, not “Black color”)
* Make sure every variant has at least one image with matching alt text
* If no images match the alt text, no images will be filtered
### Common Issues
**Images do not change when selecting a variant**
* Check if alt text exactly matches the variant name
* Ensure “Media by Alt” is enabled in the section
**Only one image appears**
* Make sure all images for that variant use the same alt text
{% hint style="info" %}
Have a question? Contact us via **in-app live chat,** we'll reply in few minutes.
{% endhint %}
---
# 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://help.ecombe.com/editor-and-functions/editor-features/how-to-setup-product-images-with-alt.md?ask=
```
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.