Use metafields in Featured collection tables

This guide describes how to use blocks to display product metafields in a Featured collection table section.

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 to display dynamic data in Baseline's Featured collection table section. The section uses a table to display products from a collection and supports Product metafield blocks. Configure the blocks to display product metafields in the table.

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

• Create a product metafield in Shopify admin.
• Add values to your product metafield in Shopify's Product editor.
• Display metafields in a Featured collection table section using the Theme editor.

Note

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

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

Customize the following steps to suit your store's requirements by creating a product metafield definition for a 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 > Metafields and metaobjects > Products.

   

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

3. On the Add product metafield definition page:

   • In the Name field, enter a suitable name for your product metafield. For example, enter Special feature.
   • In the Namespace and key field, enter a unique identifier for your metafield in the format namespace.key. Note your definition's namespace and key, you'll recall these details later in this guide. For example, enter custom.special_feature.
   • Select Type, and then choose a suitable data type for your metafield. For example, select One value and Single line text.
   • (Optional) Choose Add description and in the Description field, enter information to describe your metafield. For example, enter The product's special feature.

4. Review the definition you created.

   When completed, 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.

   

5. 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 you update should belong to the collection you want to display in the Featured collection table section.

To add values to your product metafield in the Product editor:

1. In your Shopify admin, select Products.

2. Select a product from the collection you want to display in the section.

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

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

   For example, in the following image:

   • A T-Shirt product is selected in the Product editor.
   • The product is from the store's Featured collection.
   • The Metafields pane contains the Special feature metafield.
   • The value High quality cotton is added to the Special feature metafield.

   

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

6. Select Save.

Display metafields in a Featured collection table section

After you Add values to your product metafield, use the 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 in the section's table.

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

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

2. In the Themes pane, next to the name of the theme you want to customize, select Edit theme to open Shopify's Theme editor.

3. In the Theme editor, at the top of the page, use the theme templates dropdown menu to select a page that contains a Featured collection table section.

   Note

   Baseline's home page template is preconfigured with the section. To add the section to the current page, select Add section, and then choose Featured collection table.

4. From the sidebar, select the Featured collection table section.

5. In the section's settings, use the Collection picker to select a collection to display in the section.

6. From the sidebar, expand the Featured collection table section menu, and then select Add block.

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

8. In the block's settings:

   • In the Column label field, 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, enter Special feature.
   • In the Metafield namespace and key field, enter the namespace and key for the metafield you noted previously. For example, enter custom.special_feature for the Special feature metafield's namespace and key.

   When completed, your block settings should be similar to the settings in the following image.

   

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

   For example, in the following image:

   • A Featured collection table section is shown 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.

   

10. Select Save.