How To Access JSON Data from the New Shopify Native Metafields

andrewNet
Tourist
4 0 17

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?? 

 

Replies 5 (5)

andrewNet
Tourist
4 0 17

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! 
Tim_Powell
Shopify Expert
26 1 10

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]}}

Meta - Growing Shopify Giants
meta.co.uk
Adel-Kazem
Shopify Partner
1 0 0

Thank you very much just helped a lot

LitExtension
Shopify Partner
4860 1001 1133

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

itsanolive
Shopify Partner
21 0 10

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