Write alt text for the information a shopper would miss without the product image. Name the item when needed, then describe the feature, view or action that makes this particular picture useful. A keyword list or a product title repeated across every gallery image usually misses that distinction.
These 31 alt text examples cover common Shopify product-image situations, from a main product view to a size chart or a used item’s condition. The products and image briefs are fictional. Adapt each description to your actual photograph and verified product facts; do not assume a material, measurement or benefit simply because it sounds plausible.
The examples describe informative product images. Decorative backgrounds and image-only controls need a separate decision about their purpose.
Write for the image’s purpose, then keep it concise
Start with what the picture contributes to the product page. W3C’s informative-image guidance focuses on conveying that meaning, rather than describing every visible object.
| Image role | What the text needs to do |
|---|---|
| Main product image | Identify the item and defining visible attributes |
| Detail or alternate view | Explain the information that this view adds |
| Chart or diagram | Summarize it and provide the full information in accessible page text |
| Pure decoration or redundant visual | Consider an empty alternative according to context |
| Image-only link or button | Communicate the destination or action |
Use the W3C decision tree when the role is unclear. An empty alt="" and a missing attribute are different implementations.
Shopify’s current media instructions allow up to 512 characters and recommend 125 or fewer. That recommendation is a useful editing target, not a universal HTML limit or a reason to omit essential information.
Use ordinary product language and relevant details. Google’s image guidance recommends useful contextual descriptions and warns against keyword stuffing. Alt text is not a place for shipping offers, unproven benefits or a string of search terms.
Single-product views and variants
These examples distinguish pictures that establish identity from pictures that clarify a variation. Include the facts that matter in the image’s current context.
1. The main product silhouette
The main photograph shows a cream teapot with a rounded body, curved spout and a lid.
Alt text: “Cream teapot with a rounded body, curved spout and matching lid”
This gives the shopper an overall shape and color. “Teapot” alone loses the design information.
2. A design on the back
A second photograph shows a jacket’s back, where a large embroidered sun appears between the shoulders.
Alt text: “Back of the black jacket with a large gold sun embroidered between the shoulders”
Describe the rear design rather than repeating the front-view description. Keep the embroidery detail only if that construction is confirmed.
3. A named color variant
The selected variant is called Harbor, and the photograph shows a dark blue backpack.
Alt text: “Harbor dark blue backpack with a roll-top opening and black straps”
The catalog name helps identify the variant; plain color language makes an unfamiliar name understandable. Check the selected variant and image still agree.
4. Pattern placement
The photograph shows a cushion with narrow vertical stripes on one half and a plain panel on the other.
Alt text: “Cushion with narrow rust-colored stripes on the left and a plain cream panel on the right”
Pattern placement distinguishes this design from a generic striped cushion. Avoid claiming the unseen reverse has the same pattern.
5. A transparent construction
An empty clear organizer is photographed so its three internal compartments can be seen.
Alt text: “Clear organizer with three visible compartments and an open top”
The visible compartments explain the organization. “Clear” describes appearance; it does not establish the material or food-safety properties.
6. An asymmetric pair
The photograph shows two earrings: a small circle for one ear and a longer bar for the other.
Alt text: “Asymmetric earrings: one small gold-tone circle and one longer vertical bar”
Here, the important relationship is the mismatched design. This is different from merely stating that two earrings appear in the photograph.
Construction and working details
A detail image earns its place by revealing something the main view does not. Describe that feature without turning its appearance into a performance claim.
7. Fabric weave
A close-up reveals a scarf’s loose, open weave and short fringe.
Alt text: “Close-up of the scarf’s open weave and short fringe along the edge”
This communicates the visible structure. It does not establish fiber content, softness or warmth.
8. Stitching and seams
A close-up shows two parallel rows of contrasting stitching around a tote’s handle attachment.
Alt text: “Two rows of white stitching around the tan tote’s handle attachment”
The seam detail matters here. Calling the handle “reinforced” or promising a carrying capacity would require separate evidence.
9. A closure
The photograph shows a pouch’s zipper open, including the pull and the teeth.
Alt text: “Open zipper on the green pouch, showing the silver pull and zipper teeth”
Describe the closure that is shown. Do not infer that it is waterproof or lockable.
10. Interior organization
An overhead view shows an open work bag with a central divider and two smaller pockets.
Alt text: “Open work bag with a central divider and two smaller interior pockets”
This answers an organization question. It does not confirm that a particular laptop fits unless the product information and measurements support that claim.
11. Ports and connectors
A rear view of a fictional speaker clearly shows a USB-C port and a socket labeled AUX.
Alt text: “Rear of the speaker with a USB-C port and an AUX-labeled socket”
Names should match verified connectors and readable labels. Their appearance alone does not prove charging speed or compatibility.
12. An adjustable mechanism
Two views show the same lamp head tilted upward and downward at its hinge.
Alt text: “Lamp head shown tilted up and down at the hinge above the straight stand”
The description explains the demonstrated movement. It does not invent an adjustment range or claim that the mechanism holds every position.
Size, fit and product use
A ruler, a hand and a room provide different kinds of evidence. Keep an actual measurement separate from a visual sense of scale.
13. Clothing worn on a person
The photograph shows a cardigan worn open, with sleeves extending to the wrists and the hem at the hips.
Alt text: “Cardigan worn open, with sleeves reaching the wrists and the hem at the hips”
Describe the visible fit in this photograph. Do not guess the person’s size, height or measurements.
14. An object held in a hand
A small ceramic cup is held between a thumb and fingers.
Alt text: “Small speckled cup held between a thumb and fingers to show its scale”
The hand offers relative scale. It cannot justify an exact capacity or height.
15. A visible measurement
A photograph shows a measuring tape aligned across a tray, from zero to the 24 cm mark.
Alt text: “Measuring tape showing the tray is 24 cm wide”
The number is appropriate because the fictional image explicitly supplies it. Verify the real tape alignment, dimension and unit before using a measured description.
16. Furniture in a room
The photograph places a low side table next to a sofa, with the tabletop below the sofa’s arm.
Alt text: “Low side table beside a sofa, with the tabletop below the sofa arm”
That relationship helps explain proportion. It does not mean the table fits every sofa or room.
17. Labeled size options
Two pump bottles are pictured side by side, with readable labels of 60 mL and 120 mL.
Alt text: “Two pump bottles labeled 60 mL and 120 mL, shown side by side”
Here, the size information comes from the labels. Do not estimate volumes from bottle proportions.
18. The product in use
A pitcher is pictured pouring a narrow stream into a glass.
Alt text: “Pitcher pouring a narrow stream into a drinking glass”
The action is the useful information. It does not prove a spill-free design, a particular pouring speed or a test result.
Sets, packaging and included parts
A photograph can show more than the customer will receive. Describe what is visible, and make the actual contents of the offer clear in the product page text.
19. A mixed-product bundle
A fictional gift bundle includes a notebook, a pen and a fabric sleeve, all shown together.
Alt text: “Gift bundle with a notebook, a black pen and a fabric sleeve arranged side by side”
Use “bundle” when those items really belong to the offer. A styling prop should not silently become an included product.
20. A multipack of identical items
Six identical tea towels are arranged in two rows of three.
Alt text: “Six checked tea towels arranged in two rows of three”
The count helps distinguish the multipack. Confirm that the quantity shown agrees with the quantity sold.
21. Packaging beside the item
An unpacked mug stands beside its printed retail box.
Alt text: “Blue mug beside its retail box, with the lid of the box open”
This describes the packaging view without suggesting that the box is a second product. Mention gift packaging only if that description is accurate.
22. A replacement part
The photograph shows a replacement filter cartridge with a readable HX-2 model marking.
Alt text: “Replacement filter cartridge with HX-2 printed on its side”
The marking identifies the shown part. Explain compatible products separately using verified compatibility information, rather than guessing from the cartridge’s shape.
23. An unassembled kit
A small shelf kit is laid out as two brackets, one board and a bag of screws.
Alt text: “Unassembled shelf kit with one board, two brackets and a bag of screws”
The point is the supplied assembly components, rather than a finished shelf. Check that these are genuinely included and identify any required tools in accessible product text.
Labels, instructions and digital previews
Some images carry text or several related facts. W3C’s complex-image guidance explains why a short alternative may need a longer description or data table elsewhere on the page.
24. A readable product label
The fictional paint container’s label reads “Clay,” “Matte” and “250 mL.”
Alt text: “Paint container labeled Clay, Matte and 250 mL”
Preserve the identifying text. Put important instructions and other required product information in readable page content too; a short alt description should not be its only accessible version.
25. Personalized lettering
A close-up shows the name Mina engraved on a wooden keepsake box.
Alt text: “Wooden keepsake box with Mina engraved across the lid”
The exact lettering is the visual difference. Explain separately that it is a sample personalization, rather than implying every order arrives with that name.
26. A garment size chart
The fictional chart lists laid-flat T-shirt chest widths and garment lengths.
Alt text: “T-shirt size chart; garment chest widths and lengths in centimeters are listed below”
Provide the actual values as accessible text, not only in the image. For this example:
| Garment size | Chest width, laid flat | Garment length |
|---|---|---|
| S | 48 cm | 64 cm |
| M | 51 cm | 67 cm |
| L | 54 cm | 70 cm |
These are illustrative garment measurements, not body measurements or sizing advice for a real item. Your table must match the real chart.
27. An assembly diagram
A fictional diagram shows three steps for fitting a removable drawer divider.
Alt text: “Three-step diagram for fitting the drawer divider; instructions follow”
Supply the diagram’s information in text. In this illustration: unfold the divider, place it in the drawer, then slide the two sections apart to the drawer’s width. Real instructions must match the actual product and include any necessary precautions; do not replace them with invented steps.
28. A digital-product preview
A product gallery shows a preview of a downloadable weekly planner, with seven day columns and a notes area.
Alt text: “Weekly planner preview with seven day columns and a notes area along the bottom”
Describe the visible layout, not an unsupported claim that it works in every app or includes every page of a larger bundle. Put the download format and contents in the product description.
Condition and meaningful comparisons
Use comparison images to explain the difference that matters, rather than adding promotional language.
29. A used item’s visible defect
A close-up of a second-hand sideboard shows a scratch near the lower corner of its left door.
Alt text: “Scratch near the lower corner of the second-hand sideboard’s left door”
Name the condition detail plainly. Keep the written condition description consistent with the image; “excellent condition” would not explain this particular view.
30. Two surface finishes
Two otherwise matching cabinet handles are photographed together: one has a matte surface and the other reflects the light.
Alt text: “Matching cabinet handles shown in matte and glossy finishes”
The finish comparison is the point, not a new color or product category. Avoid inferring that one surface is more durable or scratch-resistant.
31. A reversible product’s two sides
The photograph shows both faces of a reversible placemat: a dark checked side and a plain pale side.
Alt text: “Reversible placemat showing a dark checked side and a plain pale side”
This explains that the contrasting designs are two sides of the same item. It is more useful than a description that could imply two separate placemats are included.
Add and verify the alt text in Shopify
In the Shopify desktop admin, open Products, select the product and open the relevant media item. Choose Add alt text, enter the description and select Save alt text. Repeat for the meaningfully different images in the gallery. Shopify’s media editor may suggest text for a missing description; review the suggestion against the actual image before accepting it.
Then check the storefront output. The relevant image should have an actual HTML attribute such as:
<img
src="/example-product-image.jpg"
alt="Cream teapot with a rounded body, curved spout and matching lid"
>
The path here is illustrative. Inspect your own image occurrence, including the product gallery and any collection card that reuses it. Confirm that the description belongs to the image currently displayed.
Saving text in the admin and rendering it are separate steps. Shopify exposes the description through the image object’s alt property. Its image_tag filter supports image rendering, but custom HTML or Liquid can use a different value or omit the attribute. An image URL alone does not carry the HTML alternative into a custom element.
Also distinguish a gallery photo from the control that opens it. W3C’s functional-image guidance requires meaningful action or destination information for image-only controls; the theme may need a separate accessible control name.
A website audit can help identify image issues to review. A missing-alt finding is a starting point; a nonempty field does not prove that the words match the picture. Our image-audit evidence guide explains why the asset and its use on a particular page must stay connected.
Finish by reading each description beside its image and surrounding product information. Keep the details that explain the picture, remove unsupported claims and verify that the storefront publishes the text you saved.