> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/collections-and-search/collection-page.md).

# Collection pages and filters

Set up collection pages — the product grid, list view, sorting and filters on computers and phones.

Every collection uses the **Product grid** section. It shows the collection's title, description and image, a toolbar for sorting and view options, a filter sidebar (a bottom sheet on phones) and the products.

![Collection page on a computer](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-fbd1e125dcb85a58036000fb74ed8abafb078545%2Fcollection-desktop.png?alt=media)

![Filtering a collection](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-b9f7b2d4ea0107aca2372aeba4ed6f9d31573e70%2Ffilters.gif?alt=media)

{% file src="/files/39lfo32WwtEYE6U2KQ24" %}
Watch the video (MP4)
{% endfile %}

## Open it in the theme editor

1. **Online Store › Themes › Customize**.
2. In the page picker at the top, choose **Collections › Default collection**.
3. Click **Product grid** in the left sidebar.

## Product grid settings

### Collection

| Setting                         | Default | What it does                                                  |
| ------------------------------- | ------- | ------------------------------------------------------------- |
| **Show breadcrumb**             | On      | "Home › Collection" above the title.                          |
| **Show collection description** | On      | The description you write on the collection in Shopify admin. |
| **Show collection image**       | Off     | The collection's image beside the title.                      |

### Products

| Setting                              | Default    | What it does                                                                                                                                                                  |
| ------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Products per page**                | 24 (8–48)  | How many products load at once. More load with **Load more**.                                                                                                                 |
| **Columns on large screens**         | Four       | **Three**, **Four** or **Five** products per row on computers. Phones show two.                                                                                               |
| **Show grid and list view switch**   | On         | Lets shoppers switch between 3, 4 or 5 columns and **List** on computers, or **Grid** and **List** on phones. List view adds quantity steppers and a bulk **Add to bag** bar. |
| **Low stock threshold in list view** | 50 (0–100) | In list view, stock at or below this number shows as low.                                                                                                                     |

### Filtering and sorting

| Setting                        | Default      | What it does                                                                                                                                                                           |
| ------------------------------ | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Enable filtering**           | On           | Shows the filters. Which filters appear is set in the Search & Discovery app.                                                                                                          |
| **Collections in the filters** | —            | A **Collections** list at the top of the filters so shoppers can jump to related collections.                                                                                          |
| **Price shortcuts**            | 25, 100, 250 | Comma-separated amounts in your store currency. Creates buttons such as **Under $25**, **$25–$100**, **$100–$250** and **$250+** above the price slider. Leave empty for no shortcuts. |
| **Enable sorting**             | On           | The **Sort** menu (Featured, Best selling, Alphabetically, Price, Date).                                                                                                               |

**Color scheme**, **Top padding** and **Bottom padding** control the section's look and spacing. Full table: [Product grid reference](/reference/sections/main-collection.md).

## Set up filters

Filters come from Shopify's free **Search & Discovery** app.

1. Install **Search & Discovery** from the Shopify App Store.
2. In the app, open **Filters** and click **Add filter**.
3. Choose a source: **Availability**, **Price**, **Product type**, **Vendor**, **Tag**, **Category**, a variant option (**Color**, **Size**…) or a product/variant metafield.
4. Save. The filter appears on collection and search pages straight away.

{% hint style="info" %}
To show a filter as color swatches, set its **Presentation** to **Swatch** in Search & Discovery, or name it as in **Theme settings › Filters › Color filter names** (default "Color, Colour").
{% endhint %}

## How each filter looks

| Filter                                                        | Looks like                                                                                                                                                                  |
| ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Availability**                                              | An **In stock** switch with the count.                                                                                                                                      |
| **Price**                                                     | A two-handle slider with **From** and **To** fields, plus the **Price shortcuts** buttons.                                                                                  |
| **Color** (named in **Color filter names**, or set to Swatch) | Labelled swatches with a check mark when chosen. The color comes from the Shopify swatch, then **Theme settings › Swatches › Swatch colors**, then color words in the name. |
| **Other variant options** (Size, Material…)                   | Buttons, or checkboxes when **Theme settings › Filters › Other variant filters** is **Checkboxes**. Options with more than 30 values always use checkboxes.                 |
| **Everything else** (type, vendor, tags, metafields)          | A checkbox list. Long lists show the first 8 with a **Show \[N] more** link.                                                                                                |

Chosen filters appear as chips above the products with a **Clear all** link. Results update without reloading the page, and the page address changes so filtered results can be shared and bookmarked.

### Theme settings › Filters

| Setting                   | Default       | What it does                                                        |
| ------------------------- | ------------- | ------------------------------------------------------------------- |
| **Color filter names**    | Color, Colour | Comma-separated filter names shown as color swatches.               |
| **Other variant filters** | Buttons       | **Buttons** or **Checkboxes** for options such as Size or Material. |

## Grid and list view

![List view](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-fbd1e125dcb85a58036000fb74ed8abafb078545%2Fcollection-desktop.png?alt=media)

**List view** is made for repeat and trade buyers:

* Each product is a row with its image, title, SKU, price and stock.
* Rows have quantity steppers. Choose quantities on several products, then use the bulk **Add to bag** bar at the bottom to add them all at once.
* Quantity price breaks from B2B catalogs show on each row.

The shopper's choice of view is remembered on their device.

## On phones

![Collection page on a phone](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-9b4a8e7391c65e773cf79b5815d5737e38b7c7ba%2Fcollection-mobile.png?alt=media)

* Products show two per row (or as a list).
* **Filters** opens a sheet from the bottom with **Clear**, **Done** and a **Show \[N] results** button.

![Filters on a phone](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-e137c05cefc7320a933237a5e6eb5607de66321f%2Ffilters-mobile.png?alt=media)

## Loading more products

Under the grid, "Showing 24 of 127" and a progress line show how far the shopper has got. **Load more** adds the next page below without leaving the page. Numbered page links are also in the page for search engines and for visitors without JavaScript.

## Product cards in the grid

The cards follow the **Product card** block inside **Product grid** and **Theme settings › Product cards**. See [Product cards, quick add and quick view](/products/product-cards.md).

## Tips

* Write a short collection description — it helps shoppers and search engines.
* Keep **Price shortcuts** to three or four amounts that match your price range.
* If a filter is missing, check that it's added in Search & Discovery and that at least one product in the collection has a value for it.
* The Product grid is a fixed part of the collection template; you can add other sections (a banner, featured products) above or below it.