> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Collection

> The collection page: heading, description and image, collection navigation, filters and sorting, the product grid with promo tiles, and pagination.

![Collection on the storefront](https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/main-collection.webp?fit=max\&auto=format\&n=Y7lUE3PaLXfHjaRp\&q=85\&s=8ec70bdbfcfa7a4e2d851a6b479cbd75)

Collection, highlighted with the demo content

## Where to find it

Every collection that uses the default collection template. In the theme editor choose Collections, then Default collection, and select Collection.

## How it works

* The toolbar holds the Filter button with the number of active filters, the active filters as chips, the result count, sorting and the grid density buttons. It stays in view while scrolling.
* Filters come from the Search & Discovery app. They show in a drawer, or in a sidebar on desktop. In the drawer, results update when the shopper presses View; in the sidebar they update at once.
* Metal filters show as swatches, stones as small gem chips, and the filters named in Filters shown as size boxes as boxes.
* Collection navigation shows a menu of collection links with product counts under the heading.
* Promo tile blocks show inside the grid on the first page, unless the shopper filters or sorts.
* Pagination is a Load more button, infinite scroll (four pages, then the button) or page numbers.
* Shoppers choose 2, 3 or 4 columns on desktop with the density buttons, and the choice is remembered on their device.

![Collection in the theme editor](https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-main-collection.webp?fit=max\&auto=format\&n=ipMVAv6ECVUC3DoM\&q=85\&s=9e9789f0aea95aff1aa4bff9c2bc119f)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Set up filters in the Search & Discovery app. See [Search and Discovery filters](https://docs.kwebby.com/gloaming/guides/search-and-discovery-filters.md).
* Choose a Collection navigation menu, for example one with links to your main collections.
* Choose Filter layout on desktop, Filter groups open at first and Price shortcuts.
* Set Columns on desktop, Products per page and Pagination.
* Add a Promo tile block (up to 4), choose its position (Show after product) and width, and link it, for example to a private viewing page.
* Set a Client advisor link to add Ask a client advisor when no pieces match.

## Settings

| Setting | What it does |
| - | - |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |

**Page heading**

| Setting | What it does |
| - | - |
| **Show breadcrumbs** | On or off. Default: on. |
| **Show collection description** | On or off. Default: on. |
| **Show collection image** | On or off. The image set on the collection in Products, Collections. Default: on. |
| **Collection navigation** | Choose a menu. A menu of collection links shown under the heading. The current collection is marked. |
| **Show product counts in collection navigation** | On or off. Default: on. |

**Filters and sorting**

| Setting | What it does |
| - | - |
| **Enable filtering** | On or off. Add and order filters in the Search and Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/filters). Default: on. |
| **Filter layout on desktop** | Options: Drawer, Sidebar. Phones and tablets always use the drawer. In the drawer, results update when the shopper presses View; in the sidebar they update at once. Default: Drawer. |
| **Filter groups open at first** | Slider from 0 to 10. Groups with an active filter are always open. Default: 4. |
| **Filters shown as size boxes** | Text. Comma-separated filter names, such as a Ring size option. Default: Ring size, Size. |
| **Size guide link** | Link: a page, product, collection or web address. Shown under size boxes. |
| **Price shortcuts** | Text. Comma-separated amounts in your store currency, such as 3000, 10000. Shows Under 3,000, 3,000 to 10,000 and Over 10,000 under the price filter. |
| **Enable sorting** | On or off. Default: on. |

**Product grid**

| Setting | What it does |
| - | - |
| **Columns on desktop** | Options: 2, 3, 4. Default: 4. |
| **Show grid density buttons** | On or off. Shoppers choose 2, 3 or 4 columns on desktop, and their choice is remembered on this device. Default: on. |
| **Products per page** | Slider from 8 to 48, in steps of 4. Default: 24. |
| **Pagination** | Options: Load more button, Infinite scroll, Page numbers. Infinite scroll loads four pages on its own, then shows the button. Page numbers stay in the page for search engines. Default: Load more button. |

**Empty results**

| Setting | What it does |
| - | - |
| **Client advisor link** | Link: a page, product, collection or web address. Adds "Ask a client advisor" when nothing matches, for example a link to your contact page. |

## Blocks

Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Promo tile (up to 4)

> [!TIP]
>
> Shown inside the grid on the first page, unless the shopper filters or sorts.

| Setting | What it does |
| - | - |
| **Image** | Image: upload one or choose from Content → Files. |
| **Eyebrow** | Text. Default: The salon. |
| **Heading** | Text. Default: See it before you choose. |
| **Text** | Text (several lines). Default: Book an hour in the salon or by video. Any piece, no obligation. |
| **Link label** | Text. Default: Book a private viewing. |
| **Link** | Link: a page, product, collection or web address. The whole tile becomes the link. |
| **Show after product** | Slider from 1 to 24. Default: 5. |
| **Width** | Options: One column, Two columns. Default: Two columns. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.