Product pages - Add captions or labels to product images

Highlighted
Community Manager
Community Manager
300 9 264

Caution: This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following 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.

TyW | Community Manager @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes