# Collections and search

> The product grid with filters, sorting, a list view and a promo tile; the collections list; and the search results page with suggestions before a search.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/collections-and-search/

## Collection pages

Every collection uses the **collection** template, which has one section: **Product grid**. Open a collection in the theme editor to change it.

### Collection banner

The top of the page shows the breadcrumbs, the collection title, its description and its image. A collection metafield `custom.banner_image` (type *File*) gives the banner a photo of its own instead of the collection image – useful when the collection image is a square product shot. See [Metafields](https://themelab.page/tally/docs/metafields.md).

### Subcollection links

To show links to related collections as chips under the title, create a menu in **Online Store › Navigation** with the **same handle as the collection**. For the collection `kitchen`, create a menu whose handle is `kitchen` and add links to *Storage*, *Cookware* and so on.

### Products per row and list view

Shoppers can switch between 2, 3 and 4 products per row, or a **list** with a short description and the stock status. Their choice is remembered. Set the starting view in **Default view**. **Animate the change** lets the products glide to their new places.

### Filters and sorting

Filters come from Shopify's free **Search & Discovery** app. Install it and choose the filters there: availability, price, product type, vendor, color, size and other options or metafields.

- **Filter layout on desktop:** a *Bar above products* with pill buttons that open small popovers, a *Sidebar*, or a *Drawer*. On phones the filters always open in a drawer.
- **Open first filters in the sidebar:** opens the first filter groups when the sidebar layout is used.
- Color filters show swatches when the color values have colors (see [Color swatches](https://themelab.page/tally/docs/product-page.md#color-swatches)).

### Promo tile in the grid

**Show promo tile in the grid** adds one tile at the chosen position on the first page, with its own image, heading, text and link – for example a seasonal offer. All collections share this template, so the tile is hidden on the collection it links to. To show different tiles on different collections, create a second collection template.

### Pagination

*Page numbers*, a *Load more button* (the default) or *Infinite scroll*. **Products per page** sets how many load at a time.

With *Load more button* and *Infinite scroll*, placeholder cards show where the next products will appear while they load. *Infinite scroll* loads the next page on its own as the shopper nears the end of the grid. Its button stays hidden but still works from the keyboard, and it shows as a normal button when JavaScript is off. Either way, the address stays on the first page, so a reload starts from the top.

See [Product grid](https://themelab.page/tally/docs/sections/product-grid.md) – every setting and block explained.

## Collections list page

The page at `/collections` lists all your collections. Sort them alphabetically, by product count or by date, and choose *Tiles with small image*, *Cards with large image* or *Title on the image*.

See [Collections list page](https://themelab.page/tally/docs/sections/collections-list.md) – every setting and block explained.

## Search results page

The **Search results** section on the search template works like the product grid, with filters, sorting, the list view and **Show result type links** (*All*, *Products*, *Articles* and *Pages* under the search field).

### Before a search and when nothing is found

With **Show popular searches, collections and products** on, the page shows the popular searches from **Theme settings › Search**, the collections you pick and a grid of products before anything is searched – and again under a search with no results, so shoppers never hit a dead end. Products come from the collection in **Products from**, the collection in Theme settings > Search, or all products.

See [Search results](https://themelab.page/tally/docs/sections/search-results.md) – every setting and block explained.

## Search suggestions

The suggestions that open from the header while typing are set in **Theme settings › Search**: popular searches, products shown before typing, and whether to show the vendor and price. See [Search settings](https://themelab.page/tally/docs/theme-settings.md#search) and the [search bar](https://themelab.page/tally/docs/header-and-footer.md#search-bar) in the header.

> **Tip:** Better search results
>
> Shopify decides which products match a search. With the **Search & Discovery** app you can add synonyms (for example *sofa* and *couch*) and boost products so they show first.