In Momentum (pre-version 6.0.0), 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:
Product card block example:
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.
Step 2: Go to Custom data.
Step 3: Select Products and click Add definition.
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:
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.
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).
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.
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.