Using App-Owned metafields in Schema Settings

Using App-Owned metafields in Schema Settings

ozzyonfire
Shopify Partner
49 2 17

I am creating an app-owned metafield of type 'json' from my app. Using the instructions found here. 

https://shopify.dev/apps/custom-data/metafields/app-data

 

I am trying to bring in some app-specific settings to my app-extension block. 

 

So in the block.liquid extension I have a simple schema set up as;

{% schema %}
  {
    "name": "App Block",
    "target": "section",
    "javascript": "bundle.js",
    "settings": [
      { 
        "label": "Color", 
      "id": "color", 
      "type": "color", 
      "default": "#000000" 
      },
      {
        "label": "Options",
        "id": "Options",
        "type": "select",
        "options": {{ app.metafields.namespace.key.options }},
      }
    ]
  }
{% endschema %}

 

Where my "app.metafields.namespace.key" is a json metafield with the structure of 

{
  "options": [{ value: "1" label: "One" }]
}

 

Is it not possible to include app metafields as properties to the schema?

If not, is there anyway to "pull" data down to use in my app-block (which is app-specific information) to use in the schema settings?

 

When I try to push this schema through on the app-extension (shopify-cli) I am getting a parsing error on the schema. 

 

blocks/app-block.liquid
  - Cause: [blocks/app-block.liquid] Invalid tag 'schema': Unable to parse 'schema' content

 

Thanks!

Replies 3 (3)

EcomGraduates
Shopify Partner
632 52 90

hello there  

 

Yes, it is possible to include app metafields as properties in your schema settings. However, the way you are referencing the metafield in your schema code may be causing the parsing error.

To include an app metafield in your schema settings, you can use liquid code to retrieve the metafield value and pass it as an option to the select field. Here's an example of what the code might look like:

 

{% schema %}
  {
    "name": "App Block",
    "target": "section",
    "javascript": "bundle.js",
    "settings": [
      { 
        "label": "Color", 
        "id": "color", 
        "type": "color", 
        "default": "#000000" 
      },
      {
        "label": "Options",
        "id": "options",
        "type": "select",
        "options": [
          {% for option in app.metafields.namespace.key.options %}
            { "value": "{{ option.value }}", "label": "{{ option.label }}" },
          {% endfor %}
        ]
      }
    ]
  }
{% endschema %}

 


If this fixed your issue, likes and accepting as a solution are highly appreciated.

Build an online presence with our custom built Shopify Theme EcomifyTheme



vikram_bn
Shopify Partner
1 0 0

I am having this same issue, tried the above method but getting "invalid schema" error. Metafield used is an array of the form [{"value": "", "label": ""}]. The schema is as follows. is it allowed to use for loop inside the schema section?

{% schema %}
{
  "name": "Recommended Products",
  "target": "section",
  "javascript": "script.js",
  "settings":[{
    "type": "select",
    "id": "recommender",
    "label": "Select Recommender",
    "options": [
      {
        "value": "all",
        "label": "ALL"
      },
      {% for option in app.metafields.goblitzRecommendersSpace.goblitzRecommendersKey.value %}
        {% if forloop.index == forloop.length %}
          { "value": "{{ option.value }}", "label": "{{ option.label }}" }
        {% else %}
          { "value": "{{ option.value }}", "label": "{{ option.label }}" },
        {% endif %}
      {% endfor %}
    ],
    "default": "all"
  }]
}
{% endschema %}

 

Shopify customization and app developer
Matiss1
Shopify Partner
7 0 3

Hello!

Did you manage to solve this? Currently having the very same issue, doesn't seem to be too much documentation around using Liquid inside the schema.

Even tried Shopify's example of using the featured product: https://shopify.dev/docs/themes/architecture/settings/dynamic-sources but that also didn't work and threw an error.

Thanks!