Product pages - Add captions or labels to product images

Highlighted
Community Manager
Community Manager
496 30 734

Tip: You can also add captions to your images using an app. Try searching for "caption" in the Shopify app store.

 

Product images don't have metadata that could be used as captions in your Liquid templates. You can work around this by using the product image filename to come up with a descriptive caption using Liquid filters.

 

Adding an image caption using Liquid

When each product image illustrates a variant (and only one image does), and when your product images are dragged and dropped in the same order as your variants are listed, you can use this Liquid for your image caption:

 

{% for image in product.images %}
...
My image caption is {{ product.variants[forloop.index0].title }}
...
{% endfor %}


The variant title becomes your image caption.

TyW | Online Community Manager @ Shopify 
 - 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

0 Likes
Highlighted
New Member
1 0 0

Dear Tyw,

Thanks for this helpful article, Can you please tell me where and how to add this mentioned liquid into the code?

0 Likes
Highlighted
New Member
1 0 0

I would also like some more info on this. Where do we put this code exactly? Can you show us an example of it working?

0 Likes
Highlighted
Excursionist
13 1 4

Hi @Chasebaits @SalimAkmal 

Add the code to your product-template.liquid, you can find it under sections. Search for {% for image in product.images %} in your code and add it where you would like to see the caption.

My code looks like this in the end:

{% for image in product.images %}
<li class="grid-item medium-down--one-quarter large--one-quarter">
<a href="{{ image.src | img_url: '1024x1024', scale: 2 }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
{{ product.variants[forloop.index0].title}}
</li>
{% endfor %}
</ul>

 

Mine ended up looking like this:

Info under Thumbnails_Solved.png

 I suggest making a copy of your code before attempting this though.

 

0 Likes