Themes

Collections, filters and search

How shoppers browse in Rail: collection pages with filters and sorting, a Grid and a Rail view, promo cards, and search with live suggestions.

Collection page settings

In the theme editor choose Collections in the template picker and select the Collection page section.

Default view Grid, Rail
Which view shoppers see first. Shoppers can switch between the grid and the rail, and their choice is remembered on their device.
Show view toggle default on
Shows the Grid / Rail buttons above the products. Turn it off to lock everyone to the default view.
Products per page 8 to 48, default 24
How many products load before pagination.
Columns on desktop 2 to 5, default 4
Grid columns on large screens.
Columns on mobile 1, 2
Grid columns on phones.
Products per rail 4 to 10, default 6
Used by the Rail view: products are split into rails of this length.
Card media shape Use theme setting, Arch, Pill, Plinth, Hook, Square
The product card shape on this page. Use theme setting follows Theme settings > Product cards.
Show description, Show collection image default on
The collection banner at the top of the page uses the description and image you set in Shopify.
Enable filtering default on
Shows the filter button and drawer. Filters are set up in the Shopify Search & Discovery app.
Enable sorting default on
Shows the sort menu (for example Featured, Best selling, Price, Date).
Color scheme
Colors of the section.

Filters with Search & Discovery

Rail displays whatever filters you create in the free Shopify Search & Discovery app. Without the app you still get sorting, but no filters.

  1. Install Search & Discovery from the Shopify App Store.
  2. In the app, open Filters and add the filters you want, for example Availability, Price, Product type, Vendor, Color and Size.
  3. Reload your collection page. A Filter button appears next to the sort menu.

Shoppers open filters in a drawer. Active filters appear as removable pills above the products, and the results update without a page reload. Color filters use the same swatches as the product page (see Variant swatches). Price filters use a minimum and maximum field.

Filters on search results too

The same filters apply to the search results page. Use the Enable filtering setting on the Search page section to turn them on or off there.

Grid and Rail views

The Grid view is a regular grid of cards. The Rail view lines products up on hanging rails, a fixed number per rail (set by Products per rail), that shoppers drag or swipe sideways. Pick the one that suits your catalog as the Default view. Large catalogs usually read better as a grid; small drops look great as rails.

Promo cards

Promo cards drop a branded tile into the product grid, for a campaign or a sub-collection. Up to 3 per collection page.

  1. Select the Collection page section and choose Add block > Promo card.
  2. Set Position in the grid (1 to 24; default 4), Eyebrow, Image, Heading, Button label, Link and Color scheme (default Scheme 5).

Promo cards show on the first page of results, and only when no filters are active, so shoppers who filter see products only.

Sorting

Sort options come from Shopify and your store settings. Merchants can set the default order of a collection in the Shopify admin (Products > Collections > the collection > Sort). Shoppers can then change it from the sort menu. Turn the menu off with Enable sorting.

Collection list page

The page listing all collections has its own section, Collection list page. See Sections.

With Enable search suggestions on (Theme settings > Search), results appear while shoppers type in the header search panel: products, collections, pages, articles and suggested queries. Results work with the keyboard: arrow keys move through them and Enter opens one. Before typing, shoppers see your Suggested searches.

Search results page

Select the Search template and the Search page section.

Results per page 8 to 48, default 24
Results before pagination.
Columns on desktop, Columns on mobile
Grid columns.
Card media shape
Same options as on the collection page.
Show search suggestions default on
Shows your suggested searches. The terms themselves are set in Theme settings > Search.
Enable filtering, Enable sorting
Filters need Search & Discovery, as above.

Results include more than products: when your store has matching pages or articles, shoppers can switch between result types with the tabs above the results. When nothing matches, shoppers see a clear message, and your suggested searches are offered on the search page.

Want to improve what search finds? In Search & Discovery you can add synonyms and boost products. Product titles, tags and types are searchable by default.