Reviewed by Misha Gavura, founder of Inclusely. Last reviewed . Written by the Inclusely team at EVDEV, Toronto.
The short answer
For a product photo, go to Products, open the product, click the photo, then click Add alt text. Theme banners get their alt text in the theme editor, and any other image under Content > Files. To change many at once, export your products as a CSV, fill in the Image Alt Text column and import it again.
Alt text is a short description of an image for people who cannot see it. For what to write, see our alt text examples for product images. This page is about where to put it.
Where to edit alt text in Shopify, by image type
Shopify does not keep all images in one place. Each kind has its own screen, and a few have none. This is the map we use when we go through a store.
How to add alt text to a product photo
Open the product
In your Shopify admin, go to Products and click the product name.Open the photo
In the Media box, click the photo or video. The Preview media page opens.Add the text
Click Add alt text, type one plain sentence about what this photo shows, then click Save alt text.Do the next photo
Click the X to close the preview, then open the next photo in the gallery and repeat.
On the Shopify mobile app, open the product, tap a photo, tap Information, type the alt text, then tap Save.
Write different text for each photo in the gallery. A screen reader user who hears “Linen shirt” six times learns nothing. Say what each photo adds: the back, the fabric, the fit on a model.
Variant images, such as the green version of a shirt, are photos from the same gallery. When you add alt text to the green photo, mention the colour, because that is what the shopper picked.
How to add alt text to a collection image
Go to Products > Collections and open the collection. Click the collection image, or the menu on it, and choose the option to edit its alt text. Save the collection.
Collection images often show up on your home page and in menus too, so this one field can appear in several places. Some themes do not output it at all. If you saved alt text but the live page still has none, see when the theme ignores your alt text.
How to add alt text to banners and theme images
Hero banners, slideshows, image with text sections and logo lists are set in the theme editor, not on a product.
- Go to Online Store > Themes and click Edit theme (or Customize) on your theme.
- In the sidebar, select the section that holds the image.
- Click Edit on the image, type the alt text in the dialog and click Save.
- Click Save at the top of the theme editor.
Some sections have a separate image for phones. That is a second file, so it needs its own alt text. And if a banner already has its heading and button as real text on top, the photo behind it is decoration: leave its alt text empty so screen readers do not read the sale twice.
Using the Files page to find images with no alt text
Content > Files lists the images uploaded to your store, which usually includes product photos and theme images. Shopify notes that some files uploaded straight to a product might not appear there, so check your products too. Two things make Files a good place to start a clean-up:
- You can filter by alt text. Use the Alt text filter to list only the files that have none.
- Edits apply everywhere. Shopify says changes made on the Files page apply to all places the file is used. Fix a banner once and it is fixed on every page that uses it.
Click a file, click Add alt text, type the text and save. The catch: in Files you see the picture without its context, so you cannot always tell whether it is a product, a banner or a decoration. Open the page where it appears when you are not sure.
How to bulk edit alt text in Shopify
A store with 300 products and five photos each has 1,500 images. One at a time is not realistic. These are your options.
For developers: the GraphQL fileUpdate mutation sets the alt field on product media and other files, individually or in batches. It needs the write_files or write_themes access scope.
mutation SetAltText {
fileUpdate(files: [
{
id: "gid://shopify/MediaImage/1072273831"
alt: "Back of the linen shirt, showing a box pleat below the collar"
}
]) {
files { id alt }
userErrors { field message }
}
}Bulk edit alt text with a product CSV
This is free and built into Shopify. Shopify's product CSV has an Image Alt Text column, with a maximum of 512 characters and a recommended length of 125 or fewer.
Export a backup first
Go to Products, click Export, choose All products and CSV file for Excel, Numbers, or another spreadsheet program, then click Export products. Keep this file untouched as your backup.Make a working copy
Open a copy of the export in a spreadsheet. Each image is on its own row, with the product handle in the first column and the image address in Image Src.Fill in Image Alt Text
Type the alt text for each image row in the Image Alt Text column. Keep it under 125 characters. Leave every other column as it was.Test with two or three products
Delete every row except those products, save as CSV (UTF-8) and import it. Check the alt text in the admin and on the live product page, and check that no photos were added twice.Import the rest
Go to Products, click Import, click Add file and choose your file. Select Overwrite products with matching handles, click Upload and continue, review the details, then click Import products.
Blank cells can erase data
Suggested alt text: what to check before you accept it
Shopify's media editor might suggest alt text for images that have none, and apps can suggest it for a whole catalogue. Accepting a suggestion saves it to the file. That saves typing, but read each one first. A tool can see a shirt. It does not know that the photo exists to show the pocket, or that the model is wearing size M.
- Fix wrong colours and materials. Use the names from your product options.
- Remove “image of” and lists of keywords.
- Clear it for decorative images instead of describing them.
- Repeat any words that are baked into the image, such as a sale code on a banner.
How Inclusely handles this
When the theme ignores your alt text
The admin stores the alt text. Your theme decides what goes into the page. Most current themes use Shopify's image_tag filter, which uses the image's alt text and, for product, collection and article images, falls back to the title when there is none. (For the difference between alt text, captions and title attributes, see what alt text is.) That has two side effects:
- A blank field does not always mean empty alt text. The shopper may hear the product title instead.
- Some older or customised themes write
alt=""straight into the code, so whatever you type in the admin never reaches the page.
If you saved alt text and the live page does not show it, the fix is in the theme code. A developer can change it like this, on a duplicate of the theme first:
{%- comment -%} Before: the theme throws your alt text away {%- endcomment -%}
<img src="{{ collection.image | image_url: width: 1200 }}" alt="">
{%- comment -%} After: use the alt text saved in the admin {%- endcomment -%}
{{ collection.image | image_url: width: 1200 | image_tag: alt: collection.image.alt }}
{%- comment -%} A purely decorative background: empty on purpose {%- endcomment -%}
{{ section.settings.texture | image_url: width: 1600 | image_tag: alt: '' }}Before you pay for code edits, check whether a newer version of your theme already fixes it. Our tests of accessible Shopify themes list what we found in each free theme.
French alt text for Quebec shoppers
If you sell in French, your alt text needs a French version too. Shopify treats image alt text as translatable content, so you can add it in the Translate & Adapt app (or another translation app) after you add French under Settings > Languages. If there is no translation, the store shows your default language, and a shopper using a French screen reader may hear English words read with a French voice.
Automatic translation is a fine first draft for alt text. Have someone fluent read the product photos you sell most. For Quebec's rules, see Canadian accessibility laws.
How to check the alt text shoppers actually get
The admin shows what you saved. Only the live page shows what a screen reader reads. Check both.
- Paste a product page address into the free alt text checker. It lists every image with its alt text and flags missing, vague and overlong text.
- Or, in Chrome, right-click a photo, choose Inspect and look for
alt=in the highlighted line. - Check a product, a collection, the home page and any page with a banner. Themes treat each one differently.
- Turn on VoiceOver (Mac and iPhone) or NVDA (free for Windows) and listen to one product page from top to bottom.
Alt text is one item on a longer list. The Shopify ADA compliance guide covers the rest, and the WCAG rule behind alt text, 1.1.1 Non-text content, is explained in WCAG 2.2 AA in plain words.
Questions about alt text in Shopify
How do I add alt text to images in Shopify?
For a product photo, go to Products, open the product, click the photo, then click Add alt text and save. For banners and other theme images, go to Online Store > Themes, click Edit theme, select the section, click Edit on the image and add the text. For any other image, go to Content > Files.
Can you bulk edit alt text in Shopify?
Yes, in three ways. Export your products as a CSV, fill in the Image Alt Text column and import it again. Or use an alt text app from the Shopify App Store. Or, if you have a developer, use the Admin API fileUpdate mutation, which can update many images in one call.
Does Shopify add alt text automatically?
Not on its own. Shopify's media editor might suggest alt text for images that have none, and accepting a suggestion saves it to the file. Some themes also fill a blank alt with the product title, which is better than nothing but repeats the same words on every photo.
Where is alt text in the Shopify theme editor?
Select the section that holds the image in the theme editor sidebar, then click Edit on the image. A dialog opens where you can type the alt text. Save the dialog, then save the theme.
How long should alt text be in Shopify?
Shopify allows up to 512 characters and recommends 125 or fewer. One plain sentence is usually right. If you need more, the detail probably belongs in the product description.
Does alt text help Shopify SEO?
It helps Google understand your images, which matters for Google Images and product searches. Google also warns against stuffing alt text with keywords. Write it for shoppers who cannot see the photo, and the useful words will already be there.
Is there a Shopify app for alt text?
Yes, several apps in the Shopify App Store suggest or bulk edit alt text. Before you install one, check that you can review each suggestion before it is saved, what it does to alt text you already wrote, and how its pricing works.