Home › Guides

Alt text for product images: how to write it on Shopify and WooCommerce

Published 28 September 2026 · about 7 minutes to read

For a shopper who is blind or has low vision, your product photos are only as good as their alternative text (“alt text”). A screen reader reads it aloud in place of the image. If it’s missing, they may hear a file name like “IMG_4471_final.jpg”, or nothing at all, and have no idea what the second, third and fourth photos show.

Missing alt text is one of the most common problems automated scans find on online stores, and it’s one of the easiest to fix yourself. This guide covers what to write and where to put it in Shopify and WooCommerce.

What the standard asks for

WCAG 2.2 success criterion 1.1.1 Non-text Content (Level A) says images that carry information need a text alternative that serves the same purpose. Images that are purely decorative should be hidden from assistive technology (in HTML, an empty alt=""). The US Department of Justice’s web accessibility guidance lists missing alt text as one of the common barriers that keep people with disabilities from using websites.

The W3C’s images tutorial and its alt decision tree are the best short references if you want more depth.

How to write good product alt text

Ask: what would a sighted shopper learn from this photo that helps them decide to buy? Then say that, briefly.

• Name the product and the key visual facts: color, pattern, material, shape, what’s included.
• Say what’s different about this image. A product often has five photos. If each has the same alt text (the product title), the shopper learns nothing from photos two to five. Describe the view: “back view”, “close-up of the stitching”, “worn by a model, size M”.
• Keep it short. Shopify recommends 125 characters or less (the field allows up to 512). One sentence is usually enough; put long details in the product description, where everyone can read them.
• Don’t start with “Image of” or “Photo of”. Screen readers already announce that it’s an image.
• Include any text shown in the image, such as a size chart or “Now 30% off” on a banner.
• Don’t stuff keywords. “Best cheap red dress red summer dress women’s dress sale” is useless when read aloud. Accurate descriptions also serve search engines fine.
• Leave decorative images empty. Background textures, dividers and purely atmospheric photos that add no information don’t need alt text.

Examples

For a long size chart, the better fix is to publish it as a real HTML table in the product description and keep the alt text short.

How to add alt text on Shopify

Product images

1. In your Shopify admin, go to Products and open the product.
2. Click a media item to open the preview.
3. Click Add alt text, type the description, and click Save alt text.

In the Shopify mobile app, open the product, tap the image, tap Information, enter the alt text and save. Source: Shopify Help Center, Adding alt text to media.

AI suggestions: Shopify’s media editor may suggest alt text for images that don’t have any. Treat a suggestion as a draft: check that it’s accurate, mentions the details that matter for buying, and isn’t the same as the other images of the product.

Many products at once: Shopify supports importing alt text in bulk with a product CSV file (the same help page links to the instructions). Export your products, fill in the image alt text column, and re-import. Try it on a copy of a few products first.

Theme images (banners, collections, sections)

1. Go to Online Store → Themes and click Customize (Edit theme).
2. Select the section that contains the image, then click Edit on the image.
3. Enter the alt text and save.

Source: Shopify Help Center, Adding alternative text to your theme images. Themes differ in what they output when the field is empty; some fall back to the product or file name. Check the result with a scan.

How to add alt text on WooCommerce

WooCommerce uses the WordPress Media Library for product images, so alt text is a property of each image file.

When adding a product image

1. Edit the product. In the Product image box in the right sidebar, click Set product image (WooCommerce docs).
2. Select or upload the image. In the attachment details panel on the right, fill in Alternative Text.
3. Do the same for each image when you use Add product gallery images in the Product gallery box.

For images already uploaded

Go to Media → Library, click an image, and fill in the Alternative Text field (WordPress documentation). Changes are saved automatically in the attachment details view.

Watch out: because the alt text belongs to the file, one image reused across several products carries the same alt text everywhere. If the same photo means different things in different places, upload separate copies. The WordPress “Title”, “Caption” and “Description” fields are not alt text.

Variant and swatch images

If picking a color swaps the main image, the new image’s alt text should say the color (“Forest green”) so the change is meaningful. Color swatch buttons themselves need an accessible name, such as “Forest green”, which usually comes from the theme or app code rather than image alt text. A scan can tell you whether swatches have a name; a quick screen reader test tells you whether it’s the right one.

How to check your work

An automated scan finds images with no alt attribute at all and flags them by page. It can’t tell whether “Speckled Ceramic Mug” on all five photos is useful; that part needs a person. A quick manual check: turn on your phone’s screen reader (VoiceOver on iPhone, TalkBack on Android), open a product page, and swipe through the images. If you can picture the product from what you hear, you’re done.

Sources

1. W3C, Understanding SC 1.1.1 Non-text Content (WCAG 2.2); Images tutorial; An alt decision tree; Decorative images.
2. US Department of Justice, Guidance on Web Accessibility and the ADA.
3. Shopify Help Center, Adding alt text to media and Adding alternative text to your theme images.
4. WooCommerce, Adding product images and galleries; WordPress, Media Library screen.