Hydrogen: How to Expose Shopify Metafields to Storefront API

The option to add custom metafields to different objects in Shopify like Product, Variant, and Order has been around for years. However, until recently it was only possible to create or manipulate metafields by utilizing the Admin APIs or by using a third-party app (that uses the APIs under the hood). Luckily, a lot of progress was made in the past few months on enabling Shopify store managers to define and update custom metafields directly via the shop admin.

The improved metafields visibility is particularly powerful when combined with the updated Online Store Editor, Sections Everywhere and Dynamic sources. Site managers now have the flexibility to easily add dynamic content to different storefront pages without the need to have technical skills or rely on apps to manage the store metafields.

Shortly after the improved metafields user interface went live in the Admin, the developer preview of Hydrogen was also released. Hydrogen is Shopify’s opinionated framework for building headless commerce stores. It uses the Storefront API to connect and fetch data from the store database.

By default, the Storefront API doesn’t have access to metafields. This is actually a good thing as many first or third-party apps often create their own metafields to store custom data. Some of the information may be sensitive and not necessarily something that should be directly retrievable with the Storefront API. If needed, there was the option to create a MetafieldStorefrontVisibility record to expose any specific metafield.

However, it is now possible to give the Storefront API requests access to any metafield directly via the Admin.

This can be done by going to Admin > Settings > Metafields. Then, select the metafield you would like to expose to the Storefront API and check the “Give access to Storefront API requests” box:

Give Shopify Metafield Access to Storefront API Requests

Unchecking the box revokes access to the metafield. This setting is on the metafield level and has to be enabled for every metafield that needs to be retrievable via the API.

Thanks for reading! Would love to hear any thoughts or questions you may have about this article. Feel free to reach out @allthings_c on Twitter.