How can I setup my own custom product specifications?
This feature offers an intuitive way to present product specifications within a range on your product information pages in a clear and organized manner, providing your customers with vital details about your products at a glance.
In this guide, we'll walk you through the setup process for this feature using metafields and the product specs block.
Create metafields
From your Shopify admin, go to Settings > Metafields and metaobjects, then select Products under Metafield definitions.
Click Add definition to create a new metafield for your product specs.
Enter a name for your spec (for example, Smoothness).
In the Namespace and key field, start with
archetype_spec, followed by a period and then the name of your spec.Example:
archetype_spec.smoothness
Set the Type to Integer, with a minimum value of 1 and a maximum value of 100. This represents the percentage level for each spec.
Click Save, then repeat these steps for each product spec you want to add.
Add metafield values to products
In your Shopify admin, go to Products and select the products you want to edit. Click Bulk edit, then open Columns (in the top-right corner). Scroll down to Metafields and select the new metafields you created.
For each product, enter a percentage value out of 100, for the metafield.
After making changes, click Save.
Set up the product specs block on the product page
In the theme editor, navigate to the Product page template by clicking on Products, then Default product from the page selector.
In the left sidebar under Products, click Add section and select the Product specs block.
Update the Label in the block settings to match the spec name used when setting up the metafield.
As long as you’ve added values to the product metafield in your admin, they’ll display correctly. The product specs bar will appear automatically once you enter a spec name in the Label field.
If no metafield is connected to the product, you can add a value directly in the block settings.
Here’s how the product spec is displayed in the storefront:
This product block acts as a visual scale to represent spec levels. By default, five blocks are displayed. In the example above, a Smoothness level of 40% highlights two out of the five blocks, with each block representing 20%.