How to use channel metafields in your theme

After you create a channel metafield and enable storefront access, you can query it with GraphQL.

You can send the query from JavaScript, but changes made this way are client-side.

info

We recommend testing new GraphQL queries in the Storefront API playground first.

However, Stencil themes can run GraphQL queries in front matter. BigCommerce makes the response available server-side, so you can use the GraphQL data in your template.

For example, this query searches the megamenubuilder namespace for the top-navigation key. Adding it to the theme front matter makes the response available as gql in the template.

---
category:
    shop_by_price: true
products:
        limit: {{theme_settings.categorypage_products_per_page}}
gql: "query channelMetafields() {
    channel {
        metafields(namespace:\"megamenubuilder\",keys: [\"top-navigation\"]) {
            edges {
                node {
                    key
                    value
                }
            }
        }
   }
}
"
---

If the metafield contains raw HTML, render it in the category template with triple braces ({{{ }}}):

<div class="page-content" id="product-listing-container">
    {{#each gql.data.channel.metafields.edges}}
        {{{node.value}}}
    {{/each}}
    {{> components/category/product-listing}}
    {{{region name="category_below_content"}}}
</div>

Alternatively, if the metafield was used to enable/disable functionality per channel. It could be checked within a condition like so:

{{#each gql.data.channel.metafields.edges}}
    {{#eq node.value "Yes"}}
       The flag was enabled for this channel.
    {{/eq}}
{{/each}}

If you have more than one metafield key selected in your query, you can perform a check based on key name:

{{#each gql.data.channel.metafields.edges}}
    {{#and (if node.key '==' "test_flag") (if node.value '==' "Yes") }} 
       The flag was enabled for this channel.
    {{/and}}
    {{#if node.key '===' "test_content"}}
        {{{node.value}}}
    {{/if}}
{{/each}}