# Featured products section

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

Products from a collection as a grid, drag carousel or editorial layout with one feature card.


Products from a collection as a grid, drag carousel or editorial layout with one feature card.

The same section in the three themes:

![The Featured products section in the Picante style.](https://themes.spicydesign.ca/help/shots/section-featured-collection--picante.webp)

![The Featured products section in the Overdrive style.](https://themes.spicydesign.ca/help/shots/section-featured-collection--overdrive.webp)

![The Featured products section in the Pastille style.](https://themes.spicydesign.ca/help/shots/section-featured-collection--pastille.webp)

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

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, you can start from these presets: **Featured products**, **Product carousel**, **Editorial product grid**.

## Settings

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Collection | Collection |  |  |  |
| Products to show | Slider | 8 | 2 to 16, step 1 |  |

### Header

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Header link label | Text | Shop the collection |  | Links to the selected collection. Leave empty to hide it. |

### Layout

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Layout | Select | Grid | Grid, Carousel, Editorial (one large card) |  |
| Large card position | Select | Left | Left, Right | Shown when **Layout** is Editorial (one large card). |
| Columns on desktop | Slider | 4 | 2 to 6, step 1 |  |
| Columns on mobile | Select | 2 columns | 1 column, 2 columns |  |
| Image ratio | Select | Use theme setting | Use theme setting, Adapt to image, Portrait (4:5), Square (1:1), Landscape (4:3) |  |
| Show arrows | Checkbox | On |  | Shown when **Layout** is Carousel. |
| Show "View all" button | Checkbox | On |  | Appears when the collection has more products than shown. |
| Button style | Select | Solid | Solid, Outline, Text link | Shown when **Show "View all" button** is on. |

### Section style

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Color scheme | Color scheme | Scheme 1 |  |  |
| 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**.

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