Alt text on Shopify: what to write for your product photos

What to write for a product photo

W3C’s tutorial asks for “at least a short description conveying the essential information presented by the image.” Its page on informative images has a photo of a dog wearing a bell, beside text on why guide dogs wear one. The photo’s alt text is “Dog with a bell attached to its collar.” The text already says why. The alt text says what you’d see.

Our rule for a product photo: say what it shows that the words beside it don’t. Here’s alt text for the first photo of the Fold Hoodie, from our test store:

Fold Hoodie in Pine, a dark green, from the front: hood, two drawstrings, front pocket, ribbed cuffs and hem.

Put the color in plain words beside its name. A color name like Pine or Dusk doesn’t tell a shopper who can’t see the photo what color it is. Say the view, too: front, back or close-up. Leave out what the product’s text already says, like how soft it is inside.

Don’t paste in the file name or placeholder text. The page that explains the picture rule counts those as failures, text alternatives “that are not alternatives”. In our view, the product’s name alone falls short too. It doesn’t say what the photo shows.

How long? Shopify’s page on adding alt text says “Keep your alt text brief and descriptive.” It allows 512 characters but recommends 125 or less. That’s about one sentence.

Where it goes in Shopify

On a computer, Shopify’s Help Center gives these steps:

1. In your Shopify admin, go to Products.
2. Click the product’s name.
3. Click a photo to open its preview.
4. Click “Add alt text”.
5. Type your alt text and click “Save alt text”.
6. Close the preview with the X.

Shopify’s media editor “might suggest alt text” for photos that have none. You can take it, change it or write your own. Shopify saves a suggestion as soon as you accept it, so first check the words match the photo.

Lots of photos? Shopify’s product CSV, a spreadsheet file you can upload, has an “Image alt text” column.

A picture you added in the theme editor, like a banner, gets its alt text there. Go to Online Store and click Edit theme. Find the section with the picture, click Edit on the picture, then type your alt text and save.

What a shopper hears when a photo has no alt text

Your theme still decides what a screen reader says for each photo. Whatever it writes is what a shopper hears. If your theme fills the gap for you, a product page can sound like this:

• In the gallery, every photo gets empty alt text. That tells a screen reader the photo is decoration. So the screen reader skips every one.
• In the zoom view, every photo is named after the product. The shopper hears “Fold Hoodie”, then “Fold Hoodie” again, and never the color or the view.
• On the cards for other products, like “You may also like”, each photo is named after its product.

A page checker, software that tests a page for problems, may not flag any of this. We think that’s because, to a checker, empty alt text looks just like a picture marked as decoration.

Your Shopify admin shows the alt text you’ve saved for each photo, whatever the page says. That’s where you’ll see which photos have none.

Your alt text doesn’t follow the photo everywhere

Your theme can use the alt text you saved for each photo. But the same photo can turn up somewhere else. Say a reviews app shows it again in its write-a-review window. That app doesn’t have to use your words. It can name the photo after the product instead.

So your alt text only shows up where the theme or the app chooses to use it. From your store, you can’t tell where other words for a photo come from. Whoever makes the theme or app can tell you.