Product pages - Add captions or labels to product images

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

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.

[SalimAkmal]

Dear Tyw,

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

[Chasebaits]

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?

[Lux8]

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:

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