Multicolumn: Cards

Show image or video cards with text and a button, and tag products on each card so shoppers can shop the look from a popup.

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 Multicolumn: Cards section displays a row of full-bleed image or video cards, each with an optional badge, heading, description and button laid over the media. You can tag up to 3 products on any card: a tag button with the item count appears on the card and opens a "Shop the look" popup where shoppers can view the products and open Quick view. Use it for collection highlights, lookbooks or ingredient and benefit stories.

1. Our guide to set up a Multicolumn: Cards section:

Steps:

• In the theme editor, click Add section.

• Locate Multicolumn: Cards.

• Add an image or video to each Card block, and optionally pick Products to tag.

• Click Save.

2. Section settings

• Section header

  • Caption: Small text shown above the heading.

  • Heading: The main title of the section.

  • Heading size: Size of the heading, 20–60px.

  • Text: Short text shown below the heading.

  • Header alignment: Left / Center.

• Layout

  • Columns on desktop: Number of cards per row on desktop, 2–4. Mobile always shows one card per row.

  • Enable carousel on desktop: Turns the cards into a slider with arrows on desktop. Only applies when you have more cards than columns.

  • Enable swipe on mobile: Turns the cards into a swipeable row on mobile instead of stacking them.

• Card

  • Card ratio: Shape of every card: Portrait / Square / Tall (reel) / Landscape / Adapt to image.

  • Content position: Where the text sits on the card: Top / Middle / Bottom / Space between (badge at the top, text and button at the bottom).

  • Image overlay opacity: Darkens the image so text is easier to read, 0–100%.

• Shop the look popup

  • Popup heading: Title shown in the popup that lists a card's tagged products (default "Shop the look").

• Colors

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

  • Card text color: Color of the text shown on top of the cards.

• 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. The section can have up to 8 cards.

• Products: Tag up to 3 products on this card. A tag button with the item count appears on the card and opens the "Shop the look" popup.

• Content

  • Image: The card background image.

  • Video: A background video that plays muted on a loop. Overrides the image when both are set.

  • Badge: Small label shown on the card. Leave empty to hide it.

  • Heading: The card title.

  • Heading size: Size of the card title, 18–48px.

  • Description: Short text shown below the card title.

  • Button label: Text on the card 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.

• Badge colors

  • Badge background: Background color of the badge.

  • Badge text: Text color of the badge.

4. Tips

• When a card has both a video and tagged products, add an image too. The popup uses the image, or the video's preview image if there is no image.

• Pre-order products open their product page from the popup instead of Quick view.

• Tall (reel) works well with vertical videos. Raise Image overlay opacity if light images make the text hard to read.

• For cards that reveal their text on tap, use the Multicolumn: Reveal section instead.