add metafields to product shopify

Question

I have added product metafields to my shopify and is giving success response but are not displayed on the product details. here is my nodejs code which is giving success response.

const response = await fetch(`https://mystore.myshopify.com/admin/api/2020-07/products/5709040025760/metafields.json`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            "X-Shopify-Access-Token": accessToken,
          },
          body: JSON.stringify({
            "metafield": {
              "namespace": "type",
              "key": "type",
              "value": "test type",
              "value_type": "string"
            }
          })
        })

        const responseJson = await response.json();

Basically, I want is when user/customer click on product there should be a new field in product that is type. Can anyone help me how to display it.

Meta fields are not visible automatically. Use some Shopify App if you want to view and edit on Shopify admin. For frontend, you can show the values using Liquid in your templates. — Bilal Akbar
Hi Bilal, The thing I want is to display a feild to product details but I want to do it using API. Is there any solution that we handle all this using API. — Sidra Asghar
If you tell me where do you want to display, then I may be able to help you better. Once you add a meta field, where do you want to display it ? Shopify Admin, Shopify website or some custom App ? — Bilal Akbar
Ok, let me tell you the exact scenario. Actually I want to add a field to checkout page, but I know that is only available in PLUS account so for now I was checking can I add a field to product like pruduct_type where when customer opens the app and click on the product and details are shown I want a field there. — Sidra Asghar
You are right about the Plus account part. So to display it on product page simply use metafields property on product object. — Bilal Akbar

Bilal Akbar Bilal Akbar · Accepted Answer · 2020-10-06T11:33:49

The metafields object allows you to store additional information for products, collections, customers, orders, blogs, pages and your shop.

In your case, you have already created Metafield and now just want to display it on product page. To do so, you need to use metafield property on Product object. To access the metafield that your code created, add the following code to product page in Shopify theme.

{{product.metafields.type.type}}

The first type is your namespace while the type after that is field name.

To read more about how to add, edit and display Metafield, follow Shopify Docs for Metafields.

For Shopify Plus account, Yes it is possible to add fields. But you will not be able to access the Shopify form elements in Liquid as those are rendered via tag. However, you can add custom JS file. So on page load, anything is possible.

You can have a look at basic docs for editing checkout.liquid. However, to edit checkout forms and things like that, it is mostly JavaScript with plenty of answers on StackOverflow.

add metafields to product shopify

1 Answers