how to add a text caption to shopify variant images

[terryohm]

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

Thanks!

[ginthu]

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

[terryohm]

@ginthu yes the variant name and size preferably?

[ginthu]

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]

Thank you very much i will try that

[terryohm]

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]

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

thanks

[terryohm]

[terryohm]

The code is in product-thumbnail.liquid 

[ginthu]

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

[terryohm]

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:

 

[ginthu]

Hey Sorry, Was busy with somethin.

Were you able to fix this?

[PageFly-Noah]

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