Parsing JSON data in Shopify Liquid templates from metafields

Other Questions Shopify
1

Hey everyone, I’m stuck with a Shopify Liquid template issue. I’ve set up a metafield for my suppliers page, but I can’t seem to access the JSON data properly. Here’s what I’ve done:

  1. Created a metafield named suppliers_details with key suppliers
  2. Added JSON data for supplier info (names and addresses)
  3. Tried to loop through the data in my Liquid template

Here’s a simplified version of my template code:

{% assign supplier_data = page.metafields.suppliers_details.suppliers %}
{% for supplier in supplier_data %}
  <p>{{ supplier.name }}</p>
  <p>{{ supplier.address }}</p>
{% endfor %}

But it’s not working. The template can’t seem to iterate through the JSON data. Is there a way to make this work? Or am I missing something obvious?

Any help would be appreciated. Thanks in advance!

2

hey luke, i’ve run into this before. make sure ur json is valid first. try using an online json validator. then, use the json filter like this:

{% assign supplier_data = page.metafields.suppliers_details.suppliers | json %}

that should do the trick. if it still doesn’t work, double check ur metafield namespace and key. good luck!

3

I’ve dealt with this exact problem before. The key is to use the json filter, but you also need to ensure your metafield is set up correctly. Double-check that you’ve selected ‘JSON string’ as the metafield type when creating it in Shopify admin. If it’s set as plain text, Liquid won’t parse it properly.

Another tip: for debugging, try outputting the raw metafield content first:

{{ page.metafields.suppliers_details.suppliers }}

This will show you exactly what’s stored in the metafield. If it looks correct, then the issue is likely in the parsing or iteration. Also, remember that Shopify’s metafield character limit is 5000 for JSON strings. If your data exceeds this, you might need to split it into multiple metafields.

4

I encountered a similar issue when working with JSON data in Shopify metafields. The problem is that Liquid doesn’t automatically parse JSON stored in metafields. You need to use the json filter to parse it first.

Try modifying your code like this:

{% assign supplier_data = page.metafields.suppliers_details.suppliers | json %}
{% for supplier in supplier_data %}
  <p>{{ supplier.name }}</p>
  <p>{{ supplier.address }}</p>
{% endfor %}

This should parse the JSON string into an object that Liquid can iterate over. If you’re still having trouble, double-check that your JSON is valid and properly formatted in the metafield.

Also, make sure you’re using the correct metafield namespace and key. Sometimes it’s easy to mix those up. Hope this helps!

5

I’ve been there, Luke. JSON in Shopify metafields can be tricky. One thing that helped me was using the ‘debug’ filter to see what’s actually in the metafield:

{{ page.metafields.suppliers_details.suppliers | debug }}

This will output the raw data, which can be super helpful for troubleshooting. If it looks good, then yeah, use the ‘json’ filter like others mentioned. But here’s another gotcha - make sure your JSON is properly escaped in the metafield. I once spent hours debugging only to realize my quotes weren’t escaped correctly.

Also, if your JSON is complex, you might need to use the ‘first’ filter in your loop:

{% for supplier in supplier_data %}
{% assign sup = supplier | first %}

{{ sup[1].name }}

{{ sup[1].address }}

{% endfor %}

This worked for me when dealing with nested JSON. Good luck, and don’t hesitate to ask if you need more help!