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

In Shopify the default visibility of metafields is hidden(for other sales channels) when it is created using some app. And doing it manually is time consuming, But there is an easier way, read this article for full details.

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.

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.

Postman request to change the storefront visibility of metafield

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:

Postman request as a part of Bulk collection

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

csv file

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.