Product cards with deck

Product cards with deck pairs a product listing with a large editorial Sticky card. On desktop, the product cards scroll while the editorial card stays in view. On smaller screens the sticky card moves above the product list, and the products become a swipeable row.

Add the section

1. In the theme editor, open the page where you want the section.
2. Click Add section.
3. Under Products, choose Product cards with deck.

The section includes a Header, a button, the reusable product card design, and a Card deck holding three Sticky card blocks. Select those entries in the block list to change their content.

Products

• Collection: uses products from the selected collection.
• Products: lets you choose individual products.
• Products to show: how many products appear, from 2 to 8. Default is 6.
• Card size: Normal or Large. Large gives each product card more room, so fewer sit in a row.

When both sources are set, Collection supplies the products. Leave Collection empty to use the products selected under Products.

The product cards follow the card design stored in the section's Product card block. Open it to use the global product-card settings or configure this placement separately.

Card deck

The editorial side is a Card deck block rather than a single card, so you can rotate through several without adding another section. Add or remove Sticky card children inside it to decide how many cards the deck holds. With one card the deck stands still; with more than one it cycles through them.

• Rotate cards automatically: cycles through the deck on its own. On by default.
• Change cards every: how long each card stays on screen, from 3 to 20 seconds. Available while Rotate cards automatically is on.
• Pause on hover: holds the current card while the pointer is over it. Available while Rotate cards automatically is on.

Sticky card

Each card in the deck is a Sticky card block inside Card deck. Open one to set:

• Image: the desktop image.
• Mobile image: an optional replacement on smaller screens.
• Overlay strength: adjusts the fade behind the card's content, from 50 to 150 percent.

The text and button over the image are child blocks inside Sticky card. Edit, remove, or reorder them like other content blocks.

This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings.