Skip to main content

Product metafield data

This guide describes how to create product metafields and use them with the Ronin features that read them: the Product compare modal and the Countdown timer block.

Both features look for metafields in the custom namespace, which is the namespace Shopify uses when you create a definition in the admin.

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.

guide-product-metafield-data-1a.webp

  1. Fill in the definition:
    • Name: what you want to show as the row heading, for example Water resistance. Shopify fills in Namespace and key as custom.water_resistance; keep that default.
    • Type: Single line text or Multi-line text for the compare table. Choose Date and time for the countdown timer.
  2. Select Save. Repeat for every attribute you want to compare.

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 you want to compare.

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 selects the Comparison button in 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, and check that the Floating sidebar section in the Features group has a Comparison block.

  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:

    Water resistance
    Case size
    Movement

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

  6. Select Save.

guide-product-metafield-data-5.webp

Drive the Countdown timer block from a metafield​

The Countdown timer block of the Product information section reads a Date and time metafield with the key custom.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 Product information section on the product template, select Add block > Countdown timer, and set its timer Color, the Headline and Label text, and the Appearance options.
  4. Select Save.
note

The Featured product section has the same Countdown timer block. Elsewhere, any text setting in the Theme editor that shows the Connect dynamic source icon (for example the Content of a Collapsible row 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.