Shopify product images: useful alt text

Describe what this image adds for the customer

An informative photograph on a product page needs a short description of its essential information. Include colour, view or a visible detail that helps someone choose. Do not repeat the entire product description or describe every background object.

Context matters. A nearby product title may not describe a fastening, cut or rear view. A purely decorative image, or one entirely redundant in that context, uses an empty alt attribute: alt="". A missing attribute is not equivalent.

If an image is the only content of a link, its alternative must identify the destination. For an illustrated control, it must explain the action. When an image and an adequate product name share the same link, an empty alternative can avoid unnecessary repetition.

That last rule assumes the image adds no useful information. A separate link nearby does not automatically name the image’s link. Check each placement: product pages, collection cards and galleries can need different treatment.

Adapt these fictional examples

These products and descriptions are invented to explain the method. None comes from a customer or a real scan. Use only confirmed characteristics and details actually visible in your image.

Informative photograph: “Navy shirt, front view”. Detail photograph: “Close-up of the backpack’s zipped side pocket”. These alternatives distinguish views without repeating the price or sales claims.

A link containing only a photograph: “Navy shirt”, if that sufficiently identifies the destination product. An illustrated gallery control: “Enlarge the rear view”. The latter describes an action; it does not replace the large photograph’s description.

Avoid filenames, keyword lists and assumed qualities, such as “waterproof”, without supporting information. “Image of” is usually unnecessary. Shopify recommends 125 characters or fewer and allows up to 512 characters. This length advice is not a WCAG limit.

Save the text in Shopify product media

In the desktop Shopify admin, open Products, then the relevant product. Click its media item to open Preview media. Choose Add alt text, enter your description, then select Save alt text. Close the preview with X.

Repeat this for each informative photograph and each useful variant view. Images added within theme sections have a separate setting. Do not confuse their editor with the product-media editor.

Saving a description does not prove that every placement uses it. For a decorative image, ask your developer to confirm that the final HTML contains alt="". A field left blank may be replaced by a title in the theme.

Check what the theme actually renders

Open the product page and collection on desktop and mobile. In browser developer tools, inspect each image and its alt attribute. Compare the rendered text with the photograph and the information already provided around it.

Shopify exposes the description through image.alt. The Liquid image_tag filter can use media alternative text or a title, depending on the resource. An explicit alt parameter can override it. Your developer should check substitutions and HTML for images rendered in other ways.

Change variants and open detail views. Check that descriptions still match the displayed photographs. Review the accessible names of links and buttons separately: a useful photograph description does not necessarily name its gallery control.

Move through the gallery with Tab and Shift+Tab, then the keys appropriate to each control. Focus must stay visible and actions usable. With a screen reader, listen to descriptions and control names to find repetition or unclear actions.

If your shop offers several languages, check each public version. A translation in this guide does not mean Shopify automatically translates your alternatives. Repeat these checks after a correction or theme update.

Separate automated detection from human judgement

An automated tool can detect a missing alt attribute. It cannot decide on its own whether the description helps a customer in this context. That decision requires seeing the image, reading its surroundings and understanding its role.

Pervia’s Free scan provides a starting list of Issues on public pages it can check. It does not load images or judge the visual relevance of their descriptions. Suggested Fixes remain templates to adapt and test.

A high Score proves neither complete accessibility nor legal compliance. Keep your human review of descriptions and the shopping journey, even after an automated check finds no Issue.