How to use JSON data in Shopify liquid code.

Ilias Haddad - Shopify Developer | Full Stack Developer | Freelancer

December 15, 2020 - 1 min read

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

Subscribe below to get notified of new posts.
Your comment
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.

© Ilias Haddad 2020. All rights reserved.

Made with ❤️ in Morocco 🇲🇦