Fix Shopify Collection Image Blank Alt Text for Better SEO

Shopify's free Dawn theme is a great way to get your Shopify store off the ground, but there are issues with it that can be easily fixed to improve your shop's SEO. One of the issues is missing alt text for collection images.

If you perform a site audit on your Shopify store using an SEO tool like ahrefs, you may get warnings about images missing alt tags. In the case that prompted this post, it was for a site using the Dawn theme with numerous collection images - there were 42 errors in all.

This post outlines a quick and easy fix to ensure the alt text added to collection images via the Shopify admin will display correctly on the front end templates, which improves your Shopify site accessibility and SEO.

What are Shopify Collections?

Collections are groups of products, either manually grouped together or created automatically based on criteria like common tags. Product collections typically have a landing page of their own, and can be linked to from other pages.

In addition to a meta title and meta description, each collection can have an image associated with it, and you can define the alt text for the image. This is great, until you realize that the alt text you add isn't being output anywhere on the front-end of your shop! Your carefully crafted image descriptions sit in the database, alone and unused.

How to Add Alt Text to Shopify Collection Images in the Shopify Admin

First, let's ensure our collection images have alt text set. Navigate to Products > Collections and click on a collection name. In the right sidebar, you'll see a card for "Collection Image." Clicking on "Edit" will show a few more links, where you will find "Edit image alt text." Clicking that will display a modal window where you can add your descriptive alt text.

Once you've added the text in the modal window, click "Save." Do this for all your collections, and when you're all set, you're ready to apply the fix to the templates.

Why are Alt Tags for Images Important?

Alt tags for images are important for two main reasons:

1. Accessibility. Visually impaired users who use screen readers can have the alt text read to them so they understand what is in an image, and the alt text will show on the page if the image cannot be loaded.
2. SEO benefits. Alt text allows you to add clear descriptions - including target keywords - that can help search engines. Your images can be a great source of organic search traffic.

This article about alt tags from Moz goes into greater detail.

Now that we know what the collections are, why alt tags are important, and that collections images have empty alt tags that could be useful to the Shopify store, we can get to the simple fix.

Fixing Empty Alt Tags for Shopify Collection Images

This modification requires a bit of coding, and assumes we're referencing the Dawn theme version 6.0.x. The code can be updated in a couple ways, depending on how you are working on the code of your site:

1. Edit the templates in the Shopify admin, or
2. Edit the templates in your local copy of your theme's repository if you're developing with the Shopify CLI (this is how we do Shopify custom theme development and advanced template modifications at Masuga Design).

Either way, there is only one line that needs to change in two templates. First, let's look at adding the alt text to the collections images in the Shopify admin.

If you're editing these files in the Shopify admin area, you'll find them by navigating to Sales Channels > Online Store and clicking "Customize." There will then be a three-dot icon toward the upper left of the main navigation. Opening that will reveal a link titled "Edit Code." You should then be able to use the search function to filter and find the templates you need to modify.

Template 1: sections/main-collection-banner.liquid

This fixes the empty alt text attribute on the collection image at the top of a Collection page.

Around line 37, you'll see an empty alt tag (alt=""). Change that to:

Template 2: snippets/card-collection.liquid

This fixes the blank alt text attribute on the collection images wherever they appear in collection lists.

Around line 53, you'll see an empty alt tag (alt=""). Change that to:

Save your template work and re-load your pages on the front end of your site. Visit a collection page or a collection list on a page of you shop and either right click on a collection image to "inspect element" or simply view source of the webpage you're on. Look for the alt tag of the collection image and you should see the text you had entered in the Shopify admin. If you're using an SEO audit tool, don't forget to re-crawl your site to ensure the alt tag warnings have disappeared.

Conclusion

Modifying the default Dawn theme to display alt text for Shopify collection images is a very simple, quick fix that can pay dividends by improving your visitor experience and increasing the likelihood that your images (and site) can be found organically through search.

The difference between you and your competitors might come down to technical details such as this. Why not take care of details that your competitors may be overlooking?

If you need help with custom app development, Shopify theme development, or SEO improvements for your Shopify store, we'd be happy to see how we can help you. Contact us today!