Shopify images best practices: approve what shoppers can understand

A Shopify product image can be sharp, correctly cropped and attached to the right variant while its description still says IMG_2048.jpg. A visual approval alone will miss that failure. Approve the product information, its presentation and the ways a shopper can reach it.

Use these Shopify images best practices as an acceptance checklist: show the correct item, give each view a useful job, preserve it in the theme, check variant selection, and make its information understandable beyond the pixels. The last part requires a different review from choosing a file size.

1. Clear the visible-image checks before reviewing the description

Start with one representative product rather than a folder of exports. Confirm the exact color, construction and included contents against the approved product reference. Put the identity view first when that helps shoppers recognize the item; make the other views answer distinct questions instead of repeating the same angle.

Then open its collection card, product page and enlarged view on desktop and mobile. Check that the crop preserves important features, detail remains inspectable, and neighboring products use a deliberate framing system. The Shopify product picture size guide covers source dimensions, compression and responsive delivery. A nominal pixel width cannot certify the rendered result.

Select another color, change size and switch back. The identifying image and remaining views should follow the intended gallery policy. Use the Shopify variant images guide to separate saved assignments from theme behavior. Do not rewrite an image description to disguise a wrong image.

Keep these checks separate from the next question: what information does this particular use of the image communicate? A front view, an open interior and a linked collection card can require different wording even when they belong to one product.

Choose the alternative from this use of the image. A shared media field and a linked component are not interchangeable contexts.

2. Describe the useful difference between views

For an informative product image, write the information the view contributes. “Green canvas pouch, open to show a pale lining and internal pocket” is more useful than repeating “green pouch” beneath every angle. Include only details actually visible or verified; do not infer waterproofing, capacity or material composition from appearance.

Shopify's media editor guidance says to keep alt text brief and descriptive. It may suggest AI-generated text for images without a description. Review that suggestion against the actual frame and its purpose before saving it. Acceptance of a suggestion is an editing decision, not verification of product facts.

In the media editor, open the image, use the Alt text field in Edit information, then save. Images placed in other contexts can have different editing routes. Check the actual rendered image afterward rather than assuming that changing one field has corrected every use.

A local browser example makes the distinction visible. We loaded one generated fictional pouch image twice, changing only its alt value. Chromium's accessibility tree exposed the image name as IMG_2048.jpg in the first state and “Green canvas pouch with black zipper and pale lining” in the second. The image bytes were identical.

We then intentionally pointed each state at an unavailable file. The captures below show that browser's resulting fallback, not a Shopify theme. The description communicates something about the pouch; the filename communicates a production identifier.

Actual controlled local Chromium captures with the image intentionally unavailable. The same fictional input was used before failure; only alt changed between states. This is not Shopify UI, a screen-reader test or conformance evidence.

This controlled example demonstrates the browser's response to the supplied text. It is not a screen-reader user test, proof of every browser's fallback behavior, or a Shopify accessibility certification. An accurate alternative also does not make a broken image acceptable. Restore the image and retain the useful description.

3. Check the link or button, not only the image field

An image that acts as a link has a second job. A shopper needs to know where it goes. W3C's functional-image guidance distinguishes that purpose from a purely visual description.

For a product card whose image is the only content of the link, the link needs an understandable destination, such as the product name. If the same link also contains a sufficient visible product title, repeating that title through the image can be redundant. Inspect the complete component before choosing the alternative.

This is not an instruction to blank the Shopify product image's alt field everywhere. That asset may also appear as an informative detail image. Ask the theme implementer to handle the component's context while preserving the description needed in the gallery. A global content edit is the wrong repair for a local presentation problem.

W3C's decorative-image tutorial uses an intentionally empty alternative when an image adds no information beyond the surrounding content. Empty alt and a missing alt attribute are different. “Decorative” means the information is unnecessary or already adequately supplied, not that the photograph looks attractive.

Conceptual illustration: a separately generated pouch interior, not a second documented view of the hero. Describe visible details without inventing performance claims.

For a gallery thumbnail that opens a larger view, review the control's accessible name and action together. Can someone identify the interior view and open it without guessing from a position alone? Keep the distinction between the thumbnail control and the informative image it reveals.

4. Keep essential facts available as text

A feature label baked into a photograph is still image content. If a diagram contains dimensions, assembly instructions or included quantities, provide that information in readable page text as well. A short alt description can identify the diagram; it need not become a crowded transcript of a complex specification.

W3C's image guidance separates simple informative images from text-heavy and complex graphics. Use that distinction when briefing production. “Interior view showing one pocket” is a short description. A sizing diagram with several measurements needs a complete text equivalent that customers can find.

Check whether the gallery's controls can be reached and operated with a keyboard, with visible focus. Open the detail view, move through its controls and close it; note where focus goes afterward. These are proposed checks for your implementation, not results from a store tested here. Shopify's theme accessibility guidance calls for visible focus on interactive elements and cautions that following its guidance alone does not guarantee full accessibility.

Proposed repair routing for the actual page; not a completed store audit.

5. Hand over a product page that passes the whole route

Run one final route: collection card, product page, selected option, informative detail and return to the buying controls. Read the descriptions in context, inspect the visual result and record any failed interaction separately. Repeat on the actual intended theme after a media replacement or component change.

When commissioning photography, brief the product views and the information each must reveal. The Amazon photography service guide can help frame supplier deliverables for a multi-channel shoot; give that supplier the Shopify presentation and description requirements separately. A marketplace package does not specify your theme's controls.

Look Atlas can create generated studio, lifestyle and campaign imagery from product photographs. Review those outputs against the product references, then describe the approved visible content. Do not let a generated scene or generated description silently introduce a new product claim.

Approve one representative product through the complete route before applying the process across its family. The finish line is not a folder of attractive files. It is a product whose images remain accurate, understandable and reachable in their actual page contexts.