Guide · Shopify
How to add alt text in Shopify (products, collections, theme images)
Updated
Short answer: alt text is a short written description of an image. Shopify shows it when an image fails to load, and screen readers read it aloud to people who can't see the image (Shopify Help Center, Adding alt text to media). You add it in three places: on each product's media in the Shopify admin, on collection images in the collection page, and on other theme images in the theme editor. Steps for each are below, taken from Shopify's own help pages.
Want us to check your store? Send your store link to [help@vibe-fixer.com](mailto:help@vibe-fixer.com) and we'll send your free accessibility report within one business day. It is an automated, read-only check of your store's public homepage, not a full audit with a person testing by keyboard and screen reader. It tests only what software can test of WCAG 2.0 and 2.1, Levels A and AA. It doesn't test the newer WCAG 2.2 criteria, such as target size. It finds some issues, not all of them. The report is not legal advice.
Product images
Shopify's steps (Adding alt text to media):
- In your Shopify admin, open Products.
- Click the product you want to edit.
- On the product details page, click a media item to open the Preview media page.
- Click Add alt text.
- Enter your alt text, then click Save alt text.
- Click the X to close the preview page.
Repeat for each image. Shopify's page says you can also upload alt text in a CSV file. The limit is 512 characters, and Shopify says to aim for 125 or fewer. Its media editor may suggest alt text for images that lack it, and accepting a suggestion saves it to the file.
Collection images
Shopify's SEO help page says (Shopify, Adding keywords):
- Click the name of the collection that you want to edit.
- Under the image, click Update, and then click Edit image.
- Enter descriptive alternate text for the image.
- Click Save.
Shopify's separate page on changing a collection image does not list an alt text step, so if your admin looks different from these labels, follow what you see on screen.
Other theme images (banners, slideshows, image with text)
Shopify's steps (Adding alternative text to your theme images):
- From the Shopify admin, open Online Store.
- Find the theme you want to edit and select Edit theme.
- In the theme editor sidebar, select the section that contains the image.
- On the image, select Edit.
- In the dialog, type the alt text and select Save.
- Select Save again to keep your changes.
Shopify's main theme accessibility page says product image alt text is added from the Shopify admin and other theme image alt text from the theme editor (Accessibility for themes).
What good alt text says
Shopify's advice: "pretend that you're describing the image to someone who has their eyes closed," and fit the description to the page's context (Accessibility for themes).
The W3C adds, by type of image (W3C WAI, Images tutorial):
- Informative image (most product photos): "at least a short description conveying the essential information presented by the image."
- Decorative image: "Provide a null text alternative (
alt="") when the only purpose of an image is to add visual decoration to the page." - Image used as a link or button: describe what it does, not how it looks.
- Text inside an image: if it isn't a logo, avoid text in images. If you do use it, the alt text should carry the same words.
The U.S. Department of Justice says, for alt text: "To be useful, the text should be short and descriptive" (ADA.gov web guidance).
Examples for a store (ours, following the advice above): "Navy cotton hoodie, front view, hood down" is better than "IMG_4021" or "hoodie hoodie hoodie buy now."
Shopify's SEO page says to use keywords from the page where the image is displayed, and to write readable phrases that describe what the image shows. Use real description first.
Check the result
After saving, open the page on your store and look at the page's source (in most browsers: right-click, then View page source) to see that the image has the alt text you entered. If it doesn't, your theme may not be using it, and the theme code needs a look.
FAQ
Do all images need alt text?
Every image needs a decision. Informative images get a description. Purely decorative ones get an empty alt (alt=""), per the W3C.
How long should alt text be?
Shopify says aim for 125 characters or fewer, with a 512-character limit (Shopify Help Center).
Can a tool write all my alt text?
Shopify's media editor can suggest alt text, and accepting it saves it. Read each suggestion first. A tool can see that alt text is missing, not whether it is right. The W3C says: "Tools cannot check all accessibility aspects automatically. Human judgement is required" (W3C).
Can VibeFix fix it for me?
Yes, if you ask. The free check confirms the problem first. Our AI agent can find the cause, fix it in your code and test your live app again. The price is on the pricing page.
How VibeFix works on a store
Once you choose to go ahead and connect your store, our AI agent works through the issues in your report on an unpublished copy of your theme. We review each change before you preview it, and you publish it yourself. Nothing goes live until you do. The report lists anything still open. How it works for Shopify stores
Want us to check your store?
Send your store link to [help@vibe-fixer.com](mailto:help@vibe-fixer.com) and we'll send your free accessibility report within one business day. It is an automated, read-only check of your store's public homepage, not a full audit with a person testing by keyboard and screen reader: we don't sign in, submit anything or change anything. It tests only what software can test of WCAG 2.0 and 2.1, Levels A and AA. It doesn't test the newer WCAG 2.2 criteria, such as target size. It finds some accessibility issues, not all of them. The report is not legal advice.
Related: Shopify accessibility audit: what it checks and what it can't
This page is general information, not legal advice. VibeFix is independent and is not affiliated with any company named here. Shopify is a trademark of Shopify Inc. Other names are trademarks of their owners.
Want it fixed?
Our AI agent fixes it in your code and tests your live app again. See pricing.
It starts with a free check that confirms the problem on your live app, no account needed.