# Collection pages

How the collection page's banner, filters, sorting, product grid and pagination work, and how to set up the collections list.

A collection page shows the collection's title and product count, an optional banner and description, a filter bar, and a grid of product cards with page numbers.

## Page header

| Setting | Notes |
| --- | --- |
| "Show breadcrumbs" | A trail such as HOME / AUDIO above the heading, linking back to the home page. On by default. |
| "Show collection image" | Shows the collection's image as a wide banner in a panel, with the title and product count in its header strip. On by default. Hidden for collections without an image. |
| "Show description" | Shows the collection description under the title. On by default. |

Above the title, a small line reads "Catalog index // 48 units" with the collection's product count.

> **Tip:** The banner is shown at a 3:1 ratio and cropped to fit. Use a landscape image, at least 2000 px across, with the subject near the center.

## Filtering

| Setting | Notes |
| --- | --- |
| "Enable filtering" | Set up filters in Shopify search and discovery. On by default. |

Filters come from Shopify's **Search & Discovery** app. Install it, open **Filters**, and add the filters you want, such as Availability, Price, Product type, Vendor, Color or a product metafield. Techno shows each filter as a dropdown in the filter bar, which is prompted with "filter >".

| Filter type | Shown as |
| --- | --- |
| Price | "From" and "To" number fields |
| Values with swatches, such as Color | Checkboxes with color or image swatches and a product count |
| All other values | Checkboxes with a product count beside each value |

* Values with no matching products are faded and can't be ticked.
* A dropdown with active values opens automatically and shows how many are selected.
* Active filters appear as removable chips under the bar, with a "Clear all" link.
* Results update as soon as a filter changes, without reloading the page. If the request fails, the page loads the filtered URL normally instead, unless the shopper has already clicked away, for example on a product. If JavaScript fails to load, an "Apply" button appears instead.

The filter bar is hidden when filtering is on but the collection has no filters to offer and sorting is off.

> **Note:** Shopify doesn't offer filters on collections with more than 5,000 products. Sorting still works on those collections.

## Sorting

| Setting | Notes |
| --- | --- |
| "Enable sorting" | Shows the "Sort by" control in the filter bar. On by default. |

Shoppers can choose from Shopify's standard sort orders, such as Featured, Best selling, alphabetical, price and date. "Featured" is the manual order you set on the collection in Shopify admin. The collection's own sort order is selected when the page opens. You can rename the options in **Edit default theme content**, but not remove them.

## Product grid

| Setting | Notes |
| --- | --- |
| "Products per page" | 8 to 36, in steps of 4. Default 12. |
| "Show vendor" | Shows the vendor instead of the product type on each card. Off by default. |

The grid fits as many cards per row as the page width allows. Each card is a standard [product card](../building-pages/product-sections.md#product-cards). Above the grid, "Showing 12 of 48" counts the products in view.

With [product comparison](product-comparison.md) set up, each card has a "Compare" checkbox. Ticks are kept when shoppers filter, sort or change pages.

Page numbers appear under the grid when there's more than one page. Each page link jumps back to the top of the grid.

### Empty states

| Situation | The page shows |
| --- | --- |
| The collection has no products | "No match in index" and "This collection has no products yet." |
| Filters exclude every product | "No match in index", "Nothing matches these filters. Loosen one and try again." and a "Clear all" link |
| An old link points past the last page | "End of index" and a link back to the first page |

## Collections list

The `list-collections` template, at `/collections`, shows every collection as a tile with its title, product count, image and a short description.

| Setting | Notes |
| --- | --- |
| "Heading" | Default "Collections". |
| "Body" | Rich text under the heading. |
| "Collections" | Leave empty to list every collection. Choose collections to show only those, in your order. |
| "Collections per page" | 4 to 24. Default 12. |

## Recipes

### Filterable catalog

* Search & Discovery app › Filters: add Availability, Price, Product type and Color
* Collection template › Collection › "Enable filtering": on, "Enable sorting": on
* "Products per page": 24

### Curated collections list

* Collections list template › Collections grid › "Collections": your top-level categories, in order
* "Heading": "Departments"

### Brand-led collection

* Collection template › Collection › "Show vendor": on
* Collection template › Collection › "Show collection image": off

## See also

* [Search](search.md): the same filter bar on search results
* [Product sections](../building-pages/product-sections.md#product-cards): what each card shows