How can I properly display image Metafields and change fonts in my product descriptions?

[GemMuir]

I am trying to get my products to display some info on my collection pages (so you don’t have to click on each product to see what the coffee tastes like) I have created 3 metafields : roast level (image), subtitle, tastes like info. I should be able to add these direct from my theme but the metafields don’t appear to select. I have been given some code to display them which I’ve added but the image display as a link instead.

MAGE 1 is how it is currently displaying - IMAGE 2 is how I want it to look so also need to change fonts!

Does anyone know why my image is not showing? And how I can change the fonts for each Metafields and make sure they display on separate lines?

[MetafieldsGuru]

Hi @GemMuir ,

The thing is that the payload returned for a file/image metafield is a generic file object .

You can display an image by combining the Liquid code, an image_url filter and a proper HTML tag.

Instead of a single line of code like this:

{{ product.metafields.namespace.key.value }}

You may want to use a snippet like this:

{% assign image_url = product.metafields.namespace.key %}
{% if image_url != blank %} 
 <img src="{{ image_url.value | image_url }}">
{% endif %}

Don’t forget to replace the “namespace” and “key” parts of “product.metafields.namespace.key” with the actual namespace and key of your image metafield.