How can I access metaobject values in product metafields?

[rdaniel]

Hello,

My store has been given access to metaobjects, and so I've started using it and setup a few metaobjects that I want to use in the metafields for products and variants. But I don't quite get how I can access the values of the meta object via the metafields?

I thought maybe something like this would make sense:

{% for metaobject in product.metafields.namespace.key %}
{{ metaobject.field.value }}
{% endfor %}

Appreciate the correct way to do this, and updating the Liquid API documentation would be very helpful.

Thanks.

[Niklas_g]

Hey Rdaniel, what datatyp of metafield are you using? 
Whats the output when you print {{ product.metafields.namespace.key }}?

Mabey your metafield value is a string? You can create an array with | split like so:

{% assign array = "value1,value2,value3" | split: "," %}
{% for value in array %}
  {{value}}
{% endfor %}

[rdaniel]

As described, I'm using metaobjects.

When printing {{ product.metafields.namespace.key }} I get the gid reference url.

[rdaniel]

Is there no one that can answer this? It would be poor to add such a nice way of storing information without the possibility to access the information in the frontend...?

[PaulNewton]

They are a new feature, so everyone's learning curve is high.

Thoroughly review the docs if you not simply using dynamic sources in theme settings.

Merchants start here

https://help.shopify.com/en/manual/custom-data/metaobjects

Devs

https://shopify.dev/docs/apps/custom-data/metaobjects 

https://shopify.dev/api/liquid/objects/metaobject 

[rdaniel]

Thanks,

I've read this documentation. But I can't see how it gives information on how to access values from metaobjects that are defined in metafields in example of a product. Might be something I've overlooked though...

[LazaEAG · Accepted solution]

Hi Rdaniel

Try to access all data with {{ product.metafields.namespace.values }} and then iterate through that

{% for metaobject in product.metafields.namespace.values %}
{{ metaobject.field }}
{{ metaobject.field.value }}
{% endfor %}

Maybe it is not clear with those abstract names so here is a small example. 

Let's say there is a meta object Icon with 2 fields Title and Image. To get those we iterate like

        {% assign icons = shop.metaobjects.icon.values %}

        {% for icon in icons %}  
	        <div>
	            <img
	                src="{{ icon.image.value | image_url: width: 45 }}"
	                alt="{{ image.alt | escape }}"
	            >

	            <span>
	                {{ icon.title }}
	            </span>
	        </div>
        {% endfor %}

Try it out.

[Phil_Houghton]

Using @LazaEAG example worked for a metaobject. But I wanted to use the metaobject as a database to store all the colour swatches for different products and select which ones I wanted to show on which product. The code above output EVERY colour swatch in the metaobject. So I made a metafield using the metaobject I had  created as the content type.

That way for each product I can select which colour swatches from the metaobject that I want to display.

Modifying the code slightly for metafield:

{% assign swatches = product.metafields.custom.available_colours_swatches.value %}

                {% for swatch in swatches %}  
                  <div>
                      <img
                          src="{{ swatch.image.value | image_url: width: 45 }}"
                          alt="{{ swatch.name.value | escape }}"
                      >
                      <span>
                          {{ swatch.name.value }}
                      </span>
                  </div>
                {% endfor %}

[haddi]

This should be the accepted solution; thanks!

[ErSanjay]

@LazaEAG   Thanks lot for the answer.

[ErSanjay]

@LazaEAG  I have rich text input in the schema I was able to render the object. 

on page display this object.  but I want to render the HTML code. how I can do that?

{"type"=>"root", "children"=>[{"listType"=>"unordered", "type"=>"list", "children"=>[{"type"=>"list-item", "children"=>[{"type"=>"text", "value"=>"list"}]}, {"type"=>"list-item", "children"=>[{"type"=>"text", "value"=>"list 2"}]}, {"type"=>"list-item", "children"=>[{"type"=>"text", "value"=>"list 3"}]}, {"type"=>"list-item", "children"=>[{"type"=>"text", "value"=>""}]}]}]}

[mcqua007]

You can use this package to convert that rich text AST to HTML.

[switchbladecomb]

Quite late to reply here but for anyone coming to this post now, the best way to convert rich text values from metaobjects and/or metafields is to simply use the metafield_text filter, like so: 

{%- assign rich_text_val = shop.metaobjects.some_metaobject.some_rich_text_input | metafield_text -%}

{{ rich_text_val }}

[switchbladecomb]

I should also mention that using the metafield_text filter will wipe out any formatting you might actually want to maintain in the rich text value. The other option would be to use the metafield_tag filter which keeps formatting like hyperlinks and lists.

[LloydSpencer]

Hi, I'm having an issue with this code where it's getting the data from all products rather than the current product.

I've updated my code to the below:

 {% assign icons = shop.metaobjects.features.values %}

        {% for icon in icons %}  

        <div>

            <span>

                {{ icon.one }}

            </span>

        </div>

        {% endfor %}


I've also tried this but it doesn't work:

{% assign icons = shop.metaobjects.features.values | where: 'product_id', product.id %}

{% for icon in icons %}
<div>
<span>
{{ icon.one }}
</span>
</div>
{% endfor %}

[LloydSpencer]

For any one else struggling with this, I found the solution from another comment below:

