Shopify themes, liquid, logos, and UX
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.
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
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.
Hello, @FiezaImports
You can add image alt text in different ways
1. HTML
2. Shopify Admin
/ 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
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.
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
Around line 37
Change
alt=""
to
alt="{{ collection.image.alt }}"
Change
alt=""
to
alt="{{ card_collection.featured_image.alt }}"
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
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
This solution works, thanks
How could we do it for theme Origin?/
we have this alt="{{ collection.image.alt | escape }}" both in main collection and in card collection.
site is www.brilliancedirect.com
Thanks
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024