Appearance
Use metafields on product pages
This guide describes adding a metafield into a product page, to display additional information about a product on a store's product page.
For example, in the following image, a custom metafield displays the Manufacturer's Part Number MPN: 12345, inside a Text block, on a store's Plain t-shirt product page.
Metafields store information. For example, you can create a metafield to store information about a product's physical dimensions. By adding a metafield to a block inside a product section, the information from the metafield can be displayed on your store's product pages. Refer to Shopify help: Use metafields and metaobjects with dynamic sources.
Note
For information that's typically stored in a metafield, Shopify provides standard metafield definitions. Refer to Shopify help: Adding standard metafield definitions.
You can also create custom metafield definitions. Refer to Shopify help: Creating custom metafield definitions.
As an example, this guide creates a custom metafield definition to store a Manufacturer's Part Number (MPN) for a product. The MPN is displayed within a Text block, inside a product section, and displayed on a Product page.
To create a different custom metafield, adapt the steps in this guide to suit your requirements.
Define your custom product metafield
To define your custom product metafield:
On your store's Shopify admin page, select Settings > Metafields and meta objects.
On the Metafields and meta objects page, select Products, and then choose Add definition.
In the Name text box, enter a prefix (namespace) and name (key) for the metafield.
For example, to create a metafield for a Manufacturer's Part Number (MPN), in the Name text box, enter custom.mpn.
Note
You can also select a standard definition with a content type that corresponds to the information you want the metafield to store. For example, Shopify provide standard definitions for storing International Standard Book Numbers (ISBN), Product guides, Product subtitle, etc.
For a list of standard definitions and content types, refer to Shopify help: List of standard metafield definitions.
[Optional] In the Description text box, enter text to describe the metafield. For example, for the mpn metafield, enter Manufacturer's part number.
Choose Select type.
From the list of types, select the type of content for the metafield to use.
For example, to set the mpn metafield to store integer numbers, select Number > Integer.
Where relevant, set the required options and validation rules to define the metafield.
For example, to set the mpn metafield to accept one, unique, five-digit integer value per metafield instance:
- Select One value.
- Toggle on Unique values only.
- In the Minimum value text box, enter 00000.
- In Maximum value text box, enter 99999.
Note
Depending on the metafield's content type, different options and validation rules are displayed.
As an example, the following image shows a completed mpn metafield definition that's configured to accept one, unique, five-digit integer value per metafield instance.
Select Save, at the top of the page, to save your custom metafield definition.
Set values for your metafield
To set values for your metafield:
Note
The steps required to set values depend on the metafield's content type. Refer to Shopify help: Adding values to metafields.
Adapt the following steps to suit your requirements.
On your store's Shopify admin page, select Products.
Select a product from the Products list to open the Product editor.
At the bottom of the page, locate the Metafields area.
From the list, select the metafield you defined previously, and then enter the required values.
For example, select the mpn metafield, and then enter the value
12345
into the text box.Note
Depending on the metafield's content type, different options are displayed for entering values. Refer to Shopify help: Adding values to metafields.
[Optional] Repeat the previous steps to add metafield values to other products.
Select Save to save the values you added to the metafield.
Add your metafield to a product section
To add your metafield to a product section:
Open your theme in Theme editor. At the top of the Theme editor, use the drop-down menu to select a product page, and then select the product section that will display your custom metafield.
For example, select Products > Default product > Product pages.
From the section's settings menu, select a block to contain the metafield.
For example, select a Text block.
Note
The block you select must support metafields.
Alternatively, to add a new block, select Add block, choose a block to add, and then select the block you added. Refer to Configure blocks inside a section.
Inside the block settings menu, choose a setting option that supports metafields, and then select the Connect dynamic source icon.
For example, select the Connect dynamic source icon beside the block's Text option.
From the Connect dynamic source menu, select the metafield you defined previously.
For example, select the mpn metafield.
[Optional] Enter a prefix to display with the metafield's value. For example, in the Text box, enter the prefix MPN:.
Verify that the metafield displays on the product page correctly.
For example, the following image shows a product section on a store's Plain t-shirt product page. Below the section's Buy it now button, a Text block displays the prefix MPN: and the mpn metafield value
12345
.