Custom Shopify Product Metafields – Without An App

  • by

Shopify is a great e-commerce platform for many reasons, its simplicity, excellent consumer experience, and themes. However, when it comes to adding a specific feature or detailed customization you are often required to add an external app from the Shopify App Store. I was recently asked to add nutritional information to products for a client’s Shopify store and wanted to see if it was possible without adding yet another app! This is where Shopify product metafields can be used.

As can be seen in the Shopify Doc’s it recommends heading to the App Store to find an app suitable for accessing these fields. But we want to access this data this without and app!

Custom Shopify Product Metafields

First of all, we are going to make use of the Shopify Bulk Editor. This editor is used as a spreadsheet to quickly update product information. However, when accessing the Bulk Editor through the Shopify dashboard, as described via the Doc’s, you only have access to certain meta fields. Plus there is no option to add custom fields.

Instead of just accessing the product meta fields from the dashboard we are going to use a direct URL. This accesses all of the products and allows us to create new metadata. See URL below.

https://my-shop.myshopify.com/admin/bulk?resource_name=Product&edit=metafields.global.nutrition_kj,metafields.global.nutrition_fats

Breaking down the Bulk Editor Metafield URL

The URL above is great, but we need to understand what is going on to use it effectively.

https://my-shop.myshopify.com/admin/bulk?resource_name=Product&edit=metafields.global.nutrition_kj,metafields.global.nutrition_fats

my-shop                #Replace this with your shopify shop name
.myshopify.com/admin  #Accessing your Shopify Admin Dashboard - you must be logged in
/bulk?                #Access the bulk editor and pull variables
resource_name=Product #Variable to pull, in this case Products 
&edit                 #Allows editing of the variable, which in our case is the Product 
=metafields           #What we are going to Edit, Product metafields
.global               #Selects all of the products to be edited
.nutrition_kj         #Metafield to be created/ Edited
,                     #Comma used to add multiple metafields to bulk editor

If you are logged into your Shopify admin dashboard why not give it a test.

https://myshop.myshopify.com/admin/bulk?resource_name=Product&edit=metafields.global.nutrition_kj

Replace “my-shop” with your Shopify shop name and change “nutrition_kj” to a meta field you might be interested in adding such as “wash_temp” if your product requires washing at a certain temperature.

Custom Product Metafields Create
Metafields created, in this case Nutrition kj

Once you enter the URL you should see the bulk editor as above with all of your products shown. This creates the option to save information about each product. Go ahead and enter in your custom product metafield data.

Custom Product Metafields Edit
Custom Product Metafields Data Added

As you can see the Bulk editor pops up with a save option. Make sure you save your custom product metafield data each time you add it to a product.

Add More Custom Metafield Data

Now you can add more product data by changing the metafield name, or adding another metafield option. For example Nutrition fats using the original URL.

https://my-shop.myshopify.com/admin/bulk?resource_name=Product&edit=metafields.global.nutrition_kj,metafields.global.nutrition_fats
Custom Product Metafields Second Option
Add A Second Option

Show the Metafield Data On The Product Page

Once you have added all of the custom Shopifu product metafield data that your products require it’s time to add them to the site.

If you work with a web developer we suggest asking for their help at this point.

Click Online Store in the Admin navigation and then themes. On the current theme select the Actions drop-down and click Edit Code.

Once you are in the theme code editor you have to find the product view template. I am working with the Brookyln theme for my client so this is found under Sections and click on product-tempalate.liquid. See screenshot below.

Edit Product View Code to Show Metafield Data

We are now going to insert this code just below the Product description to check that it is working. If you are also using the Brooklyn code head down to around line 245 and find {{ product.description }}.

Enter your metafield data using the code shown below, replacing nutrition_kj with your metafield name.

Nutrition KJ: {{ product.metafields.global.nutrition_kj }}
Insert Metafield Data onto the product view page

Save the file and head to your product page. You should now see your metadata appear on each product page.

But this will cause errors if we leave the code like this. Make sure you wrap your code in an if statement to check that the data has been added before showing the custom Shopify product metafields data.

{% if product.metafields.global.nutrition_kj != '' %}
    Nutrition KJ: {{ product.metafields.global.nutrition_kj }}
{% end %}
Add IF Statement To Metafield

Now you have your custom product metafields added to your store you can continue to add them and place them where they are required for your customers using more html and CSS.

A Few More Points

You can also add and update metafields for Page, Collection, Blog and Article as well as Product. Change the resource_name= value and you can add metafield data where you require it.

I hope that this guide helps with your custom Shopify product metafields, please leave a comment if you would like to know more!

Please note that this method is not officially supported by Shopify and my change at any time.

Huge thanks to Jody Edgar after coming across this great article on Metafields in Shopify.

Leave a Reply

Your email address will not be published. Required fields are marked *