How do you make shopify metafields visible on the saleschannels - in Bulk

Context:

The merchant is moving from liquid to headless store. All the features of the liquid store has to be implemented to the Hydrogen store.

Problem:

The liquid store is using a lot of product and variant level metafields(about 450). All these metafields are created by some some public app, and all of them are unstructured. These metafields are not visible on the new sales channel(Hydrogen).
The task is to make all of them visible on the Hydrogen sales channel.

Solution:

Use Shopify Admin GraphQL API and Postman to make them visible on all the sales channels.
Use Postman’s “Bulk collection” feature to repeat the same request across for a log of metafields.

Shopify API: https://shopify.dev/docs/api/admin-graphql/2024-01/mutations/metafieldStorefrontVisibilityCreate

Implementation:

Prerequisite:

• You know how to make authenticated admin request to shopify Admin GraphQL API. https://shopify.dev/docs/api/admin-graphql#authentication

• You know how to create a custom app from Shopify Admin, you will need this to generate an access token to be used while making API request to Shopify

• You know how to create request in Postman and how to set Headers values for that request

• You know little bit about how to use variables in the Postman

Step 1
Create a Postman request to make metafield visible on the storefront. We do it for only one metafield, and then we use this query to create a “Bulk collection” in the next step.

Following are the details to create new request:

https://{{store_name}}.myshopify.com/admin/api/{{api_version}}/graphql.json

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

{
    "input": {
        "key": " weight_density",
        "namespace": "tile_info",
        "ownerType": "PRODUCT"
    }
}

Explanation:
and are postman variables.
Value for will be the shopify store you are using, and the value of will be 2023-10 in our case.
It’s a POST request.
The body is a GraphQL query
The Query part will be same, but for the Input part, replace the key, namespace and ownerType with something that applies to your use case.

Here is how it looks in the Postman.

Now try this to ensure if the query is working.

Step 2:
Now we will create a new collection in postman and setup the Bulk collection query. There will be multiple things here to configure. We will see each of them here.

Create a new Collection and then create a following request inside it. And also add the required headers for making admin API call to Shopify.

https://{{store_name}}.myshopify.com/admin/api/{{api_version}}/graphql.json

{
  "query": "mutation metafieldStorefrontVisibilityCreate($input: MetafieldStorefrontVisibilityInput!) {   metafieldStorefrontVisibilityCreate(input: $input) {     metafieldStorefrontVisibility {       key       id     }     userErrors {       field       message     }   } }",
  "variables": {
    "input": {
        "namespace": "{{param1}}",
        "key": "{{param2}}",
        "ownerType": "PRODUCT"
    }
  }
}

Explanation:
Here in above json we have two kind of data: “query” and “variable”.
The “query” is responsible of making metafield visible on the storefront, while the “variables” is for providing inputs in bulk.

Don’t get confused, the operation that we want to perform is “mutation” and the “query” is way to telling that the value of “query” will get executed with data from the “variables”.

Let’s come to the “variables”. You have noticed that inside the “variables” we have and . Both of these values are Postman specific thing. This is the way to tell postman that, replace these values as per the given data. We will prepare this data in a csv file.

Here is the summary of what we have done so far:

Now, we will prepare a csv file with all the metafields inside it. we will prepare one csv file with two columns. This image will be helpful to understand about how to prepare the csv

Download this file somewhere in your disk, we will use this in the next 🚀. Now the remaining steps are some clicks and I will add screenshots of these steps here.