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.

1. Go into Shopify Admin > Settings > Custom data > Products under Metafield definitions

2. Add a definition for product specs

3. Save and repeat for each spec

Let's say we want to add Smoothness. We're going to need to add the name, the namespace, and key, and set the type to Integer with a minimum value of 1 and a maximum value of 100. This will end up representing the percentage of smoothness for the product.

Namespace and key must start with archetype_spec for this to work, followed by a period and then the name of your spec.

1. Go into Shopify Admin > Products > Select the products > Bulk edit > Columns (top right corner) > Scroll down to metafields and select the new metafields you created. This adds a column for the chosen metafield.

2. For each product, enter a percentage value out of 100, for the metafield. Save once done.

1. Visit the default product template and add the product specs block

2. Update the Label in the block settings to match the spec name used when setting up the definition.

3. Now as long as you've added the metafield to the product displayed in the backend, things will show up fine. You'll notice that by default the product specs bar will be displayed as soon as you enter the spec name in the Label field.

4. If no metafield is connected to the product, you can simply add a value using the block settings and the product specs bar will show.

Represents Value block setting value of 80

Represents metafield value of 40 from the backend.

This is essentially a scale used to highlight the spec levels. By default, there are 5 blocks displayed, and in our example above we have a 40% Smoothness level. Therefore, each block represents 20%, and in this case, 2 blocks are highlighted to indicate 40%.