Skip to content

Use metafields in Featured collection tables

This guides describes how to use blocks to display product metafields inside a Featured collection table section.

A Featured collection table section on a store's home page.

The previous image shows a Featured collection table section on a store's home page. On the right, the table's Special feature column displays information from a product metafield.

Follow this guide to use metafields for displaying dynamic data sources inside Baseline's Featured collection table section. Use the section to display products from a collection using a table layout. The section supports adding Product metafield blocks. Configure the blocks to display your store's product metafields inside the section's table.

To display product metafields inside the section, complete the following steps:

Note

As an example, this guide describes creating a "Special feature" custom product metafield. The example store uses the Special feature product metafield for additional information about products in the store's "Featured" collection.

In the following example, for one of the collection's products, text is added as a value to the metafield. Then, on the store's home page, the metafield is displayed in a table column inside a Featured collection table section.

Customize the following steps to suit your store's requirements. Create a product metafield definition for the particular product feature you want to display in the section's table. For help creating a metafield, refer to Shopify help: Creating custom metafield definitions.

Create a product metafield

To create a product metafield:

  1. In your Shopify admin, select Settings.

    The Shopify admin page.

  2. On the settings page, select Custom data > Products.

    The Custom data settings page in Shopify admin.

  3. On the Product metafield definitions page, select Add definition.

  4. On the Add product metafield definition page, in the Name box, enter a suitable name for your product metafield.

    For example, in the following image, the Name box contains the text Special feature.

    A completed Name field for an example product metafield definition in Shopify admin.

  5. Enter the following details:

    • Namespace and key. Enter a unique identifier for your metafield in the format namespace.key.
    • (optional) Description. Enter information to describe your metafield's purpose or how to use it.

    Note

    Note your definition's namespace and key, you'll recall these details in the following steps.

    For example, in the following image, the Namespace and key is custom.special_feature, and the Description text is The product's special features.

    Completed Namespace and key, and Description, fields for an example product metafield definition in Shopify admin.

  6. Choose Select type, and then select a suitable data type for your metafield.

    For example, in the following image, the Single line text type is selected. This type is suitable for storing text for the store's Special feature metafield.

    The Single line text type selected for an example product metafield definition in Shopify admin.

  7. Review the definition you created.

    Your definition should be similar to the definition in the following image. Note how the definition is suitably named, described, and configured to store text for the store's Special feature metafield.

    An example product metafield definition in Shopify admin.

  8. Select Save.

Add values to your product metafield

After you Create a product metafield, add values to your metafield for products in Shopify's Product editor. The products that you add metafield values to should belong to the collection you want to display inside the Featured collection table section.

To add values to your product metafield in Product editor:

  1. In your Shopify admin, select Products.

  2. Select a product from the collection you want to display inside the Featured collection table section.

  3. On the product page, locate the Metafields pane, and then select the product metafield you created previously.

    For example, in the following image, a T-Shirt product is selected in Product editor. The product is from the store's Featured collection. The Metafields pane contains the Special feature metafield.

    The metafield pane selected in Shopify's Product editor.

  4. Add the required values to the product metafield, and then select Save.

    For example, in the following image, the value High quality cotton is added to the T-Shirt product's Special feature metafield. For information about adding values to metafields, refer to Shopify help: Adding values to metafields.

    An example metafield with values in Shopify's Product editor.

  5. Repeat the previous steps to add the required values to the product metafield for each product in the collection.

  6. Select Save.

After you Add values to your product metafield, use Theme editor to set up a Featured collection table section. Use the section's table to display the product metafield values you specified previously. The section supports adding Product metafield blocks. Use the blocks to display your product metafield values inside the section's table.

To use Product metafield blocks inside a Featured collection table section:

  1. In your Shopify admin, go to Sales channels > Online store > Themes.

  2. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select a page that contains a Featured collection table section. Baseline's home page template is pre configured with the section. To add the section to the current page, select Add section, and then choose Featured collection table.

    A Featured collection table section selected in Theme editor.

  3. From the side menu, select the Featured collection table section.

  4. In the section's settings, use the Collection selector to choose a collection to display inside the section.

    A Featured collection table section's Collection selector in Theme editor.

  5. From the side menu, expand the Featured collection table section menu, and then select Add block.

    The Featured collection table's Add block menu in Theme editor.

  6. Choose Product metafield, and then select the block you added.

    The Product metafield block selected in Theme editor.

  7. In the block setting's Column label box, enter text to display as a title for the table column. The table cells below the column will display the product metafield values you specified previously.

    For example, in the following image, the Column label box contains the text Special feature.

    The Product metafield block's Column label setting in Theme editor.

  8. In the Metafield namespace and key box, enter your metafield's namespace and key that you noted previously.

    For example, in the following image, the Metafield namespace and key box contains custom.special_feature for the Special feature metafield's namespace and key.

    The Product metafield block's Metafield namespace and key setting in Theme editor.

  9. Preview your store to ensure the section's block displays your metafield data correctly, inside the table.

    For example, the following image shows a Featured collection table section on a store's home page. The section's table rows display 3 products from the store's Featured collection. On the right, a table column displays data from the Special feature product metafield.

    A Featured collection table section on a store's home page.

  10. Select Save.