Using metafields for dynamic block content

With metafields, you can store extra product information, like a frame's height, and show it automatically in your theme's blocks. In this guide, you'll add a Frame height metafield and display it on product pages.

There are three steps:

  1. Create a metafield definition
  2. Add a value to each product
  3. Connect the metafield to a block in the theme editor

height_value_for_product_showing_below_product_title.png

Step 1: Create a metafield definition

  1. In your Shopify admin, go to Settings > Metafields and metaobjects.
  2. Click Products, then Add definition.

metafields_portion_of_admin_settings.png

  1. Enter a Name (for example, Frame height). Shopify generates the Namespace and key for you, and you can edit it if needed.
  2. Optional: Click Add description to leave a note for your staff.
  3. Click Select type and choose Dimension. For other kinds of information, choose a different type, such as single-line text, URL or file. See Shopify's full list of metafield types.
  4. Optional: Set Validation rules, such as a minimum or maximum value.
  5. Click Save.

new_metafield_definition_setting_up_for_height_dimension.png

Tip: You can also create a definition from any product page. Scroll to the Metafields section and click Add definition.

Step 2: Add a value to your products

  1. Go to Products and open a product.
  2. Scroll to the Metafields section. If Frame height isn't listed, click View all.
  3. Click the Frame height row, enter the height, and choose a unit (for example, cm).
  4. Click Save. Repeat for each product.

adding_height_number_value_and_selecting_centimeters.png

Step 3: Connect the metafield in the theme editor

  1. Go to Online Store > Themes and click Edit theme.
  2. Open a product template from the page selector at the top. (See Creating additional templates with the theme editor.)
  3. In the product information section, click Add block and choose Text. (See Working with page blocks.)
  4. Select the new block, click its text setting, then click the Connect dynamic source icon (or Insert dynamic source).
  5. Choose Frame height, then click Insert.

insert_dynamic_source_in_top_right_corner.png

  1. Optional: Add text before it (for example, Height:) and drag the block where you want it, such as below the product title.
  2. Click Save.

height_value_for_product_showing_below_product_title.png

The block now shows each product's own height. If a product has no value, nothing appears in that spot.

Related resources

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Related articles