The Card rail section shows a row of cards that customers scroll sideways, with arrows above the cards. The cards are either products from a collection or cards you build yourself. A column at the start of the row can hold a round seal badge, a heading, a short paragraph and a button. To add one, click Add section in the editor and select one of the three Card rail presets. It works on any page.
Presets
The Add section list shows three presets. Each one is a starting point, and its settings can change it into any of the others.
Card rail
Card rail with header
Card rail products
Style
Cards only
Header and cards
Header and cards
Content source
Custom, six cards
Custom, six cards
Products
Background panel
Off
Off
On
Header column
None
On a light panel, no badge
No panel, a seal badge with a cup icon and text around it, and a button
Use it for
A row of short stories or reasons to buy
A set of choices with an introduction, such as grind sizes
A collection with a sales message beside it
The Card rail products preset has no collection set. Until you choose one under Collection, it shows nothing on your store.
Layout
Setting
What it does
Gap
The space between the cards, and between the header column and the cards, from None to 120 px. The default is 24 px.
Style
Cards only shows the row across the page width, with the heading above it to the left of the arrows. Header and cards adds a tall column at the start of the row with the badge at the top, the heading under it, and Text and the button at the bottom. On screens 1,000 px and wider, the cards scroll in from under the column. On smaller screens, the column sits above the cards.
Background panel
Puts the whole section on a panel with rounded corners, inset from the edges of the screen. The panel uses Surface, the theme's light background shade, which turns dark in dark mode.
Puts the header column on a panel with rounded corners. When it is off, on screens 1,000 px and wider, the cards fade out at the column's edge as they scroll under it. Shows with Header and cards.
Panel color
The fill of the header panel, described under this table. The default is Surface. Shows when Header panel is on.
Heading
With Header and cards, bold text starts a new line, so the heading reads as a light line over a bold one. With Cards only, the heading shows as plain text and bold has no effect.
Text
A short paragraph at the bottom of the header column. Shows with Header and cards.
Button label and Button link
A filled button under Text. Leave the label empty to hide it. Shows with Header and cards.
Arrows in the column
Moves the arrows from above the cards to the bottom of the header column, beside a card counter such as 01 / 06. Text and the button move up under the heading. When every card fits on the screen, the counter and the arrows hide. Shows with Header and cards.
Button beside the arrows
Puts the button at the bottom of the header column in place of the card counter. Shows when Arrows in the column is on and Button label has text.
Panel color offers four fills. Surface is the theme's light background shade, which turns dark in dark mode. Outline is the page background inside a thin border. Contrast is black on a light page, and a shade lighter than the page in dark mode. Accent uses the theme's accent color. With Contrast and Accent, the heading, the paragraph and the button turn light.
Badge
The badge is a round seal with a wavy edge at the top of the header column. It turns as the page scrolls. All its settings show with Header and cards, and it hides when its center and Circular text are both empty.
Setting
What it does
Center
What sits in the middle of the seal. Icon shows the icon chosen under Icon. Text shows Center text, such as a rating like 4.9.
Icon
Cup, Leaf, Box or Truck. None leaves the middle empty. Shows when Center is Icon.
Center text
A few characters for the middle of the seal. Shows when Center is Text.
Circular text
Text that runs around the edge of the seal from the top, repeated with a dot between copies.
Spin seal
Keeps the seal turning when the page is still. When it is off, the seal turns only while customers scroll.
Content
Setting
What it does
Content source
Custom fills the row with the cards you add as blocks. Products fills it with product cards.
Source
Collection shows products from the collection you choose under Collection. Related to the product and Bought with the product show Shopify's recommendations for the product on the page, so they work only on a product page and hide everywhere else. Shows when Content source is Products.
Columns
How wide each card is. Same as the product grid makes the cards as wide as those in a product grid, three across on most computer screens and four on wide ones. Two, Three and Four fit that many cards across the page width. On screens narrower than 1,000 px, every choice shows cards of the same width, and a phone shows one card and the start of the next.
Recommended products
Related to the product and Bought with the product use the product on the page, so add the section to a product template. Shopify's recommendations fill at most 10 cards, whatever Maximum products says. If Shopify has no recommendations for a product, the section stays hidden on that product's page. Recommend other products on the product page explains where each kind of recommendation comes from.
Products
Setting
What it does
Collection
The collection the products come from. Used when Source is Collection.
Maximum products
How many products the row shows, from 2 to 16. The default is 8. Shows when Content source is Products.
Product cards
These settings show when Content source is Products. They change how the cards in this section look, as Product card settings in sections explains.
With Custom, each card in the row is a block. The presets use the Media card block, which holds a photo, a heading and a paragraph, as Media card block explains. Click Add block in the section to add another card.
Empty card rail
The section does not appear on your store when it has nothing to show: no cards with Custom, or no products in the chosen collection. In the editor, it shows a message in its place, such as "Add cards to display this section." With Related to the product or Bought with the product on a page that is not a product page, the message is "Recommended products appear only on product pages."
The Card rail section shows a row of cards that customers scroll sideways, with arrows above the cards. The cards are either products from a collection or cards you build yourself. A column at the start of the row can hold a round seal badge, a heading, a short paragraph and a button. To add one, click Add section in the editor and select one of the three Card rail presets. It works on any page.
Presets
The Add section list shows three presets. Each one is a starting point, and its settings can change it into any of the others.
Card rail
Card rail with header
Card rail products
Style
Cards only
Header and cards
Header and cards
Content source
Custom, six cards
Custom, six cards
Products
Background panel
Off
Off
On
Header column
None
On a light panel, no badge
No panel, a seal badge with a cup icon and text around it, and a button
Use it for
A row of short stories or reasons to buy
A set of choices with an introduction, such as grind sizes
A collection with a sales message beside it
The Card rail products preset has no collection set. Until you choose one under Collection, it shows nothing on your store.
Layout
Setting
What it does
Gap
The space between the cards, and between the header column and the cards, from None to 120 px. The default is 24 px.
Style
Cards only shows the row across the page width, with the heading above it to the left of the arrows. Header and cards adds a tall column at the start of the row with the badge at the top, the heading under it, and Text and the button at the bottom. On screens 1,000 px and wider, the cards scroll in from under the column. On smaller screens, the column sits above the cards.
Background panel
Puts the whole section on a panel with rounded corners, inset from the edges of the screen. The panel uses Surface, the theme's light background shade, which turns dark in dark mode.
Margin top and Margin bottom are explained in Section layout settings.
Header
Setting
What it does
Header panel
Puts the header column on a panel with rounded corners. When it is off, on screens 1,000 px and wider, the cards fade out at the column's edge as they scroll under it. Shows with Header and cards.
Panel color
The fill of the header panel, described under this table. The default is Surface. Shows when Header panel is on.
Heading
With Header and cards, bold text starts a new line, so the heading reads as a light line over a bold one. With Cards only, the heading shows as plain text and bold has no effect.
Text
A short paragraph at the bottom of the header column. Shows with Header and cards.
Button label and Button link
A filled button under Text. Leave the label empty to hide it. Shows with Header and cards.
Arrows in the column
Moves the arrows from above the cards to the bottom of the header column, beside a card counter such as 01 / 06. Text and the button move up under the heading. When every card fits on the screen, the counter and the arrows hide. Shows with Header and cards.
Button beside the arrows
Puts the button at the bottom of the header column in place of the card counter. Shows when Arrows in the column is on and Button label has text.
Panel color offers four fills. Surface is the theme's light background shade, which turns dark in dark mode. Outline is the page background inside a thin border. Contrast is black on a light page, and a shade lighter than the page in dark mode. Accent uses the theme's accent color. With Contrast and Accent, the heading, the paragraph and the button turn light.
Badge
The badge is a round seal with a wavy edge at the top of the header column. It turns as the page scrolls. All its settings show with Header and cards, and it hides when its center and Circular text are both empty.
Setting
What it does
Center
What sits in the middle of the seal. Icon shows the icon chosen under Icon. Text shows Center text, such as a rating like
4.9.Icon
Cup, Leaf, Box or Truck. None leaves the middle empty. Shows when Center is Icon.
Center text
A few characters for the middle of the seal. Shows when Center is Text.
Circular text
Text that runs around the edge of the seal from the top, repeated with a dot between copies.
Spin seal
Keeps the seal turning when the page is still. When it is off, the seal turns only while customers scroll.
Content
Setting
What it does
Content source
Custom fills the row with the cards you add as blocks. Products fills it with product cards.
Source
Collection shows products from the collection you choose under Collection. Related to the product and Bought with the product show Shopify's recommendations for the product on the page, so they work only on a product page and hide everywhere else. Shows when Content source is Products.
Columns
How wide each card is. Same as the product grid makes the cards as wide as those in a product grid, three across on most computer screens and four on wide ones. Two, Three and Four fit that many cards across the page width. On screens narrower than 1,000 px, every choice shows cards of the same width, and a phone shows one card and the start of the next.
Recommended products
Related to the product and Bought with the product use the product on the page, so add the section to a product template. Shopify's recommendations fill at most 10 cards, whatever Maximum products says. If Shopify has no recommendations for a product, the section stays hidden on that product's page. Recommend other products on the product page explains where each kind of recommendation comes from.
Products
Setting
What it does
Collection
The collection the products come from. Used when Source is Collection.
Maximum products
How many products the row shows, from 2 to 16. The default is 8. Shows when Content source is Products.
Product cards
These settings show when Content source is Products. They change how the cards in this section look, as Product card settings in sections explains.
Motion
Dark moment, Rise on scroll and Chapter title are explained in Section motion settings.
Blocks
With Custom, each card in the row is a block. The presets use the Media card block, which holds a photo, a heading and a paragraph, as Media card block explains. Click Add block in the section to add another card.
Empty card rail
The section does not appear on your store when it has nothing to show: no cards with Custom, or no products in the chosen collection. In the editor, it shows a message in its place, such as "Add cards to display this section." With Related to the product or Bought with the product on a page that is not a product page, the message is "Recommended products appear only on product pages."