> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/collection-page-sections/collection-page-sections/collection-page.md).

# Collection page

The main section on every collection page. It shows the product grid alongside the filter and sort toolbar. This section is fixed to the collection template and cannot be added to other page types.

***

## Structure

```
┌────────────────────────────────────────────────────────────┐
│  [ Filter ]  [ Product Count ]  [ Sort ]  [ Column Switch ] │  ← Filter and sort block
├────────────────────────────────────────────────────────────┤
│  ┌──────────┐  ┌─────────────────────────────────────────┐ │
│  │          │  │  [Product] [Product] [Product] [Product] │ │
│  │ Sidebar  │  │  [Product] [Product] [Product] [Product] │ │  ← Product list block
│  │ Filters  │  │  [Product] [Product] [Product] [Product] │ │
│  │          │  │           [ Pagination ]                 │ │
│  └──────────┘  └─────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────┘
```

[**Filter and sort block**](#filter-and-sort-block) — Toolbar with the filter button, product count, sort dropdown, and column switcher.

[**Product list block**](#product-list-block) — Product grid with configurable columns, gaps, and pagination.

![Collection page structure](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-031157bbdb9a22dc48cd6b2e2068bab81c0ada22%2Fcollection-page-section-structure.png?alt=media)

***

## Settings

| Setting                       | Description                                                                                                                                                                     |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Products per page             | Number of products loaded per page or per infinite scroll batch.                                                                                                                |
| Width                         | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. |
| Gap — Desktop                 | Spacing between the filter sidebar and the product grid on desktop.                                                                                                             |
| Gap — Mobile                  | Spacing on mobile.                                                                                                                                                              |
| Color scheme                  | Colors for the section.                                                                                                                                                         |
| Padding top / bottom          | Outer vertical spacing.                                                                                                                                                         |
| Custom padding for mobile     | Set separate top and bottom padding for mobile.                                                                                                                                 |
| Padding top / bottom (mobile) | Outer vertical spacing on mobile. Shown when custom mobile padding is on.                                                                                                       |

***

## Filter and Sort Block

A toolbar above the product grid. It holds four independent sub-blocks — Filter, Product count, Sort, and Column switcher — each configured separately.

{% hint style="info" %}
Add, rename, and reorder the filters themselves in Shopify's free **Search & Discovery** app — see [Adding filters with Shopify Search & Discovery](https://help.shopify.com/en/manual/online-store/storefront-search/search-and-discovery-filters).
{% endhint %}

**Toolbar settings:**

| Setting                       | Description                                                                            |
| ----------------------------- | -------------------------------------------------------------------------------------- |
| Gap                           | Spacing between toolbar items.                                                         |
| Button height                 | Uniform height for the toolbar buttons.                                                |
| Sticky on mobile              | Keep the toolbar fixed to the top of the screen while scrolling on mobile.             |
| Padding top / bottom          | Vertical spacing around the toolbar.                                                   |
| Custom padding for mobile     | Set separate toolbar padding for mobile.                                               |
| Padding top / bottom (mobile) | Vertical spacing around the toolbar on mobile. Shown when custom mobile padding is on. |

### Filter

Controls how filters are displayed and how customers open them.

{% tabs %}
{% tab title="Sidebar" %}
![Filter — Sidebar layout](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-4f674ff29bd021018f89d7b5c6b20da923275e15%2Fcollection-page-filter-sidebar.png?alt=media)

Filters sit in a column beside the product grid on desktop. On smaller screens they collapse behind a button that opens a drawer.
{% endtab %}

{% tab title="Drawer" %}
![Filter — Drawer layout](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-56806a97f1c997d6ec017ebddac3e7869022d311%2Fcollection-page-filter-drawer.png?alt=media)

Filters stay hidden behind a button on every screen. Opening it slides in a drawer with all filters and sort options together.
{% endtab %}
{% endtabs %}

**Desktop settings:**

| Setting               | Description                                                     |
| --------------------- | --------------------------------------------------------------- |
| Layout                | Show filters in a sidebar or a drawer.                          |
| Sidebar visibility    | Whether the sidebar starts open or closed. Sidebar layout only. |
| Sidebar right padding | Space between the sidebar and the product grid.                 |
| Drawer position       | Which side the drawer slides in from. Drawer layout only.       |
| Filter button style   | Visual style of the filter button.                              |
| Filter icon           | Icon shown on the filter button.                                |

**Mobile settings:**

| Setting             | Description                                                             |
| ------------------- | ----------------------------------------------------------------------- |
| Layout              | Whether the filter panel slides up from the bottom or in from the side. |
| Filter button style | Visual style of the filter button, set independently from desktop.      |

**Filter panel settings:**

| Setting          | Description                                                              |
| ---------------- | ------------------------------------------------------------------------ |
| Heading size     | Size of each filter group label.                                         |
| Collapse icon    | Icon shown for collapsible filter groups.                                |
| Collapse filters | Start every filter group collapsed.                                      |
| Items limit      | Maximum filter values shown per group before a "Show more" link appears. |

### Product Count

Shows the number of products matching the active filters.

| Setting   | Description                                  |
| --------- | -------------------------------------------- |
| Alignment | Which side of the toolbar the count sits on. |

### Sort

A dropdown that lets customers re-order products. The available options come from Shopify's default sort keys.

| Setting | Description                         |
| ------- | ----------------------------------- |
| Style   | Button style for the sort dropdown. |

### Column Switcher

Lets customers change the number of product columns without leaving the page. Set separately for desktop and mobile.

**Desktop:**

| Setting | Description                                        |
| ------- | -------------------------------------------------- |
| Type    | Show the switcher as grid icons or numeric labels. |
| Style   | Button style. Available when Type is text.         |

**Mobile:**

| Setting | Description                                 |
| ------- | ------------------------------------------- |
| Type    | Same choices as desktop, set independently. |
| Style   | Button style.                               |

***

## Product List Block

Renders the product grid. Products are paginated by the **Products per page** setting above, and the grid is configured separately for desktop and mobile.

**Desktop layout:**

| Setting        | Description                           |
| -------------- | ------------------------------------- |
| Columns        | Number of product columns on desktop. |
| Horizontal gap | Spacing between cards horizontally.   |
| Vertical gap   | Spacing between card rows.            |

**Mobile layout:**

| Setting              | Description                                                 |
| -------------------- | ----------------------------------------------------------- |
| Columns              | Number of product columns on mobile.                        |
| Horizontal gap       | Spacing between cards on mobile.                            |
| Vertical gap         | Spacing between card rows on mobile.                        |
| Full width on mobile | Stretch cards to the full viewport width when Columns is 1. |

{% hint style="info" %}
Product card appearance — image ratio, quick add, swatches, badges — is set globally in [**Theme Settings → Product Cards**](/helix/theme-settings/product-cards.md). The column switcher lets customers override the column count while browsing.
{% endhint %}

### Promo Card

An optional promotional tile inserted into the product grid at a chosen position. Add more than one to build a mixed product-and-editorial feed.

![Promo Card in product grid](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-320a4189ea0bb1637ea0efe819cabf4275d73999%2Fcollection-page-promo-card.png?alt=media)

**Layout:**

| Setting         | Description                               |
| --------------- | ----------------------------------------- |
| Card position   | Grid position where the card is inserted. |
| Desktop columns | Width of the card in the grid.            |
| Mobile columns  | Width of the card on mobile.              |
| Card link       | URL the whole card links to.              |
| Open in new tab | Open the link in a new browser tab.       |

**Media:**

| Setting       | Description                         |
| ------------- | ----------------------------------- |
| Media type    | Use an image or a video.            |
| Image         | Desktop background image.           |
| Image mobile  | Separate image for mobile.          |
| Video         | Shopify-hosted background video.    |
| Overlay       | Add a color overlay over the media. |
| Overlay color | Color and opacity of the overlay.   |

**Content:**

| Setting         | Description                                                                         |
| --------------- | ----------------------------------------------------------------------------------- |
| Subheading      | Small text above the heading.                                                       |
| Heading         | Card headline.                                                                      |
| Text            | Supporting paragraph.                                                               |
| Alignment       | Horizontal alignment of the content.                                                |
| Position        | Vertical position of the content within the card.                                   |
| Separate button | Pin the button to the bottom of the card. Available when Position is top or center. |

**Typography:**

| Setting      | Description                  |
| ------------ | ---------------------------- |
| Heading size | Visual size of the heading.  |
| Text size    | Size of the supporting text. |

**Button:**

| Setting            | Description                                                                         |
| ------------------ | ----------------------------------------------------------------------------------- |
| Label              | Button text.                                                                        |
| Style              | Visual style of the button.                                                         |
| Show icon          | Add an icon to the button label.                                                    |
| Icon               | The icon to show.                                                                   |
| Icon position      | Which side of the label the icon sits on.                                           |
| Icon size          | Match the button text or set a custom size.                                         |
| Icon size (custom) | Explicit icon size. Shown when Icon size is custom.                                 |
| Height             | Button height.                                                                      |
| Full width         | Stretch the button to fill the card width. Not available for subtle or text styles. |

**Gap:**

| Setting        | Description                                    |
| -------------- | ---------------------------------------------- |
| Content gap    | Spacing between subheading, heading, and text. |
| Button spacing | Spacing above the button.                      |

**Color:**

| Setting      | Description                                |
| ------------ | ------------------------------------------ |
| Color scheme | Colors applied to the card's content area. |

**Padding:**

| Setting                             | Description                                                                |
| ----------------------------------- | -------------------------------------------------------------------------- |
| Top / Bottom                        | Vertical padding inside the card.                                          |
| Left / Right                        | Horizontal padding inside the card.                                        |
| Custom padding for mobile           | Set separate padding for mobile.                                           |
| Top / Bottom, Left / Right (mobile) | Padding inside the card on mobile. Shown when custom mobile padding is on. |

***

{% hint style="info" icon="headset" %}
**Need help?**

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

<a href="https://go.crisp.chat/chat/embed/?website_id=6c25581e-794a-41b4-8552-52f3de1dd1f7" class="button secondary" data-icon="comments">Chat with us</a> <a href="https://modutheme.ticksy.com" class="button primary" data-icon="ticket">Submit a ticket</a>
{% endhint %}