With the updated version of Shopify Store, i.e. Online Store 2.0, Shopify merchants have many ways to improve their store design and the customer shopping experience. As a store owner, you can design your own web page templates for products, collections, blogs, etc., and also define your own metafields to show customized store content.
Here, you will learn about how to create Shopify metafields and display metafield values in your store. Also, know how to use Shopify metafields to display images on your store.
Shopify 2.0 Metafields Overview
The Shopify Metafields lets you save additional information about your products, variants, collections, customers, orders, blogs, and many more in your store. For example, you may need to attach a user manual (that users can download) for electronic products on the product page.
By default, Shopify offers you great data storage in your store admin, but that’s common for all the stores. Therefore, using Shopify 2.0 Metafields you can store unique data about any object you want in your store.
After creating metafields, you can attach them to your products, customers, collections, or orders as unique attributes and use them anywhere to customize your Shopify store design.
Old VS New Shopify Metafields
Old Shopify Metafields
Earlier, there was no in-built metafield feature available in Shopify. We had to use Shopify liquid code or install a third-party Shopify App (offering metafields) to add and manage metafields.
Creating metafields using liquid code is quite complicated, so you need to hire Shopify experts in case you don’t have technical knowledge.
New Shopify 2.0 Metafields
Now, Shopify has its in-built metafield feature in the store admin for the store owners or Shopify merchants. Therefore, you don’t need to spend extra money on hiring Shopify experts or using any third-party Shopify App for metafields.
Log in to your store admin and go to the Settings, you will find the Metafields card there.
Types of Shopify Metafields
Shopify metafields are basically categorized based on the places where they can be used such as Products, Variants, Collections, Customers, and Orders.
The Collections, Customers, and Orders are not active yet, but we can define metafields to Products and Variants.
Shopify Product Metafields
With product metafields, you can build complex page designs to enhance the user interfaces based on the product types. The product metafields are used to store additional product information. Here, you can define metafields like product specifications, size charts, user manuals, badges, and many more.
Shopify Variant Metafields
The Shopify variant metafields are used to store additional information related to the product variants such as color swatches, fabric prints, flavors, etc. You can show these metafields on the product page as product variants in a better way.
The below picture will demonstrate the use of variant metafields.
Shopify Collection Metafields
The collection metafields are used to store additional information about the collections. You can either attach additional collection descriptions or build brand profiles for collections using the Shopify collection metafields.
Here is one of the best examples of collection metafields:
Source: Samsung store on Amazon
Shopify Customer Metafields
You may need to show the special deals to your customers based on their preferences. The customer metafields are used to store additional customer information.
Here, you can define metafields such as customer’s birthdate, gender, marital status, and many more. You can also use the customer metafields to create customer profiles.
Shopify Order Metafields
As an online store owner, you may need to set priorities for your orders. The order metafields are used to store the additional order information. Using the order metafields you can also mark the orders for express delivery or normal delivery.
How to Add Metafields to your Shopify Store
Ready to expand your store content with metafield? Thanks to Shopify 2.0 Metafields, you can now easily add metafields to your store and use them anywhere you want. The first step of creating metafields is the metafield definition.
Defining the Shopify 2.0 Metafields
When you create a metafield definition, you actually create an attribute that can hold the same type of value (content). The metafield definition makes sure that the values added to the metafields are of appropriate format like text, numbers, image, link, date & time, etc.
Shopify currently offers two types of metafield definitions:
(1) Standard metafield definition: Shopify has offered some special metafield definitions for you, that are compatible with all the Shopify apps, themes, and other places in your store.
(2) Custom metafield definition: You can create your custom metafield definitions based on your requirements and use them in your store whenever you want.
Steps to Create a Shopify Metafield Definition
Step 1: Log in to your Shopify admin.
Step 2: Go to Settings > Metafields.
Step 3: Select the type of metafields (products or variants) based on the part of your store you want to use.
Step 4: Click on the Add definition button.
Step 5: Give a name to your metafield definition. You will get suggestions of Standard metafields definitions. You can select one or create a custom metafield definition.
Step 6: Keep the Namespace and key as it is. The system will use it to identify the metafield definition.
Step 7: Add a description to your metafield definition (optional). You can include the purpose of creating it.
Step 8: Select a content type from the list. It represents the type of value the metafield will store.
Step 9: Based on the content type you select, you will get different Validation options for the metafield values. Make sure you set the validation rules carefully.
If you want to change the content type, click on the Change link and select another content type.
Step 10: Hit the Save button.
When you create any metafield definition using the Standard definition, you don’t need to specify the name, description, content type or any validation rules. Just select one from the list and save it. Shopify apps and themes will read it automatically.
That’s it, you’re done with the Metafield Definition! Now the next step is adding values to your metafields.
Adding Values to Shopify Metafields
Once you’ve successfully created the metafield definitions and pinned them, you may notice the metafields have been added to the parts of your store (Shopify admin) where it belongs.
For example, I’ve added 5 metafield definitions in “Products” as you can see in the above image. But only 3 from 5 metafields definitions are pinned. So, it will be added to all the products (Shopify admin) automatically. To better understand, see the below image.
You need to click on the “View all” link to see all the metafields that are available for the product.
To add value to the metafields in the Shopify store, you need to enter the value according to the content type on the metafield row.
Step 1: Click on the empty space beside the metafields name.
Step 2: Based on the type or format of the value, it will provide you the option to feed the value such as text box, image browse button, color picker, date & time selector, etc. Add the value there.
Step 3: Click on the Save button.
In the same way, you can add values to the other metafields, also in other products.
Showing Metafields on your Shopify Store
After adding values to the metafields, you can show those data on your online store in many ways and offer an amazing shopping experience to your site visitors. Let’s begin with displaying metafields to your Shopify store.
To make the metafields visible on your website, you need to connect the existing metafields to your current store theme.
Follow the steps by step instructions to connect the metafields to your store theme:
Step 1: From the Shopify admin, go to Online Store > Theme.
Step 2: Open the theme editor by clicking on the Customize button on your current store theme.
Step 3: Go to the page where you want to display the metafields value, e.g. Product page.
Step 4: Add a block or section to the page where you wish to show the metafield values. The blocks or sections that support inserting dynamic sources will allow you to add up to 20 metafields in each block or section.
Step 5: Click on the Connect dynamic source icon
Step 6: Select the metafield you want to connect to the block or section. You can also add new metafield definitions by clicking on Add metafield.
Step 7: Click on the Insert button.
Step 8: Add text to represent the metafield value in a better way.
Step 9: Hit the Save button.
Yay!! We did it well. Now, you can add more metafields to your store theme like this and make your online store stand out from the crowd.
Deleting Shopify Metafields
If a metafield is no longer in use, then you can remove it from your store. Deleting the Shopify metafields is a quick and easy process. You can delete metafields in two ways:
Delete definition and all metafield values
This will let you remove the metafield with all its associated values. But before you choose this option to delete your metafield, you need to check and make sure it’s not connected to any block or section in your live theme.
Delete definition only
This will only remove the metafield definition from your store but its value remains as it is on the online store. After deleting the metafield definitions using this option, you may find some errors in your theme editor.
Steps to delete metafields from your Shopify store
Step 1: In your Shopify admin, go to Settings > Metafields.
Step 2: Click on the metafield you want to remove from your Shopify store, e.g. Size Chart.
Step 3: Click on the Delete button.
Step 4: Choose any one from the deleting options.
Step 5: Click on the Delete button to permanently remove the metafield from your store.
That’s it, we got the end here. Hope you got what you were looking for. For more in-depth information you can visit our blog section.