Displaying product metafields in main-product.liquid

[thisistheway]

Hi,

I have product metafields "roast-image" (file) and "Roast" (single line text).

I'm trying to display these on my product pages, roast-image then roast.

I've been toying around in main-product.liquid but managed only to get "roast" to show up (and it shows up like ["Dark"]). Can anyone help me out here? I'm using the "Taste" theme.

Here is an example of the roast-image, however I will probably restrict the height to 20px on the page.

placeholder

[PaulNewton]

Hi @thisistheway 👋 

{{ product.metafields.custom.roast-image| metafield_tag }}

https://shopify.dev/docs/api/liquid/filters/metafield_tag 

if needing the url also try {{ product.metafields.custom.roast-image.value.src }} or {{ product.metafields.custom.roast-image.src }} 

💣This assumes the metafield is NOT a list reference.

This is the way.

[thisistheway]

Hi,

I ended up adding a liquid code block on the page template:

{{ product.metafields.custom.roast_image | metafield_tag }}
{{ product.metafields.custom.roast | metafield_tag }}

Results in:

So I'm trying to specify some CSS, but can't quite figure out where to put it. It doesn't seem to be applied in any of the files I have tried. Is there a way to specify CSS directly in the custom liquid block? Do I have to instead do some inline styling?

    .metafield-tag {
    display: flex;
    align-items: center;
    list-style: none !important; /* Remove bullet points with high priority */
  }
  
  .metafield-tag img {
    height: 20px !important;
  }

This is the way. 

[PaulNewton]

custom-liquid blocks support html, wrap the css in the <style></style> tag.
In some themes or new version such blocks may be (re)named custom-html instead noting they support liquid to lower confusion about html usage.

You will want to be more specific than .metafield-tag to avoid styling other such outputs inadvertently by wrapping contents in a container:
<div class="roast-info">{{ product.....</div>

<style>.roast-info .metafield-tag { ....

.roast-info .metafield-tag img { ....

</style>

This is the way.