How to use JSON data in Shopify liquid code

Published Date: December 17, 2020

How to use JSON data in Shopify liquid code

In the 11th article of the #4weeksOfShopifydev challenge, I'll be talking about how to use JSON data in Shopify liquid code.

In Shopify Liquid template language, they don't support JSON or objects (not product object), I have a tip  use it in Liquid.

  • First, we need to install Metafields Guru app to create metafields
  • Create new metafield under Shop settings

How to use JSON data in Shopify liquid code

Select JSON string as type and type data as key

How to use JSON data in Shopify liquid code

  • Use this JSON sample data
[ { "firstName": "Ilias", "lastName": "Haddad", "email": "contact@iliashaddad.com" } ]
  • To consume this JSON data in Liquid, you can use this code snippet to render this JSON data
{% assign users = shop.metafields.global %} {% for user in users.data %} {{ user.firstName}} {{ user.lastName}} {{ user.email}} {% endfor %}

In this sinppet, we assign the global namespace metafield to users variable

{% assign users = shop.metafields.global %}

And we loop over the array of object in JSON by accessing the data key metafield

#4WeeksOfShopifyDev

Related Posts

Convert your Shopify store to PWA for better performances (conversion)
#4WeeksOfShopifyDev

Convert your Shopify store to PWA for better performances (conversion)

December 31, 2020

On the 16th of the #4WeeksOfShopifyDev challenge, I’ll be talking about Why you should convert your Shopify store to PWA for better performance?

What benefits of being a Shopify partner and make money using it?
#4WeeksOfShopifyDev

What benefits of being a Shopify partner and make money using it?

December 24, 2020

Why developers should invest in learning the Shopify App or Theme development?
#4WeeksOfShopifyDev

Why developers should invest in learning the Shopify App or Theme development?

December 21, 2020

Let's Build Something Together

Feel free to reach out if you're looking for a developer, have a question, or just want to connect.

Email:contact [at] iliashaddad.com