{% assign licenses = product.metafields.custom.product_features.value %}
{% for license in licenses %}
<div>
<span>
{% if license.one.value == true %}
Hello One
{% endif %}
</span>
</div>
{% endfor %}



UPDATE: custom.product_features with your Namespace and key
UPDATE: the word 'one' in license.one.value with your metaobjects field name

[studioboskant]

Hi @LazaEAG 
So there is no way to display values from shop.metaobjects per product and not all the values from the website content?
We have to create a product metafield that contains a list of metabobjects instead of having a product metafield per metaobject right?

[Phil_Houghton]

{% assign myfields = product.metafields.custom.namespace.value %}

                {% for myfield in myfields %}  
                  <div>
                      <img
                          src="{{ myfield.key.value | image_url: width: 45 }}"
                          alt="{{ myfield.name.value | escape }}"
                      >
                      <span>
                          {{ myfield.name.value }}
                      </span>
                  </div>
                {% endfor %}

[LazaEAG]

Hi @Phil_Houghton 

First, thank you for sharing examples. And you are right, my example was some global case, I used it for one section with icons and as part of another object that has the same icons. Like you said for the product is slightly different.

[Phil_Houghton]

Thank YOU for pointing me in the right direction. Was frustrated by the lack of documentation and having no luck up until then executing what I needed to do 🙂

[kaymay]

@Phil_Houghton Thank you for this. I didn't have to iterate so I modified your code to make it work for me.

Here is my code for anyone reading this in the future:

{% assign foo = product.metafields.custom.backing.value %}
<div>
  <img src="{{foo.backing_img.value | image_url: width: 200}}">
  <div>
    {{foo.backing_title.value }}
  </div>
</div>

Notes:

*This code works in Custom Liquid sections/blocks

*Replace backing with your metafield name

*Replace backing_img and backing_title with your metaobject's field names

[T_Chord22]

Hi all, I am not sure how this needs to work in other areas of shopify, such as collection page.

Basically I want to create a carousel that populates data from each entry inside of the metaobject created. I followed the above sets, but having 0 success. Below is the following code I have implemented.

{% assign pfilters = collection.metafields.custom.collection_filter.values %}

<div class="row tt-layout-product-item">

{% for pfilter in pfilters %}
{{ pfilters.collectiontitle.value }}
{% endfor %}
</div>

[LazaEAG]

Hi @T_Chord22 

You should try to debug and see where the issue appears.

So first check if {{ collection.metafields.custom.collection_filter.values | json }} is not empty. If it is try with {{ collection.metafields.custom.collection_filter.value | json }}  so without "s" at the end. 

Next step print {{ pfilter | json }}  and also the try with {{ pfilters.collectiontitle }}

[T_Chord22]

@LazaEAG thanks for the reply. I followed your steps above and it seems the only one that returns data is  {{ collection.metafields.custom.collection_filter.value | json }}

This is what it returns: {"collectionimage":"gid:\/\/shopify\/MediaImage\/33168175333688","collectiontitle":"Kitchen"}

This returns: {{ collection.metafields.custom.collection_filter.values | json }} null
This returns: {{ pfilter | json }} null
This returns: {{ pfilters.collectiontitle }} nothing

[LazaEAG]

@T_Chord22 

Sorry now I am guessing a bit but if you see just one filter and you have entered more the try to print  only

{{ collection.metafields.custom.collection_filter | json }}

And if that holds all filters then assign that to pfilters. Also I see mistake now here

<div class="row tt-layout-product-item">

{% for pfilter in pfilters %}
{{ pfilters.collectiontitle.value }}
{% endfor %}
</div>

{{ pfilters.collectiontitle.value }} is wrong, you have to target single filter so 

{{ pfilter.collectiontitle.value }} or {{ pfilter.collectiontitle }}

Try a few things 🙂 and hope you find the right solution.

[KevinWang]

It's worded for me, thanks a lot.

[jacopol]

Hi guys, I'm having a similar issues and don't understand what I'm doing wrong. 

I have a customer metafield containing list of metaobjects. The metafield has namespace custom and key license_new and it references a metaobject of type license which has 2 fields: 

1. reference_product: reference to the product. 
2. license_files: a list of generic files. 

I want to display the list of metaobjects, specifically a link to the reference_product and links to download the related license_files, in the customer account page. I'm attempting to do so using 

      {% assign licenses = customer.metafields.custom.license_new.value %}
      {% for license in licenses %}
        {{ license.reference_product.value }} <br>
      {% endfor %}

This doesn't seem to work and I don't understand why. 

I tried a similar approach with a simpler metafiled of key licenses that only contains a list of generic files. If I try to display the files IDs by doing 

      {% assign licenses = customer.metafields.custom.licenses.value %}
      {% for license in licenses %}
        {{ license.id }} <br>
      {% endfor %}

everything works as expected. 

Can anyone see what I'm doing wrong? Thank you 🙂 

[ErSanjay]

@jacopol @haddi  @LloydSpencer   As per the shopify update we can only access the public metafiled if some app has own meta filed that can't access to the theme file directly but may be different way you can access.

let me know I found this was correct to not?

I have same issue... 

[haddi]

I'm afraid I don't understand your question.