Display variant title as image alt tag on collection page

New Member
2 0 0

I am working on optimizing image alt tags. Ideally I'd like the alt text to be the product title and the variant title. I can get all variant titles to show, but I'm struggling to get only the variant title of that specific image to display in the alt text.


What I have:

alt="{{ image.alt | escape }} {% for variant in product.variants %}
        {{ variant.title }}
      {% endfor %}">

This returns the product title + a list of all variant titles. I need to return the product title + ONLY THAT VARIANT TITLE. 


Note: I'd like this to work on both product and collection pages.




The issue here is that the image has to be associated with the variant to pull that variant title. Meaning if you have multiple images for one variant (from my experience) it cannot pull the variant title. On the backend you can see that each variant has an image you can add next to the title.


If you only have one image per variant then you do not need to have the forloop and can use {{image.variants.first.title}}

*NOTE image is the variable from the forloop that loops in all your images. Replace this variable if not the same.

This will pull the first variant title with that image. It will be more complex if you have multiple variant types. ie color and sizes.

Hope this helps!

We work on Shopify stores to improve, maintain, and build functionality across all store types.
- Reach Out To Us! | hello@storemedics.com
- Visit Our Site! | https://www.storemedics.com

If we helped, leave a Like / Accept Solution
New Member
2 0 0

Thanks for your reply! This did not work on the collection page. I tried:

alt="{{ type.alt | escape }} {{image.variants.first.title}}"

and also: 

alt="{{ image.alt | escape }} {%- for variant in image.variants -%}{{image.variants.first.title}}{%- endfor -%}">



However, in the meantime, I was able to get the product page to work using this: 

alt="{{ image.alt | escape }} {%- for variant in image.variants -%}{{ variant.title }}{%- endfor -%}"

But it doesn't work on the collection page either.