How to get product metafields through Shopify's Storefront API

I ran into a problem where I could not get product metafields to return in the Shopify storefront API. This is important, since I plan to use these metafields on the product page of my headless Shopify build. I resolved the issue in a more digestible way than what is on the official Shopify documentation. So here is my simplified approach.

This tutorial is assuming that you already have storefront API access for your Shopify store.

Step 1: Enable storefront access of metafields through Shopify Admin

Go to settings > custom data > products in your Shopify admin. Here you will be able to see your metafields like so:

Click on a metafield you wish to enable in the storefront API, and enable the Storefronts access button near the bottom. Repeat this for any additional metafields you wish to access.

Step 2: Obtain namespace and key of desired metafields

Go to the same page as above: settings > custom data > products . If you look to the image for step 1, you will see the smaller gray text. This text contains your namespace and key.

For example, if the text is product.metafields.my_fields.description , your namespace will be my_fields and your key will be description . You will need these for the API call in the next step.

Step 3: Make the API call to retrieve metafields

Now you can make your API call to the storefront API. Your call to the storefront should like so:

query ProductMetafields{
  product(id: "your product id") {
    title
    metafield(namespace: "my_fields", key: "description") {
      value
    }
  }
}

This API call will now return your desired metafields. Hope this helped!