Cards

Cards with an image above a title and a short text, repeated. Use it for people, certifications, commitments or anything that comes in a set. For cards that link to collections, use Category grid.

Where to find it

In the theme editor, Add section › Cards. The theme starts with it on: Page template "about", Page template "contact".

Settings

Cards with an image, a title, a line of text and an optional link: people, commitments, services. For cards that open a collection, use Category grid.

Setting	Choices	Shows when	What it does
Density	Follow theme · Compact · Normal · Spacious	Always	Space, columns and image shape in this section. Follow theme uses Density in Theme settings › Layout.
Text size	Default · Smaller · Standard · Larger	Always	Makes this section's text and title smaller or larger than its Density sets.
Color scheme		Always
Heading		Always
Overline		Heading is filled in
Text		Always

Who sees this

Setting	Choices	Shows when	What it does
Show this section to	Everyone · Guests and retail · Trade customers	Always	Trade customers are signed-in company buyers. The theme editor always shows the section. Learn more

Layout

Setting	Choices	Shows when	What it does
Card style	No background · Filled · Outlined	Always
Image shape	Follow density · Square · Landscape (4:3) · Photo (3:2) · Wide (16:9) · Original shape	Always	Follow density takes the shape from this section's Density. Original shape never crops.
Section width	Full width · Contained	Always	Contained draws the color scheme as a panel inside the page margins.
Color around the panel	On · Off	Section width is Contained	Off shows the page background around the panel. Color scheme colors the panel itself.
Around the panel		Section width is Contained and Color around the panel is on

Which settings reveal which:

flowchart LR
  heading["Heading"]
  overline["Overline"]
  section_width["Section width"]
  panel_ground["Color around the panel"]
  ground_color_scheme["Around the panel"]
  heading -- "filled in" --> overline
  section_width -- "is Contained" --> panel_ground
  section_width -- "is Contained  + more " --> ground_color_scheme
  panel_ground -- "on  + more " --> ground_color_scheme

Blocks

Card

Setting	Choices	Shows when	What it does
Image		Always
Heading		Always
Subtitle		Always
Text		Always
Link		Always	With a button label, a button. Without one, the whole card is the link.
Link label		Link is filled in
Button style	Primary · Secondary · Link	Link is filled in and Link label is filled in

Which settings reveal which:

flowchart LR
  link["Link"]
  link_label["Link label"]
  button_style["Button style"]
  link -- "filled in" --> link_label
  link -- "filled in  + more " --> button_style
  link_label -- "filled in  + more " --> button_style

Custom Liquid

Setting	Choices	Shows when	What it does
Custom Liquid		Always	Added as one more item, as wide as the others. For an app snippet or a small form.