Rating metafields, such as body, acidity or heat, can show as bars or dots on the product page and on product cards. Use them when customers compare products by the same few qualities.
You need a product metafield definition for each quality, with the type Rating. Shopify's guide to creating metafield definitions explains how. The bar fills by the rating divided by the definition's highest allowed rating, so a 4 on a scale up to 5 fills four fifths of the bar.
You list metafields one per line as the namespace and key, a vertical bar, and a label, such as custom.body | Body. Without a label, the theme shows the key with a space for each _ and a capital first letter, so custom.heat_level shows as "Heat level".
How a metafield shows depends on its type.
Metafield type
On the page
Rating
The label, a bar, and the rating out of its scale, such as 4/5. You can show dots instead.
Integer or decimal number, single line or multi-line text
The label with the value under it
Weight, volume or dimension
The label with the value and its unit
Money
The label with the amount
True or false
The label with Yes or No
A metafield of any other type is left out. A metafield with no value on a product is left out on that product.
Show metrics on the product page
The Product metrics block shows its metafields in the Product information section, at its place in the block list. The default product page has the block under the description. In the Checkmate style it is set to custom.body and custom.acidity, and in the Fang style to custom.heat | Heat and custom.allergens | Allergens. The Lair style has no Product metrics block. A style is the starting look you picked when you added the theme, and Theme styles compares them.
At the top of the editor, select Products, then Default product.
In the Product information section, select the Product metrics block. If there is none, click Add block in the Product information section and select Product metrics.
In Metrics metafields, enter one metafield per line, such as custom.body | Body.
Click Save.
When a product has none of the listed metafields, the block is hidden on its page.
The quick view popup, which opens from a product card, has its own Product metrics block in the product template named quick-view. To change what quick view shows, repeat the steps with quick-view selected in step 3 in place of Default product.
Show metrics on product cards
Product cards show up to two metrics under the product's title and short description. The Metrics setting is in each section that shows product cards, so each section can show its own pair or none.
At the top of the editor, select Collections, then Default collection.
Select the Collection section.
Under Product cards, in Metrics, enter one metafield per line, such as custom.heat | Heat.
Click Save.
The card shows the first two lines that have a value for that product. You can list more than two, and a product without one of them shows the next.
The same Metrics setting is in these places:
Where
Shows when
Search section
Always
Featured collection section
Product layout is not Spotlight
Card rail section
Content source is Products
Mega menu block in the Header section
Menu layout is Product cards and Maximum products is above 0
Choose bars or dots
Metric style decides how a rating shows on every product card and on the product page. Bars shows a thin bar with the rating to its right. Dots shows one dot per point of the scale, up to ten, with the label to their left. The filled dots use the Rating star color from Color settings. With Dots, the product page shows the label, the dots and every other metric on one line. The Fang style starts with Dots, and the Checkmate and Lair styles with Bars.
Rating metafields, such as body, acidity or heat, can show as bars or dots on the product page and on product cards. Use them when customers compare products by the same few qualities.
You need a product metafield definition for each quality, with the type Rating. Shopify's guide to creating metafield definitions explains how. The bar fills by the rating divided by the definition's highest allowed rating, so a 4 on a scale up to 5 fills four fifths of the bar.
You also need a rating entered on each product. Shopify's guide to adding values to metafields explains how.
Choose what each metafield shows
You list metafields one per line as the namespace and key, a vertical bar, and a label, such as
custom.body | Body. Without a label, the theme shows the key with a space for each_and a capital first letter, socustom.heat_levelshows as "Heat level".How a metafield shows depends on its type.
Metafield type
On the page
Rating
The label, a bar, and the rating out of its scale, such as
4/5. You can show dots instead.Integer or decimal number, single line or multi-line text
The label with the value under it
Weight, volume or dimension
The label with the value and its unit
Money
The label with the amount
True or false
The label with Yes or No
A metafield of any other type is left out. A metafield with no value on a product is left out on that product.
Show metrics on the product page
The Product metrics block shows its metafields in the Product information section, at its place in the block list. The default product page has the block under the description. In the Checkmate style it is set to
custom.bodyandcustom.acidity, and in the Fang style tocustom.heat | Heatandcustom.allergens | Allergens. The Lair style has no Product metrics block. A style is the starting look you picked when you added the theme, and Theme styles compares them.In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
At the top of the editor, select Products, then Default product.
In the Product information section, select the Product metrics block. If there is none, click Add block in the Product information section and select Product metrics.
In Metrics metafields, enter one metafield per line, such as
custom.body | Body.Click Save.
When a product has none of the listed metafields, the block is hidden on its page.
The quick view popup, which opens from a product card, has its own Product metrics block in the product template named quick-view. To change what quick view shows, repeat the steps with quick-view selected in step 3 in place of Default product.
Show metrics on product cards
Product cards show up to two metrics under the product's title and short description. The Metrics setting is in each section that shows product cards, so each section can show its own pair or none.
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
At the top of the editor, select Collections, then Default collection.
Select the Collection section.
Under Product cards, in Metrics, enter one metafield per line, such as
custom.heat | Heat.Click Save.
The card shows the first two lines that have a value for that product. You can list more than two, and a product without one of them shows the next.
The same Metrics setting is in these places:
Where
Shows when
Search section
Always
Featured collection section
Product layout is not Spotlight
Card rail section
Content source is Products
Mega menu block in the Header section
Menu layout is Product cards and Maximum products is above 0
Choose bars or dots
Metric style decides how a rating shows on every product card and on the product page. Bars shows a thin bar with the rating to its right. Dots shows one dot per point of the scale, up to ten, with the label to their left. The filled dots use the Rating star color from Color settings. With Dots, the product page shows the label, the dots and every other metric on one line. The Fang style starts with Dots, and the Checkmate and Lair styles with Bars.
In your Shopify admin, go to Online Store.
Next to Checkmate, click Edit theme.
In the editor sidebar, click Theme settings.
Select Product cards.
Under Metric style, select Bars or Dots.
Click Save.