Collection pages and search

This page covers collection pages (the Collection banner and the Product grid with its filters, sorting and promotion tiles), the search results page, search suggestions and the collection list page.

How a collection page is built

A collection page has two sections: Collection banner at the top and Product grid under it. To edit them, go to Online Store > Themes > Customize and open a collection from the template picker at the top. The products are shown as product cards; see Product cards for what a card shows and for the quick add button.

Collection banner

The banner is a rounded card with the breadcrumbs, the collection's title, its description, the number of products and, beside them, the collection's image when it has one. Each part has its own setting: Show breadcrumbs, Show collection description, Show collection image and Show product count. An image with a 3:2 aspect ratio fits best.

Add links to sub-collections

The banner can show a row of links under the card, for example to the sub-collections of a large collection.

1. In the Shopify admin, go to Content > Menus and create a menu with the links you want.
2. In the theme editor, open a collection page and select Collection banner.
3. Choose the menu in Menu.

Only the menu's top-level links are used. A link to a collection shows that collection's image and its number of products, and the link to the page being viewed is marked. Every collection that uses the same template shows the same menu.

See all Collection banner settings.

Product grid

Above the products, a toolbar holds the "Filter" button, the number of products, the active filters, the sort menu and the grid and list view switch. On tablets and desktop it stays in view under the header while customers scroll.

Columns and products per page

• Columns on desktop (2 to 5) applies on wide screens. Tablets show three columns at most.
• Columns on mobile is 1 column or 2 columns.
• Products per page (8 to 48) sets how many products load at a time.

Pagination

Pagination has three choices:

• Page numbers: numbered links with previous and next arrows under the grid.
• Load more button (the default): under the grid, a line reads "Showing 24 of 96" with a progress bar and a "Load more" button. The button adds the next page under the products already shown.
• Load as customers scroll: the next page loads by itself when the customer nears the end of the grid. This happens three times at most; after that the customer presses "Load more", so the footer stays within reach.

Grid and list view

Show grid and list view switch adds two buttons to the toolbar. List view shows one product per row, with the photo beside the details. The customer's choice is remembered in their browser for the next collection they open. Promotion tiles are hidden in list view.

Sorting

Enable sorting adds a sort menu to the toolbar with Shopify's sort orders, such as best selling or price. A collection opens in the sort order set for it in the Shopify admin.

See all Product grid settings.

Filters

Where filters come from

Filters are not created in the theme. You create and order them in the Shopify Search & Discovery app, and the theme shows the filters that Shopify provides for the collection or the search. If Enable filtering is on and no filters show, check the app first.

A filter applies as soon as the customer changes it, without a page reload. The page address changes with it, so a filtered view can be shared or bookmarked and the browser's Back button returns to the previous view.

Filter layouts

Desktop filter layout sets how filters show on desktop (screens 990 px wide or more):

• Sidebar (the default): a column beside the grid that stays in view while customers scroll. The first four filters are open, and so is any filter with a selected value.
• Horizontal: a row of buttons above the grid. Each button opens its filter as a dropdown, which closes on a click outside it or with the Escape key.
• Drawer: the "Filter" button in the toolbar opens the filters in a panel at the side of the screen.

On phones and tablets all three layouts behave the same way: the "Filter" button opens the filters in a panel, at the side of the screen on tablets and as a sheet at the bottom of the screen on phones. The panel ends with a button that states the number of results, such as "Show 12 products", and closes the panel. "Clear all" shows beside it while filters are active.

How each filter is displayed

The theme picks the presentation of each filter from the data Shopify sends:

• Color swatches and images: a filter that is set to show as swatches or images in the Search & Discovery app shows each value as a chip with its swatch or picture, its name and its number of products. Swatch colors come from Shopify, the same data as the variant picker's swatches.
• Pills: a filter on a product option, such as Size, shows compact pills when every value is five characters or shorter, for example S, XL, 38 or 10.5. If one value is longer, the filter shows as a list.
• Price range: two fields, "From" and "To", with a slider that has two handles. A line above states the highest price in the collection.
• Lists: every other filter shows as a list of checkboxes, each with its number of products.

