How to add metafield to storefront API using Admin API

This example shows how to add metafield to storefront.

Prerequisites

1. Must have admin access to store
2. Install this app to your store from this link
3. Enter your store url and select Admin API Products write scope and click install. Please refer the screenshot below
   
4. After installing it will be redirecting you to Shopify GraphiQL App Like below screenshot
   

Steps

1. Open Shopify GraphiQL App
2. Select Admin API from dropdown
3. Paste below query in left side

mutation metafieldStorefrontVisibilityCreate($input: MetafieldStorefrontVisibilityInput!) {
  metafieldStorefrontVisibilityCreate(input: $input) {
    metafieldStorefrontVisibility {
      key
      namespace
    }
    userErrors {
      field
      message
    }
  }
}

4. In the leftside Variables block paste below code. In the json below you can change the key and namespace as per your requirement.

{
  "input": {
    "key": "custom", // you need to change this
    "namespace": "images_list", // you need to change this
    "ownerType": "PRODUCT"
  }
}

Important Note

In the json above you can change the key and namespace as per your requirement.

5. Click on play button. Then you will get a response like below.

{
  "data": {
    "metafieldStorefrontVisibilityCreate": {
      "metafieldStorefrontVisibility": {
        "key": "custom",
        "namespace": "images_list"
      },
      "userErrors": []
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 10,
      "actualQueryCost": 10,
      "throttleStatus": {
        "maximumAvailable": 1000,
        "currentlyAvailable": 990,
        "restoreRate": 50
      }
    }
  }
}

Example:

1. For Judgeme reviews you need to enable below metafields

Key	Namespace
rating_count	reviews
rating	reviews

2. For Loox reviews you need to enable below metafields

Key	Namespace
avg_rating	loox
num_reviews	loox