Venue - Product page - Add custom content to your store using metafields
Metafields allow you to create custom data options for your products, collections, customers, orders, and other parts of your store.
This means that you can customize your Shopify admin and the Shopify Search and Discovery app to be unique to your business by giving you data entry points to add specialized information.
This specialized information can then be integrated into your theme and displayed to customers, there are a huge amount of ways that they can be used to tailor your website to your business.
A simple example would be a craft beer company that would like to add a flavor profile field to the product pages of the Shopify admin, which can then be displayed on the website for each product.
Here’s how this would look within the admin :
These fields can then be easily added to the website, here's an example :
How do I create metafields?
- 1
- Log in to your Shopify store admin
- 2
- Click on Settings then Metafields in the side menu.
- 3
- Click the Customize button next to your active theme to go to the theme editor.
- 4
- From here, choose the area of your admin that you would like to add a metafield to, in the above example, Products would have been selected :
-
- 5
- After selecting the area, click the Add definition button, this will open up a number of fields to input the basic info for the new metafield.
- 6
-
The last field will be the Content type option, this is where you can choose the style of information that will be contained in the metafield, in the earlier example, Text was selected :
-
- 7
- Below this you will find Validation rules, this is more complex and is not necessary for most setups, Shopify's full guide on this will be linked below for information.
- 8
- Click Save and go back to your admin and to the area selected in step 4.
-
How can I access metafields from my theme editor?
There are many ways that you can access and use metafields from within your theme editor to enhance your storefront, this section will cover how you can enter the custom data and then how to access that data.
Once defined, metafields will become available within your Shopify admin, in the area that the metafield was created for. In the above example, the metafield would appear on each product listing within your admin.
Here are the steps for locating it and entering the data :
- 1
- First determine which area of your store admin the metafield is in, this will be the area selected in step 4 of the above guide. (In this case, the metafield is in the Products area)
- 2
- Click on Products and then select a product that you would like to add custom data to.
- 3
- Once on the product page, scroll down until you reach the Metaflieds section, this will be near the end of the page.
- 4
- From here, you can select a metafield and add in the custom data.
- 5
- After adding the data, click Save.
- 6
- Next, click on Online Store then Themes in the side menu to get to the themes area
- 7
- Click the Customize button next to your active theme to go to the theme editor
- 8
- From here, select the product template that you would like the metafield to appear on.
- 9
- Select a block the block that you would like to enter the metafield into, in the above example the Text block was used
- 10
- Within the block, you will find an option to insert the metafield, it comes in the form of an "insert dynamic source" icon in the top right of each text field:
- 11
- Here is the exact setup as used in the above example :
-
- 12
- After adding the data, click Save and check your work.
-
Metafields and the Shopify Search & Discovery app
Metafields can be used to enhance the search and discovery capabilities of your store, by adding specialized options to the Shopify Search and Discovery app.
After you have created a metafield, it will instantly become available within the app.
Here is an example of how you add metafields as custom options to your collection filter.
- 1
- Log in to your Shopify store admin
- 2
- Click on Apps then open the Search & Discovery app.
- 3
- From here, click on the green View filters button, under the Collection and Search Filters heading.
-
Note: This menu will initially appear with only Price and Availability filters. You can select Edit filters to select additional filters to be displayed in the sidebar of your collection page.
- 4
- After clicking on Edit filters, you will find the default options that are available to be used as filters:
-
- 5
-
By scrolling down, you will find a section dedicated to metafield, this will contain all of the metafields that you have created, you can add them as filtering options by checking the boxes to the left:
-
- 6
- Once selected, click Save and check your work.
- Here is an example of a specialized "Beer type" filter, added using a metafield:
-