> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/multicolumn-cards.md).

# 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.

{% hint style="warning" %}
**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](/articles/general-information/license-key-and-plans.md)
{% endhint %}

***

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:

{% hint style="info" %}
**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.**
  {% endhint %}

### 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.