Product pages - Add captions or labels to product images

Community Manager
Community Manager
428 46 1156

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

Replies 3 (3)
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?

New Member
1 0 1

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?

16 1 5

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-{{ }}" data-image-id="{{ }}">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
{{ product.variants[forloop.index0].title}}
{% endfor %}


Mine ended up looking like this:

Info under Thumbnails_Solved.png

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