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)

1

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

2

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.

3

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.

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

Have a question? Contact us via in-app live chat, we'll reply in few minutes.