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.

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.

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).

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 or a Load more button. Products per page sets how many load at a time.

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.

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.

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 and the search bar in the header.