> 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.md).

# Multicolumn

Show content side by side in columns with images, videos or icons. Great for highlighting your values, how your company works or key product benefits.

***

InspiredTheme includes four Multicolumn sections. They all show a row of columns, but each has a different card style:

| Section                 | What it shows                                                                                                                                                                                      | Plan      |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| **Multicolumn: Media**  | Columns with an image or video, heading, text and link.                                                                                                                                            | All plans |
| **Multicolumn: Icons**  | Columns with an icon (or your own small image), heading, text and link.                                                                                                                            | All plans |
| **Multicolumn: Cards**  | Image or video cards with text laid over the media, plus product tags that open a Shop the look popup. [Read the Multicolumn: Cards guide](/articles/sections/theme-sections/multicolumn-cards.md) | Pro       |
| **Multicolumn: Reveal** | Image or video cards with a heading; shoppers tap **+** to reveal more text. [Read the Multicolumn: Reveal guide](/articles/sections/theme-sections/multicolumn-reveal.md)                         | Pro       |

This article covers **Multicolumn: Media** and **Multicolumn: Icons**.

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FlJFCY1DMY59KbMP6YgR8%2FScreenshot%202026-04-16%20at%204.13.56%E2%80%AFPM.png?alt=media&amp;token=5cab776b-06fa-4d37-a833-4a2beb24c2e9" alt="Multicolumn section"><figcaption></figcaption></figure>

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

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Multicolumn: Media** or **Multicolumn: Icons.**
* Click **Save.**
  {% endhint %}

Each section is added with three columns. Click **Add block** to add more, or drag them to reorder.

### 2. Multicolumn: Media section settings

* **Section header**
  * **Heading:** The title shown above the columns. Leave it blank to hide it.
  * **Heading size:** 15–80px.
  * **Heading alignment:** Left / Center.
* **Button**
  * **Button label** and **Button link:** A button shown below the columns. Leave the label blank to hide it.
* **Card settings**
  * **Image width:** Width of the image inside each column, 10–100%.
  * **Image ratio:** Crops every image to the same shape: Adapt to image / Portrait / Square / Circle / Reel (9:16) / Landscape / Arch / Fluid. **Adapt to image** keeps each image's original shape.
  * **Column alignment:** Left / Center.
  * **Number of columns on desktop:** 2–6.
  * **Enable carousel on desktop:** Turns the row into a slider when there are more columns than **Number of columns on desktop**.
* **Colors**
  * **Color scheme:** The section background.
  * **Container color scheme:** The background of each column.
* **Mobile layout**
  * **Number of columns on mobile:** 1 column / 2 columns.
  * **Enable swipe on mobile:** Turns the columns into a swipeable slider on phones. Sliders always show 1 column.
* **Corner radius**
  * **Card:** 0–40px.
* **Section padding**
  * **Top padding** and **Bottom padding:** 0–100px.

**Column block**

* **Image:** The column's image.
* **Video:** A Shopify-hosted video. If you set both, the video is shown instead of the image. It plays automatically, without sound.
* **Heading:** The column's title. **Heading size:** 15–60px.
* **Description:** The column's text.
* **Link label** and **Link:** A text link below the description. Leave the label blank to hide it.

### 3. Multicolumn: Icons section settings

The settings are the same as **Multicolumn: Media**, except:

* There's no **Image width** or **Image ratio**.
* **Column padding:** Space inside each column, 20–80px.
* **Column alignment** is **Center** by default.
* **Corner radius** applies to the **Column container**.

**Icon block**

* **Icon:** Choose from 30 built-in icons, or **None**.
* **Alternative icon/image:** Upload your own icon or small image. It replaces the built-in icon.
* **Icon size:** 30–150px.
* **Heading:** The column's title. **Heading size:** 15–60px.
* **Description:** The column's text.
* **Link label** and **Link:** A text link below the description.

### 4. Tips

* Use **Multicolumn: Icons** for quick benefit rows such as free shipping, returns and secure checkout, and **Multicolumn: Media** when each column needs a photo or video.
* Set **Image ratio** to **Square**, **Circle** or **Portrait** so columns line up even if your images are different sizes.
* Use a different **Container color scheme** from the section's **Color scheme** to show each column as a card.