The Highlights section shows a row of photo cards, each with a short heading and a line or two of text. Customers move through the cards with tabs or arrows next to the section's heading, or by swiping. Use it for the steps of a story, such as farm, process and roast, or for the reasons to buy a product. To add one, click Add section in the editor and select one of the two Highlights presets. It works on any page, and Checkmate's default product page has one.
Bold text starts a new line, so the heading reads as a light line over a bold one.
List metafield
The product metafield that holds a product's own highlights, as a namespace and key. The default is custom.highlights. On a product page, the product's own highlights show in place of the section's cards. A product without them shows only the section's cards. Other pages ignore it.
Controls
Tabs shows a row of buttons to the right of the heading, one for each card with a Tab name. Clicking one scrolls to its card, and the button of the card in view is filled. The arrows then move under the cards, next to a line that shows how far along the row customers are. Arrows shows only arrows, to the right of the heading. When every card fits on the screen, the tabs and arrows hide.
Columns
How many cards are in view at once on screens 1,000 px and wider: Three or Four. The default is Four. Smaller screens show fewer.
Image ratio
The shape of each photo. Portrait is tall (3:4), and Square is square. Photos are cropped to fill it.
Each card is a Highlight block. Click Add block in the section to add one.
Setting
What it does
Image
The card's photo. Without one, the card shows an empty light frame.
Heading
The card's title. A card with an empty heading does not show.
Text
A line or two of small text under the heading.
Tab
The card's name on its tab button, such as Roast. Leave it empty to give the card no tab. Shows when Controls is Tabs.
Empty highlights
If no card has a heading and the product has no highlights of its own, the section does not appear on your store. In the editor, it shows the message "Add a highlight with a heading, or connect product highlights." in its place.
The Highlights section on Checkmate's default product page has no cards of its own. It shows only on pages of products that have their own highlights, and stays hidden on the others.
The Highlights section shows a row of photo cards, each with a short heading and a line or two of text. Customers move through the cards with tabs or arrows next to the section's heading, or by swiping. Use it for the steps of a story, such as farm, process and roast, or for the reasons to buy a product. To add one, click Add section in the editor and select one of the two Highlights presets. It works on any page, and Checkmate's default product page has one.
On a product page, the section can show highlights that belong to that product in place of its own cards. Give each product its own highlights shows how to set them up, and How each product gets its own content explains the idea.
Presets
The Add section list shows two presets. Each one is a starting point, and its settings can change it into any of the others.
Highlights
Highlights with arrows
Controls
Tabs
Arrows
Image ratio
Portrait
Square
Cards
Five, each with a tab name
Five
No preset comes with photos. Until you add them, each card shows an empty light frame.
Layout
Padding top, Padding bottom, Margin top and Margin bottom are explained in Section layout settings.
Background
The background settings are explained in Section background settings.
Content
Setting
What it does
Heading
Bold text starts a new line, so the heading reads as a light line over a bold one.
List metafield
The product metafield that holds a product's own highlights, as a namespace and key. The default is
custom.highlights. On a product page, the product's own highlights show in place of the section's cards. A product without them shows only the section's cards. Other pages ignore it.Controls
Tabs shows a row of buttons to the right of the heading, one for each card with a Tab name. Clicking one scrolls to its card, and the button of the card in view is filled. The arrows then move under the cards, next to a line that shows how far along the row customers are. Arrows shows only arrows, to the right of the heading. When every card fits on the screen, the tabs and arrows hide.
Columns
How many cards are in view at once on screens 1,000 px and wider: Three or Four. The default is Four. Smaller screens show fewer.
Image ratio
The shape of each photo. Portrait is tall (3:4), and Square is square. Photos are cropped to fill it.
Motion
Dark moment, Rise on scroll and Chapter title are explained in Section motion settings.
Blocks
Each card is a Highlight block. Click Add block in the section to add one.
Setting
What it does
Image
The card's photo. Without one, the card shows an empty light frame.
Heading
The card's title. A card with an empty heading does not show.
Text
A line or two of small text under the heading.
Tab
The card's name on its tab button, such as
Roast. Leave it empty to give the card no tab. Shows when Controls is Tabs.Empty highlights
If no card has a heading and the product has no highlights of its own, the section does not appear on your store. In the editor, it shows the message "Add a highlight with a heading, or connect product highlights." in its place.
The Highlights section on Checkmate's default product page has no cards of its own. It shows only on pages of products that have their own highlights, and stays hidden on the others.