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
{{ 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.
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.
custom-liquid blocks support html, wrap the css in the 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:
This is the way.