> For the complete documentation index, see [llms.txt](https://help.ecombe.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.ecombe.com/editor-and-functions/editor-features/how-to-setup-product-images-with-alt.md).
# 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 %}
