Images missing alt bulk
Moderate effortFound on 9% of audited stores.
Add descriptive alt text to every product and content image at the template level so search engines and screen readers can understand all images on the page.
What it is
Alt text (alternative text) is a short written description placed inside an image's HTML tag that explains what the image shows. When a page has dozens or hundreds of images missing alt text, it almost always means the root template — the product page layout, collection grid, or blog post design — is generating image tags without the `alt` attribute filled in. Fixing the template fixes every image it produces in one go, rather than editing each image individually.
Why it matters
Google explicitly uses alt text to understand image content and rank images in Google Images search — a meaningful source of free organic traffic for product-heavy stores. Pages where the majority of images have no alt text send a weak content signal to Google, which can suppress rankings for the entire page, not just the images. Beyond SEO, missing alt text is a WCAG 2.1 accessibility failure: screen-reader users — including those with visual impairments — cannot understand your product images at all, exposing your store to accessibility complaints and, in some jurisdictions, legal liability. Fixing this at the template level is a single change with store-wide impact across every page that template renders.
How to fix it
- Identify which template is responsible for the bulk of missing alt text (e.g., the product page template, collection/category grid, or blog listing template).
- Open that template file and locate every `<img>` tag. Check whether the `alt` attribute is absent, empty, or hardcoded as a placeholder.
- Replace each missing or empty `alt` attribute with a dynamic variable that pulls a meaningful value: use the product title, image filename (cleaned up), or a dedicated alt-text field from your platform's media library — whichever is most descriptive.
- For purely decorative images (dividers, icons, spacers) that convey no information, add an empty alt attribute (`alt=""`) — this tells screen readers to skip them intentionally, which is correct practice.
- Save the template and verify a live page in your browser: right-click an image → Inspect → confirm the `alt` attribute is present and populated with a real description.
- Run a site crawl or re-scan after deployment to confirm the bulk alt-text issue no longer appears across all affected templates.
Fix it on your platform
Pick your platform for the exact steps.
How to fix images missing alt bulk on Shopify
- Go to Online Store → Themes → click 'Customize' on your active theme, OR click the three-dot menu → 'Edit code'.
- In Edit Code, open the template most responsible for the issue: typically `sections/product-template.liquid` (or `sections/main-product.liquid` in Dawn-based themes) for product pages, or `sections/collection-template.liquid` / `sections/main-collection-product-grid.liquid` for collection grids.
- Find every `<img>` tag and any `{% render 'image' %}` or `image_tag` Liquid filter call. For product images, ensure the alt attribute is set to `{{ image.alt | escape }}` with a fallback: `{{ image.alt | default: product.title | escape }}`.
- For collection grids, the card snippet (e.g. `snippets/card-product.liquid`) is usually the single file to edit — update the `<img>` tag there to use `{{ card_product.featured_image.alt | default: card_product.title | escape }}`.
- To set alt text on individual images without editing code: go to Content → Files (or Settings → Files) and click on an image to add alt text, OR on the Product page, click each product image thumbnail and enter alt text in the field that appears.
- Save the file and preview a product/collection page to confirm `alt` attributes are populated.
How to fix images missing alt bulk on Shopify Plus
- Follow the same steps as Shopify above — Shopify Plus stores use the same theme code layer.
- If you use a custom storefront (Hydrogen / Headless), locate the React component rendering product images (typically `ProductImage` or similar) and ensure the `<img>` element includes `alt={product.title}` or `alt={image.altText ?? product.title}`.
- For scripts or apps injecting images via Script Tags, update those scripts to set `.alt` on every created `<img>` element.
How to fix images missing alt bulk on WooCommerce
- Navigate to Appearance → Theme Editor (or edit files via FTP/SSH). Locate `woocommerce/single-product/product-image.php` inside your child theme's WooCommerce overrides folder.
- If the override does not exist, copy it from `wp-content/plugins/woocommerce/templates/single-product/product-image.php` into `wp-content/themes/YOUR-CHILD-THEME/woocommerce/single-product/product-image.php`.
- Ensure `the_post_thumbnail` and `woocommerce_single_product_image_thumbnail_html` calls pass the alt text via the `$attr` array: `array('alt' => get_the_title())`.
- For existing product images, go to Media Library, click each image → add alt text in the 'Alternative Text' field. For bulk editing, use a plugin such as 'SEO Bulk Image Alt Text' or 'Auto Image Alt Text' to generate alt text from product titles automatically.
- For the shop/category grid, override `woocommerce/loop/loop-start.php` or check `content-product.php` to ensure `woocommerce_template_loop_product_thumbnail()` includes alt attributes.
- Save and visit a product page; use browser DevTools to verify alt attributes on all images.
How to fix images missing alt bulk on BigCommerce
- Go to Storefront → Themes → click 'Advanced' → 'Edit Theme Files' on your active theme (Stencil-based).
- Open `templates/components/products/product-view.html` for product detail pages and `templates/components/products/card.html` for category/search grids.
- Locate `<img>` tags and update them to include `alt="{{product.main_image.alt}}"` with a Handlebars fallback: `alt="{{#if product.main_image.alt}}{{product.main_image.alt}}{{else}}{{product.title}}{{/if}}"`.
- To set alt text on individual images: go to Products → Edit a product → scroll to the Images & Videos section → click each image and fill in the 'Alt Text / Title Text' field.
- Commit and apply changes in the theme editor, then preview a product page to confirm.
How to fix images missing alt bulk on Adobe Commerce (Magento)
- In the Admin, go to Catalog → Products → edit a product → Images and Videos tab. For each image, fill in the 'Alt Text' field. This is the per-image fix.
- For a template-level fix, locate the product image template in your theme: `app/design/frontend/VENDOR/THEME/Magento_Catalog/templates/product/view/gallery.phtml` (or the equivalent Hyva theme file `Magento_Catalog/templates/product/view/gallery.phtml`).
- Ensure the `<img>` tag or the `data-gallery-role` JSON configuration includes an `alt` key populated from `$block->getImageAttribute('image', 'label')` or the product name as fallback.
- For category pages, check `Magento_Catalog/templates/product/list.phtml` and verify the image renderer passes `alt` via `$productImage->getLabel()`.
- Clear the full-page cache: System → Cache Management → Flush Magento Cache, then verify in DevTools.
How to fix images missing alt bulk on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the template paths and admin UI are identical.
- If using a third-party theme (e.g. Luma child theme), copy the gallery template to your child theme's override path before editing.
How to fix images missing alt bulk on Wix
- In the Wix Editor, click any image on the page → click 'Settings' (the gear icon) in the toolbar that appears → fill in the 'What's in the image? (Alt Text)' field.
- For Wix Stores product images: go to the Wix Dashboard → Store Products → click a product → under the product image, click 'Edit' → add alt text in the alt text field. Repeat for all product images.
- For bulk updates across many products, use the Wix CSV import/export: go to Store Products → More Actions → Export Products; fill in the 'image alt text' column in the spreadsheet; re-import.
- For Wix Blog post images, open the blog post editor, click each image → Settings → Alt Text.
- Note: Wix does not expose direct template code to owners, so image-by-image or CSV bulk update is the available approach.
How to fix images missing alt bulk on Wix Studio
- In Wix Studio, click an image element → open the Properties panel on the right → enter alt text in the 'Alt Text' field.
- For Wix Studio ecommerce product images, follow the same Dashboard → Store Products CSV workflow described for Wix above.
- If using Wix Studio's CMS (dynamic pages), edit the connected dataset and add/populate an 'Image Alt Text' field, then bind it to the image element's alt text property in the editor.
How to fix images missing alt bulk on Squarespace
- In the Squarespace editor, click any image block → click the pencil/edit icon → go to the 'Design' or 'Image' tab → fill in the 'Alt Text' field.
- For Squarespace Commerce product images: go to Commerce → Products → edit a product → click each product image → fill in the 'Alt Text' field in the image panel.
- For Gallery Blocks or Gallery Sections, click the block → Edit → click each individual image → enter alt text.
- Squarespace does not provide direct template code access, so alt text must be entered image by image through these UI fields.
How to fix images missing alt bulk on Squarespace Commerce
- Go to Commerce → Products → open each product → click the main product image and any additional images → enter alt text in the 'Alt Text' input that appears.
- For bulk updates, use Squarespace's import/export (CSV) feature if available on your plan, or use the Squarespace API if you are on an Advanced Commerce plan to push alt text programmatically.
How to fix images missing alt bulk on Webflow
- In the Webflow Designer, click any Image element on the canvas → in the right-hand Settings panel (the gear icon), fill in the 'Alt Text' field.
- For CMS-driven images (e.g. a Product Image field in the CMS): click the image element → in Settings, switch the Alt Text field from 'Custom' to 'Get from CMS field' → bind it to the appropriate CMS text field (e.g. 'Product Name' or a dedicated 'Image Alt' field in your CMS collection).
- If your CMS collection lacks a dedicated alt text field, add one: CMS → open the Collection → Add Field → Plain Text → name it 'Image Alt Text' → populate it for all items → bind it as above.
- Publish the site and verify in DevTools that `alt` attributes are populated on live pages.
How to fix images missing alt bulk on Webflow Commerce
- In the Webflow Designer, navigate to the Product Template page. Click the main Product Image element → in the Settings panel, bind the Alt Text to the 'Name' field from the Product CMS collection (or a dedicated alt text CMS field if you have one).
- For collection list grids (e.g. shop page), click the image inside the Collection List → bind its alt text to the product name CMS field.
- Publish and verify on a live product page.
How to fix images missing alt bulk on PrestaShop
- Go to Catalog → Products → edit a product → Images tab. Click each image; you will see language-specific 'Caption' fields — fill these in as they serve as the alt text.
- For the product listing (category pages), the alt text is pulled from the image caption automatically by the default theme. If your custom theme overrides this, check `themes/YOUR-THEME/templates/catalog/_partials/product-cover-thumbnails.tpl` and ensure `{$product.cover.legend}` or `{$product.cover.alt}` is assigned to the `alt` attribute.
- Clear the SmartCache: Advanced Parameters → Performance → Clear cache, then verify in DevTools.
How to fix images missing alt bulk on OpenCart
- Go to Catalog → Products → edit a product. On the 'Image' tab, the main image does not have a native alt field by default — the theme typically uses the product name. Confirm your theme's `catalog/view/theme/YOUR-THEME/template/product/product.twig` (or `.tpl`) sets `alt="{{ heading_title }}"` on the main image.
- For the product listing grid, check `catalog/view/theme/YOUR-THEME/template/product/category.twig` and ensure `<img ... alt="{{ product.name }}">` is present.
- If your theme is missing alt attributes, edit the `.twig` template files to add them, or install an SEO extension from the OpenCart Marketplace that handles image alt text.
How to fix images missing alt bulk on Ghost
- In the Ghost editor, click any image card → click the 'Alt text' option (below the image, shown as 'Add alt text') → type the description.
- For your theme's featured images, open your theme files: in `partials/` or the main `post.hbs` / `page.hbs`, find `<img>` tags using `{{feature_image}}` and add `alt="{{title}}"` as a fallback if a dedicated alt field is not set.
- Upload the modified theme under Settings → Design → Upload theme.
How to fix images missing alt bulk on Next.js (Headless)
- Replace every bare <img> tag in your component tree with Next.js's next/image <Image> component, which enforces the alt prop at the TypeScript/prop-types level.
- Create a shared ProductImage component (e.g. components/ProductImage.tsx) that accepts the product object and derives a meaningful alt string from structured data fields (e.g. product.title + variant color/size), with a non-empty fallback.
- Create a shared ContentImage component (e.g. components/ContentImage.tsx) for CMS/editorial images that reads an explicit alt field from the CMS payload and falls back to the image caption or filename-derived string — never an empty string.
- Audit your product listing page (e.g. app/products/page.tsx or pages/products/index.tsx), product detail page (app/products/[slug]/page.tsx or pages/products/[slug].tsx), and any content/blog pages — swap raw <img> / untyped <Image alt=''> usages for the new shared components.
- Add an ESLint rule (jsx-a11y/alt-text) to your .eslintrc to catch empty or missing alt props at build time so regressions are blocked in CI.
- Run next build and resolve any TypeScript or lint errors before deploying; verify rendered HTML with browser DevTools to confirm every <img> element in the output has a non-empty alt attribute.
Does your site have this issue?
Run a free SEOLZ scan to find images missing alt bulk — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Images missing alt bulk?
Alt text (alternative text) is a short written description placed inside an image's HTML tag that explains what the image shows. When a page has dozens or hundreds of images missing alt text, it almost always means the root template — the product page layout, collection grid, or blog post design — is generating image tags without the `alt` attribute filled in. Fixing the template fixes every image it produces in one go, rather than editing each image individually.
Why does images missing alt bulk matter?
Google explicitly uses alt text to understand image content and rank images in Google Images search — a meaningful source of free organic traffic for product-heavy stores. Pages where the majority of images have no alt text send a weak content signal to Google, which can suppress rankings for the entire page, not just the images. Beyond SEO, missing alt text is a WCAG 2.1 accessibility failure: screen-reader users — including those with visual impairments — cannot understand your product images at all, exposing your store to accessibility complaints and, in some jurisdictions, legal liability. Fixing this at the template level is a single change with store-wide impact across every page that template renders.
How do I fix images missing alt bulk?
Add descriptive alt text to every product and content image at the template level so search engines and screen readers can understand all images on the page.
Authoritative references
- SEO Starter Guide — Google Search Central
- Google Images & alt text best practices — Google Search Central