The score seal is a round badge with a wavy edge on the top right corner of a product card's photo. Its center shows a short value from the product, such as a score of 86, and a label of your choice runs around its edge. The edge and the label turn as the page scrolls, and the value stays upright. Use it for one number customers compare products by.
The seal is about 90 pixels wide, so keep the value to a few characters, such as 86 or 4.9.
Turn on the seal
Each section that shows product cards has its own seal setting. These steps set it in the Collection section, which shows the cards on collection pages.
At the top of the editor, select Collections, then Default collection.
Select the Collection section.
Under Product cards, check that Show score seal is on. It is on at first, and Score seal metafield shows under it.
In Score seal metafield, enter the metafield's namespace and key, a vertical bar, and the label, such as custom.score | Cup score.
Click Save.
The label repeats around the seal's edge with a dot between copies, so a short label of one or two words reads best. Without a label, the seal shows only the value. A product without a value shows no seal.
Show the seal in other places
The same two settings are in each of these places. Set them in each one where you want the seal.
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
To show other values from the product on its card, such as body or heat, use the card Metrics setting described in Show product ratings as bars or dots.
The score seal is a round badge with a wavy edge on the top right corner of a product card's photo. Its center shows a short value from the product, such as a score of
86, and a label of your choice runs around its edge. The edge and the label turn as the page scrolls, and the value stays upright. Use it for one number customers compare products by.You need a product metafield definition for the value, such as a score, with the type Single line text or a number type such as Integer or Decimal, and the value entered on each product. Shopify's guide to creating metafield definitions and Shopify's guide to adding values to metafields explain how.
The seal is about 90 pixels wide, so keep the value to a few characters, such as
86or4.9.Turn on the seal
Each section that shows product cards has its own seal setting. These steps set it in the Collection section, which shows the cards on collection pages.
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, check that Show score seal is on. It is on at first, and Score seal metafield shows under it.
In Score seal metafield, enter the metafield's namespace and key, a vertical bar, and the label, such as
custom.score | Cup score.Click Save.
The label repeats around the seal's edge with a dot between copies, so a short label of one or two words reads best. Without a label, the seal shows only the value. A product without a value shows no seal.
Show the seal in other places
The same two settings are in each of these places. Set them in each one where you want the seal.
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
To show other values from the product on its card, such as body or heat, use the card Metrics setting described in Show product ratings as bars or dots.