Skip to main content

Product metafield data

This guide describes how to create product metafields and use them with the Mind features that read them: the Product compare modal, the Countdown timer and Videos blocks, product properties on product cards, and the Image gallery and Gallery showcase sections.

Mind looks for its built-in keys in the theme namespace first and falls back to the custom namespace, which is the namespace Shopify uses when you create a definition in the admin. The Product compare modal reads the custom namespace only.

FeatureMetafield keyType
Product compare modalcustom.<your key>Single line text or Multi-line text
Countdown timer blockcustom.product_countdownDate and time
Videos blockcustom.product_videosFile, list of files (videos)
Product properties on product cardscustom.product_propertiesMetaobject, list of entries
Image gallery, Gallery showcaseany key you chooseFile, list of files (images)

guide-product-metafield-data-1.webp

Create a product metafield definition​

  1. On your store's Shopify admin page, from the left-side menu, select Settings > Custom data > Products, then select Add definition.
  2. Fill in the definition:
    • Name: what you want to show as the row heading, for example Session length. Shopify fills in Namespace and key as custom.session_length; keep that default.
    • Type: pick the type listed in the table above for the feature you want to use.
  3. Select Save. Repeat for every metafield you need.

guide-product-metafield-data-2.webp

Assign values to products​

  1. Select Products from the left-side menu, then open a product.
  2. Scroll to the Metafields box at the bottom of the product page and enter a value for each definition.
  3. Select Save. Repeat for the other products.

guide-product-metafield-data-3.webp

Show metafields in the Product compare modal​

The compare modal opens when a shopper adds products to compare from product cards and then opens the comparison from the header or the floating sidebar.

  1. From the left-side menu, select Sales channels > Online store > Themes, then select Customize on the current theme.

  2. Make sure compare is switched on: in Theme settings > Product cards, enable Show compare. Then turn on Show comparison in the Header section, in the Floating sidebar section of the Features group, or both.

  3. In the sidebar, scroll to the Overlay group and select the Product compare modal section.

  4. Under List compare, tick the built-in rows you want (Available, Type, Price, Vendor, SKU, Tags, Variants).

  5. In Custom metafields, enter the Name of each definition on its own line, exactly as you typed it in the admin:

    Session length
    Format
    Level

    Mind converts each line to lower case, replaces spaces with underscores and reads custom.<key> from every product in the table (so Session length reads custom.session_length). Products without a value show a dash.

  6. Select Save.

Step 5

Drive the Countdown timer block from a metafield​

The Countdown timer block of the Main product section reads a Date and time metafield with the key product_countdown and counts down to it in days, hours, minutes and seconds. The block stays hidden on products where the metafield is empty.

  1. Create a definition named Product countdown with Type set to Date and time so the key becomes custom.product_countdown.
  2. On each product that needs a timer, set the end date and time in the Metafields box and select Save.
  3. In the Theme editor, select the Main product section on the product template, select Add block > Countdown timer, and fill in the Headline and Label text.
  4. Select Save.

The Featured product section has the same Countdown timer block.

Show product videos with the Videos block​

The Videos block of the Main product section shows a grid of video thumbnails; each one opens the video in a modal.

  1. Create a definition named Product videos with Type set to File, select List of files and limit it to videos, so the key becomes custom.product_videos.
  2. On each product, upload or pick the videos in the Metafields box and select Save.
  3. In the Theme editor, select the Main product section, select Add block > Videos, and set the Heading, Aspect ratio, Columns, Columns mobile and the Play button options.
  4. Select Save. The block shows nothing on products without videos.

Show product properties on product cards​

Product cards in the Main collection and Related products sections can show up to three short properties (for example Duration — 60 min) over the product image.

  1. Select Settings > Custom data > Metaobjects and add a metaobject definition, for example Product property, with two Single line text fields whose keys are title and description.
  2. Select Settings > Custom data > Products and add a product definition named Product properties with Type set to Metaobject, select List of entries and pick the metaobject definition, so the key becomes custom.product_properties.
  3. On each product, add up to three entries in the Metafields box and select Save. The first three entries are shown.
  4. In the Theme editor, select the Main collection section on a collection template (or the Related products section on a product template) and enable Show properties on the image.
  5. Select Save.

Fill image sections from a metafield​

The Image gallery and Gallery showcase sections can take their images from a product metafield instead of image blocks when they are placed on a product template.

  1. Create a product definition with Type set to File, select List of files and limit it to images, for example Session photos (custom.session_photos).
  2. On each product, add the images in the Metafields box and select Save.
  3. In the Theme editor, select the Image gallery or Gallery showcase section on the product template, set Image source to Product metafield, and enter the definition's namespace and key in Metafield, for example custom.session_photos.
  4. Select Save.
note

Elsewhere, any text setting in the Theme editor that shows the Connect dynamic source icon (for example the content of a Collapse block) can be connected to a product metafield so the value changes per product.

tip

Use the same definition names for all products in a category so that the compare table lines up. Row names come straight from the Custom metafields field, so type each name the way you want it to appear as the row heading.