How to use product and variant metafields in your theme

Once you have created your product or product variant metafield, and you have enabled storefront access, it can be queried using GraphQL.

One way to do this would be simply design your query and then make a JavaScript request. The downside of this is that any changes then become "client-side". 

However, there's a better way. A powerful part of stencil themes is the ability to add GraphQL queries to the front matter. When you do this, BigCommerce makes the response to this request available server-side. This means you can use GraphQL data within your template. 

For example, this query will search for a metafield with key "space_48" and key "test_content" within the current product. By adding it to the theme front matter a new object will be available for access in the template, e.g. gql.

---
product:
    videos:
        limit: {{theme_settings.productpage_videos_count}}
    reviews:
        limit: {{theme_settings.productpage_reviews_count}}
    related_products:
        limit: {{theme_settings.productpage_related_products_count}}
    similar_by_views:
        limit: {{theme_settings.productpage_similar_by_views_count}}
gql: "query productMetafieldsById($productId: Int!) {
  site {
    product(entityId: $productId) {
      entityId
      name
      metafields(
        namespace: \"space_48\"
        keys: [\"test_content\"]
      ) {
	edges {
	  node {
            key
            value
          }
        }
      }
      variants {
        edges {
          node {
            metafields(
              namespace: \"space_48\"
              keys: [\"test_content\"]
            ) {
              edges {
            	node {
                  key  
                  value
            	}
              }
            }
          }
        }
      }
    }
  }
}
"
---

Assuming that this was raw HTML then it could be outputted at the top of the page by adding this to the category.html template and using triple braces `{{{ }}}`:

{{#each gql.data.site.product.metafields.edges}}
    {{{node.value}}}
{{/each}}
{{#each gql.data.site.product.variants.edges}}
    {{#each node.metafields.edges}}
        {{{node.value}}}
    {{/each}}
{{/each}}

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

{{#each gql.data.site.product.metafields.edges}}
    {{#eq node.value "Yes"}}
         The flag was enabled for this product.
    {{/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.site.product.metafields.edges}}
    {{#if node.key '===' "test_flag" and node.value '===' "Yes"}}         
        The flag was enabled for this product.
    {{/if}}
    {{#if node.key '===' "test_content"}}
        {{{node.value}}}
    {{/if}}
{{/each}}