TestParty

Blog

How to Add Alt Text to Shopify Product Images: Step-by-Step Guide

TestParty
TestParty
April 30, 2025

Alt text (alternative text) describes images for screen reader users and displays when images don't load. For Shopify stores, proper alt text is essential for both accessibility compliance and SEO. This guide walks through adding alt text to every type of image in your Shopify store.

Why Alt Text Matters for Shopify Stores

Accessibility Requirements

WCAG 2.2 Success Criterion 1.1.1 requires text alternatives for non-text content:

For product images:

  • Screen reader users need product descriptions
  • Customers rely on alt text to understand what they're buying
  • Missing alt text means missing sales

Legal compliance:

  • ADA lawsuits target e-commerce sites
  • Alt text is frequently cited in complaints
  • Fix now to reduce legal risk

SEO Benefits

Alt text improves search visibility:

Image search:

  • Google Images uses alt text for indexing
  • Product images appear in shopping searches
  • Better alt text = more organic traffic

Page relevance:

  • Alt text contributes to keyword relevance
  • Descriptive text helps search engines understand content
  • Avoid keyword stuffing—write naturally

Adding Alt Text to Product Images

Method 1: Through Product Editor

Step 1: Go to Products in your Shopify admin

Step 2: Click on the product you want to edit

Step 3: In the Media section, click on an image

Step 4: Click "Add alt text" or the pencil icon

Step 5: Enter descriptive alt text

Step 6: Click "Save" then save the product

Method 2: Bulk Edit via CSV

For stores with many products, use CSV export/import:

Step 1: Export products

  • Go to Products > Export
  • Select "Current page" or "All products"
  • Export as CSV

Step 2: Open CSV in spreadsheet software

Step 3: Find the "Image Alt Text" column

  • If missing, add a column named exactly Image Alt Text

Step 4: Add alt text for each image

  • Match the row to the correct product/image

Step 5: Import updated CSV

  • Go to Products > Import
  • Upload your edited file
  • Review changes before confirming

Method 3: Using Shopify API

For developers with many products:

// Using Shopify Admin API
const Shopify = require('shopify-api-node');

const shopify = new Shopify({
  shopName: 'your-store',
  apiKey: 'your-api-key',
  password: 'your-password'
});

// Update single image alt text
async function updateImageAlt(productId, imageId, altText) {
  await shopify.productImage.update(productId, imageId, {
    alt: altText
  });
}

// Bulk update all products
async function bulkUpdateAltText() {
  const products = await shopify.product.list({ limit: 250 });

  for (const product of products) {
    for (const image of product.images) {
      if (!image.alt) {
        // Generate alt text based on product
        const altText = generateAltText(product, image);
        await updateImageAlt(product.id, image.id, altText);
      }
    }
  }
}

Writing Effective Product Alt Text

Formula for Product Images

Good product alt text includes:

[Brand] [Product Name] in [Color/Variant] - [View/Angle/Context]

Examples:

Nike Air Max 90 in White/Black - side profile view

Handmade ceramic coffee mug with blue glaze - 12oz capacity

Women's cashmere cardigan in burgundy - front view with buttons

Organic lavender essential oil bottle with dropper - 30ml

What to Include

Always include:

  • Product name
  • Color/variant shown
  • Relevant attributes (size, material)

Include when relevant:

  • View angle (front, back, side)
  • Context (worn, in use, styled)
  • Important visible features

Avoid:

  • "Image of" or "Picture of" (screen readers announce this)
  • Keyword stuffing
  • File names as alt text
  • "Product image" or generic descriptions

Different Image Types

Primary product image:

Vintage leather messenger bag in brown - front view with brass buckle closure

Lifestyle/context image:

Woman wearing the vintage leather messenger bag across shoulder while walking in city

Detail shot:

Close-up of brass buckle and adjustable strap on vintage leather messenger bag

Size/scale image:

Vintage leather messenger bag shown next to 15-inch laptop for size reference

Adding Alt Text to Collection Images

Through Collection Editor

Step 1: Go to Products > Collections

Step 2: Click on the collection to edit

Step 3: Click on the collection image

Step 4: Enter alt text in the field provided

Step 5: Save the collection

Collection Image Alt Text Examples

Women's summer dress collection featuring floral prints and bright colors

Men's formal footwear collection including oxford shoes and dress boots

Kitchen essentials collection - pots, pans, and cooking utensils

Holiday gift guide collection - curated gifts under $50

Adding Alt Text to Theme Images

Customizer Method

Step 1: Go to Online Store > Themes

Step 2: Click "Customize" on your active theme

Step 3: Click on the section containing the image

Step 4: Look for "Image alt text" field in section settings

Step 5: Enter appropriate alt text

Step 6: Save changes

Common Theme Image Locations

Hero/Banner images:

  • Slideshow sections
  • Image with text sections
  • Featured collections

Navigation images:

  • Mega menu images
  • Collection thumbnails

Footer/About images:

  • Logo images
  • Social proof images

Theme Image Alt Text Examples

Summer sale banner - Up to 50% off all swimwear

Free shipping on orders over $50 promotional banner

Customer testimonial photo - Sarah M. from Portland

Shop payment methods: Visa, Mastercard, PayPal, Apple Pay

Logo Alt Text

Main Store Logo

The logo requires specific alt text:

