Using metafields for dynamic block content

Use your Online Store 2.0-compatible theme in combination with the new Metafields admin to provide dynamic content in page blocks.

For this guide, we will use metafields and dynamic content to include height information on product pages.

First, add new metafield definition, then fill the metafield in your Products admin, and connect it to theme feature to include dynamic content for page blocks.

Add new metafield definition

Each metafield definition needs a Name, Namespace and key, and Content type. Also, consider adding a Description for internal reference.

Click (+) Select content type to choose:

• Color
• Date and time
• File
• JSON
• Measurement
• Number
• Rating
• Reference
• Text
• True or false
• URL

For this example setup, we need a Measurement content type to provide dimensions for products.

Save, then go to your Products admin.

Fill metafield in Products admin

In the Products admin, open a product to complete the metafield. Scroll down to Metafields, then enter the height value beside the new metafield. In this example, we select cm (centimeters) from the available metrics.

Save, then go to the Themes portion of the Online Store.

Connect to theme feature

Open the theme editor (Customize), then open a product template.

Creating additional templates with the theme editor

Metafields are connected to blocks or sections on pages. For this example, we are connecting the dynamic content for the Frame Height metafield with a Text page block.

Working with page blocks

Select (+) Add block, then Text. Click to open the block.

In the top-right corner of the sidebar, select Insert dynamic source.

Select Frame Height, then Insert.

For this example, we have also added some introductory text and moved the Text block position below the product Title.