Eight Themes Support Documentation

How to set up a Specification table with metafields

In Momentum, a Specification table can be added to product pages as a section. It can also be added as a block to most sections that display product cards, including Featured collections, Cross sells, and others.

By using metafields you can add and display dynamic information under your products to provide quick and convenient access to certain details. For example, measurements, materials, model numbers, or reference codes.

Product page section example:

mceclip1.jpg

 

Product card block example:

mceclip3.jpg

In this guide, we'll explain how you can set up a Specification table using metafields and display them on your storefront.


Part 1: Defining a specification metafield

The first step in creating a dynamic specifications table is to add metafields to your Shopify admin:

Step 1: Within your Shopify admin, go to Settings.

Settings Button.png

Step 2: Go to Custom data.

Settings - Custom Data .png

Step 3: Select Products and click Add definition.

Metafields - Add definition.png

Step 4: In the Namespace and key field, enter: specifications.key

Note: 'specifications' is the namespace.

Step 5: Replace 'key' with the label you want to display. For example: height, width, model, etc. This key will be displayed in the table. 

Examples: Your Namespace and key field should look like this:

  • specifications.height
  • specifications.width
  • specifications.model_number (use a _ to represent a space)

Step 6: Enter a name and description for your metafield. These details only appear for you in your Shopify admin.

Step 7: Select the appropriate Content type and decide whether you want a single line of text or a list. We support all measurement, text, and rating content types.

The completed form should look similar to this example:

Untitled__1_.png


Part 2: Assigning metafields to your products

You can now assign your metafields to your products.

Step 1: Within your Shopify settings, go to Products.

Step 2: Select the relevant product.

Step 3: Scroll down to the metafield section and enter the product information into the metafields.

Metafields - Product.png

Step 4: Save your changes and repeat with all relevant products.


Part 3: Setting up the Specification table on your storefront

Finally, you can set up the Specification table on your store. It's available as a section on your product pages, as well as sections that include product cards.

Step 1: Within the Theme Editor, navigate to where you want to display the Specification table.

Step 2: Add the Specifications block (product card) or Specification table section (product page).

Specification Table - Add Section.png

Step 3: In the block/section settings, write your specifications metafield keys (added in Part 1) separated by commas to choose which specifications to show and in what order. Remember to use a _ for keys that include spaces.

Specification Table - Metafield Keys.png

Note: Specifications will only appear for products that have metafield values (see Part 2).

Step 4: Save your changes and preview your theme to see your specification table.

Was this article helpful?