Unable to access app-data metafield properties in Liquid

[abdullahc]

Hi everyone,

I'm working on an embedded app which I used Remix App template and trying to access metafields in a Liquid template. I've successfully created metafields in the `abc_app_test` namespace with `json` type, and I can see the metafields being returned correctly when I log the settings object in the console. However, I'm unable to directly access the metafield properties using Liquid dot notation like {{ settings.enableHomepageWidget }}.

Here's the Liquid code I'm using:

{% assign settings = shop.metafields.abc_app_test.settings %}

<!-- Debugging -->
<script>
  console.log('Settings Object:', {{ settings | json }});
</script>

<!-- Trying to access enableHomepageWidget -->
<p>enableHomepageWidget: {{ settings.enableHomepageWidget }}</p>

{% if settings != blank %}
  {% assign enableHomepageWidget = settings.enableHomepageWidget %}
  {% if template.name == 'index' and enableHomepageWidget == "enabled" %}
    <script>console.log('enableHomepageWidget is enabled');</script>
  {% endif %}
{% endif %}

Issue:

• I can see the full settings object in the console, and it contains the enableHomepageWidget metafield.
• However, when I try to access {{ settings.enableHomepageWidget }}, nothing is returned.
• I've tried accessing {{ settings.enableHomepageWidget.value }} but that didn't work either.

Despite all these steps, I’m unable to access the specific metafield values in Liquid.

I read the Shopify Documentation and also all of the similar issues posted here before but none of them solved my issue.

Is there something I’m missing with how metafields are accessed in Liquid?

Thanks in advance for any insights!

[abdullahc]

Update 1:

In the main message, I mentioned that I created the metafield as `json` type. So I can reach the main object but the properties. Now I tried to create another 2 metafields:

- `testBooleanField` with `true` value (boolean type)

- `testStringField` with `enabled` value (single line text type)

I am able to access those new two metafields by using `settings.testBooleanField.value` and `settings.testStringField.value`. Both are working. Looks like the problem is with `json` type.

Is there a different way to access `json` type metafield properties?

Thanks in advance!

[SomeUsernameHe]

I think you might be looking for the json filter. Give this a try:

<script>console.log({{ shop.metafields.abc_app_test.settings | json }});</script>

Reference: https://github.com/Shopify/liquid/issues/432

[abdullahc]

Hi @SomeUsernameHe 

Thank you for your suggestion. I tried that before but nothing has changed. Without json filter, I can see `settings` object on the console but with json filter, nothing is printed.

I tried both:

{% assign settings = shop.metafields.abc_app_test.settings | json %}

{{ settings.enableHomepage }}

and

{{ settings.enableHomepage.value }}

 but didn't work.

Thanks again

[abdullahc · Accepted solution]

Update 2:

I tried the following and it worked:

{% assign settings = shop.metafields.abc_app_test.settings %}

{{ settings.value.enableHomepage }}

or

{% assign settings = shop.metafields.abc_app_test.settings.value %}

{{ settings.enableHomepage }}

I just don't get why json filter doesn't work.