Step 1: Go to Online Store > Themes > Customize

Step 2: Find Header section

Step 3: Look for logo image settings

Step 4: Add alt text field (often labeled "Custom logo alt text")

Recommended format:

[Store Name] logo

Example:

Mountain Gear Co. logo

Note: Keep logo alt text simple—it's usually linked, so brevity helps screen reader users.

Blog Post Images

Adding Alt Text to Blog Images

Step 1: Go to Online Store > Blog posts

Step 2: Edit or create a post

Step 3: Click on an image in the content editor

Step 4: Select the image and click the image icon in toolbar

Step 5: Enter alt text in the dialog

Step 6: Save the post

Featured Image Alt Text

Step 1: In blog post editor, find "Featured image" section

Step 2: Click on image settings

Step 3: Add alt text in the provided field

Blog Image Alt Text Examples

Step-by-step guide: How to apply facial serum with dropper

Before and after comparison showing skin improvement over 30 days

Infographic showing the benefits of natural skincare ingredients

Product flat lay featuring new spring skincare collection

Handling Decorative Images

When to Use Empty Alt Text

Decorative images that don't add information should have empty alt text:

<!-- Decorative divider -->
<img src="divider.png" alt="">

<!-- Background pattern -->
<img src="pattern.png" alt="" role="presentation">

In Shopify Themes

Some themes let you mark images as decorative. If not, use empty alt text (alt="") in theme code:

{% if image.alt == 'decorative' %}
  <img src="{{ image.src }}" alt="" role="presentation">
{% else %}
  <img src="{{ image.src }}" alt="{{ image.alt }}">
{% endif %}

Auditing Existing Alt Text

Finding Missing Alt Text

Manual method:

  1. Browse your store
  2. Right-click images > Inspect
  3. Check for alt attribute
  4. Empty or missing = needs fixing

Using browser tools:

// Run in browser console on product page
document.querySelectorAll('img').forEach(img => {
  if (!img.alt || img.alt.trim() === '') {
    console.log('Missing alt:', img.src);
    img.style.outline = '3px solid red';
  }
});

Using accessibility tools:

  • WAVE browser extension
  • axe DevTools
  • Lighthouse audit

Prioritizing Fixes

Priority 1 (Fix immediately):

  • Product images (affect sales and compliance)
  • Collection images
  • Hero/banner images

Priority 2 (Fix soon):

  • Blog post images
  • About page images
  • Category thumbnails

Priority 3 (Fix when possible):

  • Footer images
  • Social proof
  • Decorative elements

Alt Text for Product Variants

Handling Color Variants

Each color variant image needs specific alt text:

Nike Air Max 90 in Triple White - side view

Nike Air Max 90 in Black/Red - side view

Nike Air Max 90 in Navy Blue - side view

Handling Size Variants

For products where size appearance differs:

Handmade ceramic planter - Small (4 inch diameter)

Handmade ceramic planter - Medium (6 inch diameter)

Handmade ceramic planter - Large (8 inch diameter)

Variant-Specific Details

Adjustable standing desk at lowest height position (28 inches)

Adjustable standing desk at highest height position (48 inches)

Convertible sofa in bed configuration - queen size

Common Mistakes to Avoid

Keyword Stuffing

Bad:

Buy Nike shoes sneakers athletic footwear running shoes best Nike shoes online shop Nike

Good:

Nike Air Zoom Pegasus 40 running shoe in black - side view

Generic Descriptions

Bad:

Product image
Image 1
Photo

Good:

Organic cotton t-shirt in heather gray - women's relaxed fit

Repeating Information

Bad (when product title is "Blue Ceramic Vase"):

Blue ceramic vase blue vase ceramic vase

Good:

Handcrafted blue ceramic vase - 8 inches tall with textured glaze finish

Over-Describing

Bad:

This is a beautiful photograph of our amazing handcrafted artisanal organic fair-trade ceramic coffee mug that was made by skilled craftspeople in our workshop using traditional techniques passed down through generations, featuring a stunning blue glaze that was carefully applied by hand.

Good:

Handcrafted ceramic coffee mug with blue glaze - 12oz

Automating Alt Text

Shopify Apps

Several apps can help generate alt text:

Features to look for:

  • Bulk alt text generation
  • AI-assisted descriptions
  • Template-based generation
  • Easy editing interface

Caution:

  • Review auto-generated alt text
  • AI may miss important details
  • Generic templates reduce effectiveness

Custom Solutions

// Template-based alt text generation
function generateAltText(product, image, index) {
  const variant = product.variants[0];
  const imageType = getImageType(index);

  return `${product.title} in ${variant.title} - ${imageType}`;
}

function getImageType(index) {
  const types = ['front view', 'back view', 'detail shot', 'lifestyle'];
  return types[index] || 'product view';
}

Taking Action

Alt text is fundamental to Shopify accessibility. Start with product images—they have the highest impact on both compliance and sales. Use the formulas and examples in this guide to write effective descriptions, then work through collections, themes, and blog content.

TestParty automatically identifies missing alt text across your Shopify store.

Schedule a TestParty demo and get a 14-day compliance implementation plan.

Related Resources

Contact Us

Automate the software work for accessibility compliance, end-to-end.

Empowering businesses with seamless digital accessibility solutions—simple, inclusive, effective.

Book a Demo