How To Access JSON Data from the New Shopify Native Metafields

Technical Q&A
1

So the new shopify native metafields are awesome, and I see that it allows me to create a data type of JSON, but I’m having trouble accessing the JSON data in my theme code with liquid…

I created a new metafield called product.metafields.my_fields.foobar, and on a product I gave it a value of:

{

“color”: “blue”,

“age”: “12”,

“size”: “large”

}

In my product.liquid code, {{.product.metafields.my_fields.foobar }} will successfully print { “color”: “blue”, “age”: “12”, “size”: “large” } in the browser (as a string) but…

How can I access individual items? For example, how can I just print “blue” in the browser? I tried {{product.metafields.my_fields.foobar.color }} and {{product.metafields.my_fields.foobar[color]}} but those print nothing.

I’ve used the “accentuate” app in the past and the above method works perfectly. How can I achieve this with the shopify native metafields??

2

I figured it out, the answer is:

{{ product.metafields.my_fields.foobar**.value**.color }}

I’ll leave this post up because I’m sure I’m not the only one who will run into this problem!

3

You can refer https://shopify.dev/api/liquid/objects/metafield#access-metafields
Hope it helps!

4

Thank you @andrewNet

I too wasn’t able to access properties like the old JSON metafield type.

This resolved it for me as well.

{{ object_type.metafields.namespace.key.value…[now you can access your json object here]}}

5

Also, if you want to use a liquid variable as the key, you can pass it inside square brackets: {{ product.metafields.namespace.foobar[someVariable] }}

6

Thank you very much just helped a lot