Collection and search

Collection pages and search results share most of their parts: a product grid, filters, sorting and pagination. The collection page adds a banner, an editorial grid style and promo tiles. This page covers all of them, and the page that lists all your collections.

To edit them, use the page selector at the top of the theme editor: Collections > Default collection for collection pages, where the section is called Product grid, and Search for search results.

Filters

Filters let customers narrow a collection or a search by availability, price, color, size and anything else you choose. Which filters exist is decided in Shopify, not in the theme, using Shopify's free Search & Discovery app.

1. Install Shopify Search & Discovery from the Shopify App Store.
2. Open the app and go to Filters.
3. Click Add filter and choose a source: availability, price, product type, vendor, a product option such as Size or Color, or a metafield.
4. Drag the filters into the order you want, and save. The theme shows them in that order.

How the theme shows each filter depends on what it holds:

• Color swatches. A filter whose values all have swatches in Shopify is shown as swatch circles. If any value has no swatch, the whole filter is shown as compact buttons, with a color dot on the values that do have one. See Product pages for setting up swatches.
• Buttons. A filter whose name is listed in theme settings under Product options > Option names shown as buttons, such as Size, is shown as compact buttons.
• Price. The price filter is shown as a from and to range.
• Everything else is a list of checkboxes.

Filters a customer has applied are listed above the products as pills, each with a button to remove it, and a link to clear them all. The product count updates as filters change.

Where filters sit

Desktop filter layout has three options:

• Sidebar: filters in a column beside the products, always in view. Best for large collections.
• Horizontal bar: filters in a row above the products, each opening a small panel. Leaves the full width for products.
• Drawer: a single Filter button that opens every filter in a drawer. The cleanest look.

On mobile, filters always open in a drawer, whichever layout you choose.

Sorting

The sort menu above the products offers Shopify's standard sort orders: featured, best selling, alphabetical, price and date. Sorting keeps any filters that are applied.

The order customers see first is set per collection in your Shopify admin: open the collection and choose its Sort order. Choose Manually there to arrange products by hand; that is the "Featured" order.

Pagination

Pagination type sets how customers reach the next products:

• Numbered pages: page links under the products. Customers always know where they are, and the footer is always reachable.
• Load more button: a button that adds the next page of products under the current ones.
• Infinite scroll: the next page loads by itself as the customer nears the end. After a few pages it waits for a press, so customers can still reach the footer.

All three are built on real page links. Search engines can reach every product, each page still works if JavaScript fails to load, and a customer who shares or reloads the address gets the page they were on. Products per page sets how many products each page holds.

Editorial grid style

With Grid style set to Editorial, the product grid breaks its rhythm the way a magazine layout does: every few products, one is shown as a large card, two columns wide and two rows tall, using the product's second image. On mobile the large card spans the full width.

Large card every sets how often. It is counted through the whole collection, so 5 makes the 5th, 10th and 15th products large, on whichever page they fall. Use an odd number: it keeps every row full.

Promo tiles

A Promo tile is an image and text tile placed among the products, for a campaign, a lookbook or a related collection. Tiles appear on the first page of the collection.

1. On the collection template, select Product grid and click Add block, then Promo tile.
2. Set Position in grid: 5 makes it the fifth item. Turn on Make tile two columns wide for a wider tile.
3. Add an image, a heading, optional text, and a link with its label.

You can add up to four tiles. A tile positioned beyond the last product, for example at 12 in a collection of 8, is placed at the end, so it is never lost.

Tiles are part of the template, so they appear on every collection that uses it. To show a tile on one collection only, create a second collection template in the theme editor, add the tile there, and assign that template to the collection in your Shopify admin.

Collection page settings

The Product grid section's settings, in editor order. The first group controls the banner at the top of the page, which shows the collection's title, description and image from Shopify.

Search results

The search page shows products as product cards, and matching articles and pages alongside them. It has the same filters, sorting and pagination as collection pages, with its own settings, so you can for example use a sidebar on collections and a horizontal bar on search.

The suggestions shown while a customer types in the header are a separate feature, turned on or off in theme settings under Search behavior.

Collections list page

The page at /collections lists all your collections as cards. Open it in the theme editor with the page selector: Collections > Collections list.

Image sizes

Tips

• Offer the filters customers think in: size, color and price first. Too many filters hide the useful ones.
• With Editorial, try 4 columns on desktop and a large card every 5 or 7 products.
• How product cards look everywhere, including swatches, hover image and quick add, is set once in Theme settings.