Alt text is a short written description of an image. Screen readers read it aloud to blind and low-vision shoppers, and it is shown if an image fails to load. On a store, missing alt text can mean a shopper cannot tell what a product looks like.
Add alt text to a product image
Shopify's Help Center gives these steps for desktop (Adding alt text to media (Shopify Help Center)):
- From your Shopify admin, go to Products.
- Click the name of the product you want to edit.
- On the product details page, click a product media item to open the preview.
- Click Add alt text.
- Enter your alt text, then click Save alt text.
Shopify recommends keeping alt text "brief and descriptive": the maximum is 512 characters, but 125 or fewer is recommended (Adding alt text to media (Shopify Help Center)).
Check AI-suggested alt text before accepting it
Shopify notes that its media editor might suggest alt text for images that don't have any, and that accepting a suggestion saves it to the file (Adding alt text to media (Shopify Help Center)). Suggestions can save time, but read each one: only you know which details matter to your customers (material, color, fit, what is included).
Add alt text to theme images (banners, slideshows)
Homepage banners, slideshow images and other theme images are edited in the theme editor rather than on the product page. Shopify's theme accessibility guide says you can add alt text to "the other images in your theme from the theme editor" (Accessibility for themes (Shopify Help Center)). In our own scans, we found large homepage banner images with no alt text at all.
If a banner image contains words (for example "Fall Sale - 20% off"), put those words in the alt text, or better, use real text over the image.
Add alt text in bulk with a CSV file
If you have many products, Shopify's product CSV file has an Image alt text column, and each image uses its own row (Using CSV files to import and export products (Shopify Help Center)). Export your products, fill in the alt text for each image row, then import the file.
Be careful with one detail: Shopify explains that if you import with Overwrite products with matching handles selected, a blank cell in a column you include overwrites the existing value with a blank (Using CSV files to import and export products (Shopify Help Center)). Work from a full export, keep an untouched backup copy, and test with one or two products first.
What to write: good and bad examples
Shopify suggests imagining you are describing the image to someone who has their eyes closed, and points out that the right description depends on your business (Accessibility for themes (Shopify Help Center)). The W3C's alt decision tree adds some simple rules (An alt Decision Tree (W3C WAI)):
- If the image is in a link or button, describe where the link goes or what the button does.
- If the image adds meaning, give a brief description of that meaning.
- If the image is purely decorative, use an empty alt attribute (
alt="") so screen readers skip it. - If the image contains text that is not elsewhere on the page, include that text.
| Less helpful | More helpful |
|---|---|
| IMG_4032.jpg | Speckled cream ceramic mug with a curved handle, shown from the side |
| Mug mug coffee mug best mug gift | Same mug held in two hands to show its size |
| Image of a product | Back of the mug with hand-painted blue lettering reading "Good Morning" |
Avoid starting with "Image of": screen readers already announce that it is an image (Alt text for images (WP Accessibility Knowledge Base)).
Things alt text can't fix
Alt text handles images. Other common problems, such as unnamed icon buttons, unlabeled form fields and low contrast, need separate fixes in your theme or apps.
Check your own store in a minute or two. Our free scanner opens your homepage, a collection page, a product page and your cart in a real browser and lists the problems it can detect automatically, in plain English.
Technical fixes, not legal advice. This guide explains website accessibility from a technical point of view. We are not a law firm, and nothing here is legal advice. No scan, fix or guide can guarantee legal compliance, the outcome of any demand letter or lawsuit, or protection from future claims. If you have received a legal claim, please consult a qualified attorney about it.
Sources
- Adding alt text to media (Shopify Help Center)
- Accessibility for themes (Shopify Help Center)
- Using CSV files to import and export products (Shopify Help Center)
- An alt Decision Tree (W3C WAI)
- Alt text for images (WP Accessibility Knowledge Base)