How to fix missing alt text on Shopify product images

If a product image has no alt text, people who use a screen reader hear "image" or a file name instead of what the photo shows. In Shopify you add alt text in the product's media settings, and your theme then has to output it on the page. This guide covers both parts and how to check the result.

The short answer

1. In your Shopify admin, open Products, choose a product, click an image, then Add alt text.
2. Describe what the image shows in a short phrase, for example "Blue linen shirt, front view".
3. Check that your theme prints that text in the image's alt attribute. Most current themes do, but custom sections and apps sometimes do not.

Why it matters

Alt text is the text alternative that WCAG success criterion 1.1.1 Non-text Content asks for: "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose." Without it, a shopper who cannot see the photos cannot tell colors or angles apart, and an image that is also a link (like a product card) can be impossible to identify.

Missing image descriptions are also one of the issues automated checks find most often, which is why they come up in website accessibility lawsuits.

How to add alt text in the Shopify admin

Shopify documents these steps in Adding alt text to media:

1. Go to Products in your Shopify admin.
2. Click the product you want to edit.
3. Click an image to open the preview.
4. Click Add alt text.
5. Type the description and click Save alt text.

Shopify accepts up to 512 characters but recommends 125 or fewer. Repeat this for every image, including variant images.

What to write

• Say what the image shows, in plain words.
• Mention what makes this image different from the others (color, angle, detail).
• Skip "image of" and keyword stuffing.

Check that your theme outputs it

Adding alt text in the admin only helps if the theme prints it. In a current Shopify theme, product images usually come from Liquid like this:

{%- assign alt = product.featured_media.alt | default: product.title -%}
{{ product.featured_media | image_url: width: 800 | image_tag: alt: alt }}

If an image tag in a custom section or app has no alt attribute at all, ask your developer to add one, using the media's alt value with the product title as a fallback.

Decorative images

Some images are pure decoration, such as a background texture. WCAG says these should be implemented so assistive technology can ignore them. Give them an empty alt (alt="") rather than leaving the attribute out:

{{ section.settings.background | image_url: width: 1600 | image_tag: alt: '' }}

WooCommerce stores

In WordPress, open Media, select the image and fill in Alternative Text. Product images use that field automatically in most themes. Check page builders and slider plugins, which sometimes output their own image tags without it.

How to check your fix

1. Run a free scan of a product page and then a collection page. Missing alt text may show up as "Images are missing text alternatives". The free scan shows the most serious issues on the page you enter.
2. Spot-check with a screen reader: VoiceOver on a Mac or iPhone, or NVDA on Windows. Move to a product image and listen to what it announces.
3. Check product cards on collection pages, not only the product page.

A full FixRamp report shows how many images lack alt text on each page (25 or 150 pages, depending on the plan), grouped by template, with examples and the fix for your theme where it applies.