how to add a text caption to shopify variant images

how to add a text caption to shopify variant images

terryohm
New Member
11 0 0

Hi, Does anyone know if there is a way to add text captions underneath shopify variant images on the product detail page? Like this: 

Screenshot 2024-05-13 at 16.00.08.png

Thanks!

 

Replies 12 (12)

ginthu
Shopify Partner
7 0 0

What do you want to display, the variant name or some other text?

terryohm
New Member
11 0 0

@ginthu yes the variant name and size preferably?

ginthu
Shopify Partner
7 0 0

I assume the variant images are already visible. So you can inspect the code from google dev tool. Look for something to identify that element for example the classname. then you can search the classname in the code. there you will find the variant images rendering. so underneath the images you can put the custom code <p>{{ variant.title }}</p>. (the variable name can be different according to you code.).

 

but before that check in the customiser theme settings if there is an option to display variant name, for some themes there is an option.

terryohm
New Member
11 0 0

Thank you very much i will try that

terryohm
New Member
11 0 0

I Tried this and I found the location to add <p>{{ variant.title }}</p> tag but I'm not seeing anything using that code. If I add some text

e.g. <p> Hello</p> it appears in the right position. Any ideas?

ginthu
Shopify Partner
7 0 0

can you share the screenshot of the place you put this code. please include the variant image code section as well.

thanks

terryohm
New Member
11 0 0

Screenshot 2024-05-14 at 15.13.39.png

terryohm
New Member
11 0 0

The code is in product-thumbnail.liquid 

ginthu
Shopify Partner
7 0 0

I think you are in the wrong place, can you find variant-picker.liquid inside snipped?

terryohm
New Member
11 0 0

I see product-variant-picker-liquid ? Not sure where to place the code though  as I don't see the classname Im looking for: (product__media media media--transparent) I also have these:

 Screenshot 2024-05-15 at 09.39.26.png

ginthu
Shopify Partner
7 0 0

Hey Sorry, Was busy with somethin.

Were you able to fix this?

PageFly-Noah
Shopify Partner
1317 233 276

This is Noah from PageFly - Shopify Page Builder App

 

Hi @terryohm  To add this test  you need contact support theme. Because it will change structure theme and many code to show type body text.

Thank you so much.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.