How to Add Alt Text in Shopify (WCAG 2.2)

Applies to: SC 1.1.1 Non-text Content, Level A · Shopify admin (desktop and the Shopify app), product media, Content › Files, the theme editor and the rich text editor

Missing alt text was found on 53.1% of home pages in the WebAIM Million 2026 (detected with WebAIM's WAVE tool). 45% of images missing alt text were linked images, which leaves those links without a name (WebAIM).

This is the Shopify deep dive. For what good alt text says in the first place, start with the main guide, How to fix missing alt text, or the W3C alt decision tree. On WordPress instead? See How to add alt text in WordPress.

Where alt text lives in a Shopify store

A typical store's images come from several different places, and each has its own alt text field. Fixing your products doesn't touch the rest:

A useful starting point is Content › Files: Shopify's Files page lets you filter the file list by alt text and by where a file is used (Files help), which can help you find images that still need alt text. A filter only tells you whether the field is filled in, not whether what's in it is right.

Product media

For one product at a time, Shopify's steps are (Shopify Help: Adding alt text to media):

1. In your Shopify admin, go to Products and click the product.
2. Click the image to open the Preview media page, then click Add alt text.
3. Enter the alt text, click Save alt text, then close the preview (X).

In the Shopify app on a phone, open the product, tap the image, then Information, enter the alt text and save.

Shopify says alt text is used by assistive technology and shown if the image can't load. Its limit is 512 characters, and it recommends 125 or fewer. Shorter is usually better for screen reader users too: say what the photo shows that matters to a shopper, then stop.

Variant and gallery photos

Most products have several photos, and each one is a separate image with its own alt text. Repeating the product title on every image gives a screen reader user five identical announcements and no reason to look at any of them. Describe what's different about each photo:

• alt="Linen shirt in sage green, front view"
• alt="Linen shirt in sage green, close-up of coconut-shell buttons"
• alt="Linen shirt in navy, worn with sleeves rolled"

If a photo is attached to a variant (a colour or size), the colour should be in that photo's alt, because that's often how a shopper confirms they've picked the right one. Variant photos are still product media, so you set their alt text the same way as the other photos. After any bulk change, open a product with variants on the storefront and check that switching colour shows the right photo with the right alt.

Bulk: the product CSV

If you have hundreds of products, Shopify's product CSV has an Image alt text column (Shopify's product CSV help describes it as text that "describes the image and the product that it represents"; same 512-character limit, 125 or fewer recommended) (CSV help). The general approach:

1. Export your products to CSV.
2. Fill in the Image alt text column for each image row. Each product image is its own row, so a product with four photos needs four alt values.
3. Import the file, with the option to overwrite products with matching handles selected so existing products are updated.

Take care with step 3. Shopify's CSV help says that when you overwrite, a blank non-required column in your file overwrites the existing value as blank. Keep an untouched copy of the original export, only change the alt text column, and test the import on a handful of products before running the full catalogue.

A CSV makes it fast to fill hundreds of fields, and just as fast to fill them with the same useless text. A formula that pastes the product title into every row will clear an "alt text missing" check and still tell a shopper nothing. Use the bulk pass for the boring part and write the descriptions properly.

The column header in your export may be labelled slightly differently depending on when your store's CSV template was generated. Match whatever your own export uses.

The media editor's AI alt text suggestions

Shopify's media editor can suggest alt text for images that don't have any. Shopify says the suggestions "are generated using AI to help describe your image content", and that you can accept, edit or replace them (media editor help). The add-alt-text Help page notes that accepting a suggestion saves it to the file.

Treat every suggestion as a first draft that a person needs to read:

• It may describe the wrong thing (the model, not the product; the background, not the detail that matters).
• It may not know what a shopper needs to tell two near-identical variants apart.
• It tends to describe appearance, so on a linked image (a collection tile, a banner) it can give the wrong kind of text entirely.
• Once accepted, it looks the same as alt text a person wrote, so an unchecked suggestion is easy to forget.

Accept a suggestion only after you've checked it's accurate for that image and its purpose on the page.

You can open the media editor on product media, media in the online store editor, Shopify Messaging email media and Content › Files: in the Edit information section, use the Alt text field and click Save. Shopify notes that you can't use the media editor on images in the rich text editor (see below).

Theme images: homepage, collections, banners and logo

Theme sections that show an image (slideshows, image banners, image with text, collection tiles, the header logo) often use an image picker setting. Shopify's theme developer docs describe this setting as one where merchants "have an opportunity to enter alt text" for the image they choose, for things like "logos, favicons, and slideshow images" (shopify.dev: image_picker). Images in the picker come from Content › Files.

So for homepage and collection-page images, open the theme editor, select the section or block, and look for the alt text option on its image. Where exactly it appears depends on your theme, and some older or custom themes may not output it. Check the front end.

Collection images can also appear as tiles on your homepage or in a collection list. Depending on your theme, those tiles may use the collection image's alt text, the collection title, or both. Check what a screen reader actually hears for each tile.

Linked images: logo and tiles

Many theme images are links: the logo goes to the homepage, a collection tile goes to that collection, a banner goes to a sale. For these, the alt text should describe the destination or action, not the picture:

• Header logo: alt="Acme home" or simply the store name, not alt="Blue circle logo".
• Collection tile: alt="Summer dresses", not alt="Woman in a field".
• Banner with text baked into the image: the alt should include that text, e.g. alt="Winter sale: 30% off outerwear".

If the tile already has a visible text link with the same name right next to it, ask your theme developer whether the image and text can be one link, so keyboard and screen reader users don't hit the same destination twice.

Decorative storefront images

Not every image is a product. Dividers, background textures, a hero photo that only sets a mood behind a heading: these add no information, and should have an empty alt (alt="") so screen readers skip them.

The Shopify Help steps we checked don't mention a separate "decorative" switch, and what a theme outputs when the field is blank depends on the theme: it might output alt="", fall back to other text such as the product title, or leave the attribute out. If an image is decorative, check the page HTML to see what your theme actually does. If an informative image has a blank field and your theme outputs alt="", an automated scanner will usually treat it as decorative and not flag it, so don't rely on a clean scan alone.

Decorative means no information, not less important. Product photos are never decorative: they're the reason the page exists.

Images in descriptions, blog posts and pages

The rich text editor (used for product and collection descriptions, blog posts and pages) has its own image settings. Shopify's media editor can't edit these images, so set or check alt text in the rich text editor itself. Shopify's rich text editor help says to double-click the image to open the Edit image dialog, where you can "add or edit image alt text", then click Edit image to save (rich text editor help).

• Shopify's Files help says edits made on the Files page apply everywhere the file is used. An image inserted into a description, though, carries its own alt in that description's HTML, so after changing a file's alt text in Content › Files, check each description that uses it.
• If you're unsure what's there, the rich text editor's Show HTML button lets you look at the <img> tag and its alt attribute directly.
• Older descriptions pasted from another site or a supplier's feed can bring along images with filenames or no alt at all. They're worth a specific pass.

Apps, page builders and sliders

Review apps, page builders, upsell widgets and slider apps can insert their own images into your storefront. Some read the alt text you set in Shopify, some have their own field, and some output none. For each one:

• Check whether the app's image settings include alt text, and whether it uses the alt text from your product media or Files.
• Customer review photos and user-uploaded images usually aren't yours to describe in advance. Check what the app outputs for them.
• Images set as CSS backgrounds have no alt text at all. That's fine only if they're decorative.

Menu names can change between platform versions (steps checked November 2026). If a path doesn't match, check your platform's current help pages. App and page builder menus vary, so check each app's own docs.

Shopify is a trademark of its respective owner. Glimscope is not affiliated with or endorsed by Shopify.

What automated tools can and can't tell you: Automated checkers (including axe-core, which our monitor uses) can flag many instances of this issue, but they cannot judge everything. A human still has to check meaning and context. For scale: Deque reports that in its own sample of first-time audits, its automated tests found 57.38% of issues by volume (Deque report). That is Deque's figure for its sample, not a detection rate for any one tool, and it means a large share of issues still needs manual testing. A scanner can tell that an alt attribute is missing. It cannot tell whether existing alt text is accurate, whether every variant photo says the same thing, or whether an accepted AI suggestion is right. Automated tests find only some accessibility issues; manual testing is still required. Not legal advice. More on this: What automated accessibility testing can and can't catch.

Manual checklist

• Every product photo has alt text, and gallery and variant photos each describe what's different (colour, angle, detail), not just the product title
• Any CSV bulk import was spot-checked on the storefront, with no formula-filled or duplicate alt text
• AI alt text suggestions were read and corrected by a person before being accepted
• Informative homepage, collection, banner and slideshow images have alt text set in the theme editor (where the theme offers it), and decorative ones were checked on the front end
• Linked images (logo, collection tiles, banners) describe the destination, and text baked into banners is in the alt
• Decorative images output alt="", and nothing informative is left blank
• Images inside descriptions, blog posts and pages were checked in the rich text editor
• App, review and page builder images checked on the front end