Rich text: Scroll cards

Pair a brand message with scrolling product cards, so your text stays in view while shoppers browse the products around it.

Pro feature. This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. Learn about plans and License keys

---

The Rich text: Scroll cards section places your caption, heading, text and button in a center column that stays in place on desktop while two staggered columns of image cards scroll past on either side. Cards linked to a product show a small product bar with the image, title, price and a Quick view button. On mobile, the text appears first, followed by the cards in a horizontal swipe row. Use it to tell your brand story while showcasing key products.

1. Our guide to set up a Rich text: Scroll cards section:

Steps:

• In the theme editor, click Add section.

• Locate Rich text: Scrolling cards (that's its name in the Add section list).

• Pick a Product (and optionally a Card image) for each Card block.

• Click Save.

2. Section settings

• Color scheme: Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.

• Content

  • Caption: Small text shown above the heading.

  • Heading: The main title. Wrap words in *asterisks* to highlight them, for example: Talk about your *brand*.

  • Heading size: H1 / H2 / H3 / H4 / H5 / H6.

  • Heading width: Maximum width of the heading, 200–800px.

  • Description: Text shown below the heading.

  • Content width: Maximum width of the description, 200–800px.

  • Button label: Text on the button. Leave empty to hide the button.

  • Button link: Where the button goes.

  • Use outline button style: Shows an outline button instead of a solid one.

• Position

  • Desktop content alignment: Left / Center / Right.

  • Mobile content alignment: Left / Center / Right.

• Cards

  • Card image ratio: Adapt to image / Portrait / Square.

  • Right column stagger: How far the right column of cards is pushed down on desktop, 0–240px.

• Highlight

  • Highlight style: How the *highlighted* heading words are styled: None / Animated underline / Colored background / Text color.

  • Highlight color: Color used for the highlight.

• Corner radius

  • Card: Roundness of the card corners, 0–40px.

• Section padding

  • Top padding: 0–100px.

  • Bottom padding: 0–100px.

3. Card block settings

Each Card block adds one card. Cards alternate between the left and right columns on desktop. The section can have up to 8 cards.

• Product: The product shown on the card. Adds the product bar (image, title, price and Quick view button) and links the card image to the product page. Leave empty for an image-only card.

• Card image: Optional. Falls back to the product's featured image.

• Image focal point: Which part of the image stays visible when it's cropped: Center / Top / Bottom / Left / Right.

4. Tips

• Use an even number of cards so both columns end at a similar height.

• Upload a lifestyle Card image to make the cards feel less like a product grid. The product bar still shows the product's own image.

• Keep the center text short so it fits on screen while it stays in place on desktop.