# Product list block

Source: https://themes.spicydesign.ca/help/reference/blocks/product-list/
Updated: 2026-11-12

A list of products from a collection or a hand-picked set. Settings for the Product list block in the Picante Shopify theme.


A list of products from a collection or a hand-picked set.

**Where to find it:** open any section sidebar that accepts theme blocks, choose **Add block**, then pick **Product list**.

The same block in the three themes:

![The Product list block in the Picante style.](https://themes.spicydesign.ca/help/shots/block-product-list--picante.webp)

![The Product list block in the Overdrive style.](https://themes.spicydesign.ca/help/shots/block-product-list--overdrive.webp)

![The Product list block in the Pastille style.](https://themes.spicydesign.ca/help/shots/block-product-list--pastille.webp)

When you add this section, you can start from these presets: **Product list**, **Product row**.

## Settings

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

### Layout

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Layout | Select | Grid | Grid, Scrollable row |  |
| Columns on desktop | Slider | 4 | 2 to 6, step 1 | Sets the most columns the grid shows. A narrow column shows fewer so cards stay readable. |
| Columns on mobile | Select | 2 columns | 1 column, 2 columns |  |
| Show arrows | Checkbox | On |  | Shown when **Layout** is Scrollable row. |

### Product cards

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Image ratio | Select | Use theme setting | Use theme setting, Adapt to image, Portrait (4:5), Square (1:1), Landscape (4:3), Wide (16:9) |  |
| Vendor | Select | Use theme setting | Use theme setting, Show, Hide |  |
| Show quick action button | Select | Use theme setting | Use theme setting, Show, Hide |  |
| Heading level | Select | Heading 3 | Heading 2, Heading 3, Heading 4, Heading 5, Heading 6 | Use one level below the heading above the card, so the page outline stays in order. |

### Size

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Alignment | Text alignment | left | Left, center, right |  |
| Width | Select | Fill | Fill, Custom |  |
| Custom width | Slider | 50 % | 10 to 100 %, step 5 | Shown when **Width** is Custom. |
| Max width | Select | None | None, Narrow, Normal, Wide |  |

### Colors and border

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Inherit color scheme | Checkbox | On |  |  |
| Color scheme | Color scheme | Scheme 1 |  | 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 | None | Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in | Cards already slide in one after another. Pick an effect to animate the whole block as well. |