How do you add text underneath images that are displaying inline?

Store Design
1

Hi,

I am trying to add product feature icons to our product pages. I have no knowledge of coding, but have managed to make something from some code I found on another post. Basically, I want the product icons to show across the page horizontally under the product title and then each icon to have a text label showing people what it means.

I don’t know how to add the text underneath so there is spaces between them. This is what I have so far using basic code I have copied from someone else!

screenshot.png
screenshot.png671×413 20.7 KB

Here is the code I have used in the custom liquid box on the product page:

{% assign icon = product.metafields.feature-icon %}

{{icon.compostabletext}}
{{icon.machinewashabletext}}

How can I effectively attach the text label to the image underneath it whilst keeping the images displaying horizontally across the page?

Thanks

2

Hi @ecotech ,

Please change code:

{% assign icon = product.metafields.feature-icon %}

  
  

{{icon.compostabletext}}

{{icon.machinewashabletext}}

Hope it helps!