The Highlights section shows a row of tall photo cards that customers scroll through. On a product page, it can show cards that belong to that product, such as what makes one coffee different. You store the cards on the product in your Shopify admin, so each product page shows its own.
Create the highlight entry
In your Shopify admin, create a metaobject definition named Highlight. A metaobject definition is the form that each card fills in. Shopify's guide to building a metaobject explains how. Give it these four fields.
Field
Key
Type
Shows on the card
Title
title
Single line text
The card's title, under the photo
Text
text
Multi-line text
A short paragraph under the title, with its line breaks
Image
image
File, set to accept images
The photo at the top of the card
Tab
tab
Single line text
The card's name in the row of tabs above the cards
The theme reads each field by its key, so the keys must match the table exactly. A card without a title is left out. A card without an image shows an empty panel in place of the photo.
Add the list to your products
In your Shopify admin, create a product metafield definition named Highlights, with the namespace and key custom.highlights. For its type, select Metaobject, then the Highlight definition, and allow a list of values rather than one value. Shopify's guide to creating metafield definitions explains each step.
At the top of the editor, select Products, then Default product.
Select the Highlights section. If there is none, click Add section and select Highlights.
In List metafield, enter the metafield's namespace and key, such as custom.highlights.
Optional. Under Controls, select Tabs to show a row of tab names, or Arrows.
Click Save.
On a product with highlights, its cards replace the section's own Highlight blocks. A product without highlights shows the blocks. When there are neither, the section is hidden on that product's page. The default product page has no Highlight blocks, so only products with highlights show the section.
With Tabs, the tab names sit to the right of the heading, and clicking one scrolls to its card. A card without a tab name stays out of the tabs but still shows in the row. When no card has a tab name, the section shows arrows. Highlights section describes the section's other settings.
The Highlights section shows a row of tall photo cards that customers scroll through. On a product page, it can show cards that belong to that product, such as what makes one coffee different. You store the cards on the product in your Shopify admin, so each product page shows its own.
Create the highlight entry
In your Shopify admin, create a metaobject definition named
Highlight. A metaobject definition is the form that each card fills in. Shopify's guide to building a metaobject explains how. Give it these four fields.Field
Key
Type
Shows on the card
Title
titleSingle line text
The card's title, under the photo
Text
textMulti-line text
A short paragraph under the title, with its line breaks
Image
imageFile, set to accept images
The photo at the top of the card
Tab
tabSingle line text
The card's name in the row of tabs above the cards
The theme reads each field by its key, so the keys must match the table exactly. A card without a title is left out. A card without an image shows an empty panel in place of the photo.
Add the list to your products
In your Shopify admin, create a product metafield definition named
Highlights, with the namespace and keycustom.highlights. For its type, select Metaobject, then theHighlightdefinition, and allow a list of values rather than one value. Shopify's guide to creating metafield definitions explains each step.Then open each product in your Shopify admin and fill the Highlights metafield in its Metafields section with that product's cards, in the order they should appear. Shopify's guide to adding values to metafields and Shopify's guide to creating metaobject entries explain how.
Check the Highlights section
The Highlights section on the default product page already reads
custom.highlights. Check it, or set it if you chose another key.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.
Select the Highlights section. If there is none, click Add section and select Highlights.
In List metafield, enter the metafield's namespace and key, such as
custom.highlights.Optional. Under Controls, select Tabs to show a row of tab names, or Arrows.
Click Save.
On a product with highlights, its cards replace the section's own Highlight blocks. A product without highlights shows the blocks. When there are neither, the section is hidden on that product's page. The default product page has no Highlight blocks, so only products with highlights show the section.
With Tabs, the tab names sit to the right of the heading, and clicking one scrolls to its card. A card without a tab name stays out of the tabs but still shows in the row. When no card has a tab name, the section shows arrows. Highlights section describes the section's other settings.