How to render out a metaobject image

Store Design
, ,
1

How do I render out a Meta object string and image in a Custom Liquid code section on my product page?

I’m trying to make a “brand badge” for every product, to display what brand they are connected to but can not wrap my head around this.

Do you call it through metafield?
{{ product.metafields.custom.brandbadge }}

Or do you call it through metaobjects?
{{ shop.metaobjects.brand_object.name }}

And do you render out the content?

I have been looking at https://shopify.dev/docs/api/liquid/objects/metaobject but can not seam to understand it.

2

@mns-burg Hope you are doing well.

Metaobject is a global object so you have to use it like below:

{{ metaobject.title.value }}

3

Hello @mns-burg ,

Certainly! To display a brand badge using metafields, use the following Liquid code:

<div class="brand-badge">{{ product.metafields.custom.brandbadge }}</div>

If you’re using metaobjects, replace the metafield reference with the appropriate metaobject field:

<div class="brand-badge">{{ shop.metaobjects['brand_object']['name'] }}</div>

Remember to adjust the class names and styling according to your theme.

Thanks!

4

Is that also the case if I want to show a metaobject on my product page using the “Custom Liquid” section?
I can not seam to get it to render/output anything.

5

How will I go around targeting the metaobject, that have been chosen in the individual products metafield.
I seam to get no output or a the text “MetaobjectDrop”.

6

@mns-burg yes you can. but you have to use your handle of metaobject to access in product page

7

I also had this problem, and for what it’s worth my dumb ass had set the metafield as an array of metaobject references, not just a single entry. What worked is e.g.:
{{ collection.metafields.custom.banner_.value_.image | image_url: width: 100 }}

The logic is when it’s just the metafield content, it’s a map of gids, but using .value makes it into a logical object with real products/images/whatever, you the .image here is an image that can then be sent through image_url.