Vino: Product specifications

The Product specifications feature provides a clear and organized way to display product details presented within a range, giving customers quick access to important information 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. From your Shopify admin, go to Settings > Metafields and metaobjects, then select Products under Metafield definitions.
2. Click Add definition to create a new metafield for your product specs.
3. Enter a name for your spec (for example, Smoothness).
4. Once you add the metafield name, the Namespace and key field will be displayed below. Edit it so it begins with archetype_spec, followed by a period and then the name of your spec. Example: archetype_spec.smoothness
   
5. Set the Type to Integer, then under Validation, set the minimum value to 1 and the maximum value to 100. This represents the percentage level for each spec.
   
6. Click Save, then repeat these steps for each product spec you want to add.

1. In your Shopify admin, go to Products and open the product you'd like to add a value for the product specs.
2. Scroll to the Product metafields section, enter a value out of 100 for the product spec metafield. Example:
   
3. Click Save after updating the product, then repeat the steps for your other products.

1. In the theme customizer, navigate to the Product page template by clicking on Products, then Default product from the page selector.
2. In the left sidebar under Products, click on Add Block and select the Product specs block. If you don't see this option, you may need to hover your mouse pointer between existing blocks. A blue plus (+) button should appear, allowing you to add a new block. 
3. 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 specification appears on 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%.

Additional settings

In Theme settings > Design, you can set the Style of the product tags to either Round or Square. Enabling Show increment dividers adds small vertical lines between each percentage segment in the bar.