# Multicolumn section

Source: https://themes.spicydesign.ca/help/reference/sections/multicolumn/
Updated: 2026-11-12

Columns of free content with surface / outline styles and a mobile carousel. Settings for the Multicolumn section in the Picante Shopify theme.


Columns of free content with surface / outline styles and a mobile carousel.

The same section in the three themes:

![The Multicolumn section in the Picante style.](https://themes.spicydesign.ca/help/shots/section-multicolumn--picante.webp)

![The Multicolumn section in the Overdrive style.](https://themes.spicydesign.ca/help/shots/section-multicolumn--overdrive.webp)

![The Multicolumn section in the Pastille style.](https://themes.spicydesign.ca/help/shots/section-multicolumn--pastille.webp)

**Where to find it:** In the theme editor, choose **Add section** on any template, then pick **Multicolumn**.

The heading area is a static block named **Section header**. Select it in the section sidebar to edit the eyebrow, heading, text and buttons, or to restyle or reorder them.

When you add this section, it starts from the **Multicolumn** preset.

## Settings

### Layout

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Columns on desktop | Slider | 3 | 2 to 6, step 1 |  |
| Columns on mobile | Select | 1 column | 1 column, 2 columns |  |
| Swipe through columns on mobile | Checkbox | Off |  | Shows the columns in one row with the next one peeking in. |
| Gap | Slider | 24 px | 0 to 64 px, step 4 |  |

### Columns

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Column style | Select | Filled card | Plain, Filled card, Outlined card |  |
| Content alignment | Select | Left | Left, Center |  |
| Image ratio | Select | Square (1:1) | Adapt to image, Portrait (4:5), Square (1:1), Landscape (4:3), Wide (16:9) |  |
| Hover effect | Select | Lift | None, Lift, Enlarge icon | Applies on devices with a mouse. |

### Section style

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Color scheme | Color scheme | Scheme 4 |  |  |
| Layout width | Select | Page width | Page width, Full width |  |
| Animation on scroll | Select | Theme default | Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in |  |
| Top padding | Slider | 80 px | 0 to 200 px, step 8 |  |
| Bottom padding | Slider | 80 px | 0 to 200 px, step 8 |  |

## Blocks

Add, reorder, duplicate or remove these blocks in the section sidebar: **Section header**, **Column**.

This section holds up to 12 blocks.

### Section header block settings

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Layout | Select | Stacked | Stacked, Split: content left, button right |  |
| Alignment | Select | Left | Left, Center, Right | Shown when **Layout** is Stacked. |
| Max width | Select | None | None, Narrow, Normal |  |
| Gap | Slider | 12 px | 0 to 64 px, step 4 |  |
| Space below | Slider | 48 px | 0 to 120 px, step 4 |  |
| Animation on scroll | Select | None | Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in |  |


### Column block settings

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Image | Image |  |  | An image replaces the icon. |
| Icon | Select | Sparkle | None, Flame, Sparkle, Leaf, Truck, Star, Heart, Check, Mail, Cart |  |
| Icon style | Select | Filled circle | Plain, Filled circle, Outlined circle | Shown when **Icon** is not None. |
| Icon size | Slider | 32 px | 20 to 96 px, step 4 | Shown when **Icon** is not None. |

#### Colors and border

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Inherit color scheme | Checkbox | On |  |  |
| Color scheme | Color scheme | Scheme 3 |  | Shown when **Inherit color scheme** is off. |
| Corner radius | Slider | 0 px | 0 to 80 px, step 2 |  |
| Border | Select | None | None, Solid, Dashed |  |
| Border thickness | Slider | 2 px | 1 to 8 px, step 1 | Shown when **Border** is not None. |

#### Padding

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Customize padding | Checkbox | Off |  | Padding settings stay visible while any side has padding. Set a side to 0px to remove its padding. |
| Top padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Bottom padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Left padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Right padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |

#### Motion

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Animation on scroll | Select | Theme default | Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in |  |