Access Metaobject JSON data in liquid

Online Store and Theme Development
1

I am having trouble accessing the values in a liquid variable. I am wondering if anyone here can help.

Below is the code I am deploying.

{% assign configuration = shop.metaobjects.app--6230545--izigift_storefront_campaign.new_campaign.configuration %};
{% assign isActive = configuration.active %}

<script>
    window.config = {{ configuration }};
    window.isActive = {{ isActive }};
</script>

This is in a liquid file in my app embed block.

When I try to access these variables in the console I can access the window.config, I get:

configuration = {
    "active": true
}

But when I then try to access window.isActive I get back undefined.

The same happens if I do:

{% assign isActive = configuration['active'] %}
or
{% assign isActive = configuration['active'].value %}
or
{% assign isActive = configuration.active.value %}

Any help or thoughts would be appreciated.

2

Hi! Try using the method I’ve shared below.

<script>
  window.config = {{ configuration | json }};
  window.isActive = {{ configuration.active | json }};
</script>
3

I dont see anything here

4

Sorry it’s my mistake

<script>
  window.config = {{ configuration | json }};
  window.isActive = {{ configuration.active | json }};
</script>
5

When i do

 window.config = {{ configuration | json }};

I get the following error:

{error: 'json not allowed for this object'}

isActive is now null instead of undefined

6

Hi @talktohenryj

To access the value of a JSON metafield as liquid objects you must use this syntax

jsonMetafield.value.yourObjectProperty

so in your example it would be

{% assign configuration = shop.metaobjects.app--6230545--izigift_storefront_campaign.new_campaign.configuration.value %}
{% assign isActive = configuration.active %}

Try that and let me know if it solved it !

7

Good question — and you’re super close! Here’s the key issue:

In Liquid, when you do:

{% assign isActive = configuration.active %}

Liquid itself doesn’t parse nested metaobject fields directly like that — especially if configuration is a JSON object output into your JavaScript, not a Liquid object with accessible properties.

So what’s happening is:

  • window.config works because you’re outputting the whole configuration as JSON into your JavaScript.
  • But isActive in Liquid is likely coming out as blank because Liquid isn’t resolving configuration.active as a Liquid-accessible property.

:white_check_mark: Simple, clean fix:
Skip the Liquid assignment and just pull it from window.config in JavaScript like this:

console.log(window.config.active);
window.isActive = window.config.active;

So in your embed block, just do:

{% assign configuration = shop.metaobjects.app--6230545--izigift_storefront_campaign.new_campaign.configuration %}

<script>
    window.config = {{ configuration | json }};
    window.isActive = window.config.active;
</script>

Note:
Also — when outputting configuration to JS, you should use the | json filter to safely convert it to valid JSON:

window.config = {{ configuration | json }};
8

Yea, this seems to have been the issue. I did what you’re saying here and it worked.

{% assign configuration = shop.metaobjects.app--6342865--izigift_storefront_campaign.cashback_reward.configuration.value %};
{% assign isActive = configuration.active %};

Thanks!