How can I add alternative text to images on the collections page?

How can I add alternative text to images on the collections page?

FiezaImports
Tourist
5 0 4

Hello guys,

I am trying to add Image Alternative Text to the /collections page. I can´t find the file that contains the code so I can add something to the alt="" field. Does anybody know where to make changes so the alt field of the images don't stay blank?
**Already try to add an image to any collection and add an Alternative Text to each one on Admin. It doesn't change anything.

 

https://fiezaimports.com.br/collectionshttps://fiezaimports.com.br/collectionsAlt="" for every single collectionAlt="" for every single collection

Replies 8 (8)

made4Uo
Shopify Partner
3839 716 1177

Hi @FiezaImports,

 

You can edit the alt text in the collections. 

 

1. From your Admin Page, click Products then Collections.

2. Find the collection you want to edit.

3. Go to Collection image and click Edit button, then Edit image alt text. See image below

 

made4Uo_0-1656534405476.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
FiezaImports
Tourist
5 0 4

It doesn't work for the YourShop.com/collections (at least for the Dawn Theme).
That´s the problem I mentioned on the description of my question.

Thank you.

iconwitty1
Tourist
12 0 0

Hello, @FiezaImports 

You can add image alt text in different ways 

1. HTML

  • ALT text – the concept of adding a screen reader friendly text alternative description of an image. ALT attribute (HTML) – In HTML, the ALT text is inserted into the ALT attribute within the IMG tag.
  • ALT “Tag” – Shorthand reference to the ALT attribute.
     

2. Shopify Admin

You can also add alt text to your product images from the Shopify admin.
Tap Edit.
  • From the theme editor sidebar, click the section with the image that needs alt text.
  • Below the image, click Edit.
  • In the dialog, enter the alt text, and then click Save.
  • Click Save.

/ Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog

banned
FiezaImports
Tourist
5 0 4

It doesn't work for the YourShop.com/collections (at least for the Dawn Theme).
That´s the problem I mentioned on the description of my question.

The Alt Attribute comes out empty like alt="" just for the page where Shopify lists all your collections by default.

Thank you.

Masuga
Shopify Partner
12 1 4

I get what you're trying to do - we ran into this issue as well with the Dawn theme. You can add alt text to the collection images in the Shopify admin, but that text does not show on the front end of the site, because the alt tags in the liquid templates are blank. No idea why this is, but if you run your Shopify site through an SEO tool, it will flag Collection images for not having alt text. 

 

Here's how we fixed it for the Dawn theme.

 

sections/main-collection-banner.liquid

This adds alt text to the collection image at the top of a Collection page.

Around line 37

 

Change 
alt=""
to 
alt="{{ collection.image.alt }}"

 

 

snippets/card-collection.liquid
This adds alt text to the Collection images wherever they appear in Collection lists.
Around line 53

 

Change
alt=""
to
alt="{{ card_collection.featured_image.alt }}"

 

 
View source after making these changes and you should be set.
Websites for entertainment and publishing companies. We also specialize in Shopify eCommerce for ambitious artists, creators, and unique independent brands.
Masuga
Shopify Partner
12 1 4

We went into more detail about fixing the blank alt tags on collection images in a blog post: https://www.shopmode.digital/blog/fix-shopify-collection-image-blank-alt-text

Websites for entertainment and publishing companies. We also specialize in Shopify eCommerce for ambitious artists, creators, and unique independent brands.
Masuga
Shopify Partner
12 1 4

I couldn't edit or delete the previous comment, so I'm noting that the blog post moved here: https://www.gomasuga.com/blog/fix-shopify-collection-image-blank-alt-text

Websites for entertainment and publishing companies. We also specialize in Shopify eCommerce for ambitious artists, creators, and unique independent brands.
Derek_Bradley
Tourist
10 0 0

This solution works, thanks