# Custom section section

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

Blank section that accepts any theme or app blocks in a row or column layout. Settings for the Custom section section in the Picante Shopify theme.


Blank section that accepts any theme or app blocks in a row or column layout.

The same section in the three themes:

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

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

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

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

When you add this section, you can start from these presets: **Custom section**, **Columns with color backgrounds**, **Story with media**, **Features with icons**, **Video banner**, **Large heading with text**, **Newsletter band**, **Questions and answers**, **Product with story**, **Store highlights**, **Shop the collection**, **Social media and contact**.

## Settings

### Section style

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Color scheme | Color scheme | Scheme 1 |  |  |
| Layout width | Select | Page width | Page width, Full width |  |

### Layout

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Layout mode | Select | Stack or row | Stack or row, Grid |  |
| Direction | Select | Vertical | Vertical, Horizontal | Shown when **Layout mode** is Stack or row. |
| Columns on desktop | Slider | 3 | 1 to 6, step 1 | Shown when **Layout mode** is Grid. |
| Columns on mobile | Slider | 1 | 1 to 4, step 1 | Shown when **Layout mode** is Grid. |
| Horizontal alignment | Select | Left | Left, Center, Right, Space between |  |
| Vertical alignment | Select | Top | Top, Middle, Bottom, Stretch to equal height |  |
| Gap | Slider | 24 px | 0 to 100 px, step 4 |  |
| Wrap onto new lines | Checkbox | On |  | When off, blocks stay on one line and shrink to fit. Shown when **Layout mode** is Stack or row and **Direction** is Horizontal. |
| Stack on mobile | Checkbox | On |  | Shown when **Layout mode** is Stack or row and **Direction** is Horizontal. |
| Content width | Select | None | None, Narrow, Normal, Wide |  |

### Height

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Height | Select | Custom | Auto, Small, Medium, Large, Full screen, Custom |  |
| Minimum height | Slider | 0 svh | 0 to 100 svh, step 5 | Shown when **Height** is Custom. |

### Background

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Image | Image |  |  |  |
| Video | Video |  |  | Plays muted on a loop with a pause button. The image shows first, and stays for customers who prefer reduced motion. |
| Show placeholder image | Checkbox | Off |  | Previews the layout with a sample image until you select an image or video. Customers see the sample image too, so add your own before you publish. Shown when **Image** is on and **Video** is on. |
| Drift images on scroll | Checkbox | On |  | Shown when **Image** is on and **Video** is on. |
| Overlay opacity | Slider | 40 % | 0 to 90 %, step 5 | Tints the image with the section background color so content stays readable. Shown when **Image** is on or **Video** is on or **Show placeholder image** is on. |
| Overlay color | Color |  |  | Leave empty to use the color scheme background. Shown when **Image** is on or **Video** is on or **Show placeholder image** is on. |
| Overlay text color | Color |  |  | Text color on top of the background image or video. Leave empty to use the color scheme text. Shown when **Image** is on or **Video** is on or **Show placeholder image** is on. |
| Overlay style | Select | Solid | Solid, Gradient | Shown when **Image** is on or **Video** is on or **Show placeholder image** is on. |
| Gradient strongest at | Select | Bottom | Bottom, Top, Left, Right | Shown when **Overlay style** is Gradient and **Image** is on and **Video** is on and **Show placeholder image** is on. |

### Padding

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Top padding | Slider | 80 px | 0 to 200 px, step 8 |  |
| Bottom padding | Slider | 80 px | 0 to 200 px, step 8 |  |

### Borders

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Show top border | Checkbox | Off |  |  |
| Show bottom border | Checkbox | Off |  |  |
| Border thickness | Slider | 2 px | 1 to 8 px, step 1 | Shown when **Show top border** is on or **Show bottom border** 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 |  |

## Blocks

You can also add any theme block (see [Blocks](https://themes.spicydesign.ca/help/reference/blocks/heading/)) and app blocks to this section.