Values that would return no products are disabled. Each filter's heading shows how many of its values are selected.

Active filters and clearing

Every active filter shows as a chip in the toolbar, beside the number of products. A click on a chip removes that filter, and "Clear all" removes every filter while keeping the sort order. The "Filter" button shows the number of active filters.

Promotion tiles

A promotion tile is a photo with a heading and a link that sits between the products, for example to point to a related collection.

1. In the theme editor, select Product grid and add a Promotion tile block. There can be four at most.
2. Choose the Image, the Heading, the Link label and the Link. Chip text adds a small label on the photo.
3. Set Position in the grid (1 to 24). With 5, the tile takes the fifth place and the products after it move on by one.

Tiles show on the first page only and take one place in the grid each. A tile does not show when the page has fewer products than its position, or in list view. Tiles belong to the template, so every collection that uses the template shows them.

Empty collections and filters without results

A collection without products shows "No products found" and a "Continue shopping" button that leads to all products. When filters leave no products, the message adds "Try removing some filters." and the button becomes "Clear all".

App blocks and Custom Liquid

Product grid accepts app blocks and a Custom Liquid block for your own code. They show under the grid and the pagination.

Search results page

The search page opens with a search field. After a search it shows:

• Result type links: "All", "Products", "Articles" and "Pages" narrow the results to one type. Turn them off with Show result type links.
• Products as product cards in a grid, with the same toolbar, filters and sort menu as a collection page.
• Articles as article cards, under their own heading.
• Pages as rows with the page's title and the start of its text, with the words that match highlighted.

The last word a customer types also matches the start of longer words, so "sho" finds "shoes".

The settings are the grid's: Results per page, Columns on desktop, Columns on mobile, Enable filtering, Desktop filter layout and Enable sorting. The search page differs from a collection page in three ways: it always uses page numbers, it has no grid and list view switch, and it has no promotion tiles. Search filters come from the Search & Discovery app too.

When a search finds nothing, the page shows "No results for" with the words searched, a hint to check the spelling, the popular searches (see below) and a "Continue shopping" button. Before any search, the page shows the search field and the popular searches.

See all Search results settings.

Search suggestions

The search icon in the header opens the search panel (see Header and footer). While the customer types, the panel suggests results in groups, with up to four in each:

• Suggestions: search terms that complete what was typed.
• Products, with the photo, the title and the price.
• Collections, pages and articles, as links.

A button under the groups, "Search for" with the words typed, opens the full search results page.

The settings are in Theme settings > Search behavior:

• Enable search suggestions turns the suggestions on or off. With it off, the panel still opens and the search field sends the customer to the search results page.
• Show vendor and Show price add the vendor and the price to the suggested products.
• Popular searches menu shows the links of a menu as chips under the heading "Popular searches".

Set up popular searches

1. In the Shopify admin, go to Content > Menus and create a menu. Each link can lead to a collection, a product, a page or a search.
2. In the theme editor, open Theme settings > Search behavior and choose the menu in Popular searches menu.

The chips show in the search panel before the customer types, on the search page before a search, and on the search page when a search finds nothing. Only the menu's top-level links are used.

Collection list page

The collection list page, at /collections, shows every collection of your store as a tile, in alphabetical order, with the number of collections in the page's heading. A tile shows the collection's image, or the photo of its first product when the collection has no image, with the collection's title.

• Collections per page (8 to 48) sets how many tiles show before the page numbers.
• Columns on desktop (2 to 5) sets the columns on wide screens.
• Show product count adds the number of products to each tile.
• Show breadcrumbs shows the breadcrumbs above the heading.

To show a hand-picked set of collections on another page, use the Collection list section instead (see Sections).

See all Collection list page settings.