Collections and search

Collection pages, the collection list page and search results each have their own template in the theme editor. Open them from the page selector at the top of the editor: Collections > Default collection, Collections list, and Search.

Collection page settings

Click Collection page in the sidebar of the collection template.

The collection heading, product count and description sit at the top of the page. A long description stops at three lines with a Read more link. The full text stays on the page for search engines.

Collection image

Add the image to the collection in your Shopify admin under Products > Collections. Image layout then decides where it shows:

• Banner above products: a wide banner above the product grid, cropped to 3:1. Set a focal point on the image in the admin to choose which part stays in view. 3:1 aspect ratio recommended, for example 2000 x 667px.
• Margin column: the whole image, uncropped, next to the collection heading on desktop.

Images narrower than 2:1, such as product photos or square logos, always show whole in the margin column, even with Banner above products selected. A banner made from a square photo would keep only a thin strip of it. To get a banner, upload an image at least twice as wide as it is tall.

To hide the image on every collection that uses this template, turn off Show collection image.

Filters

Filters come from Shopify's free Search and Discovery app. The theme shows the filters you set up there.

1. Install the Search and Discovery app from the Shopify App Store.
2. In the app, open Filters and click Add filter.
3. Choose a source, for example Availability, Price, Product type, Vendor, or a product option such as Color or Size.
4. Save, and arrange the filters in the order you want.

On desktop the filters sit in a column next to the products. On phones, the Filter and sort button opens them in a panel, with the sort options on top. With Show sorting off, the button reads Filter. Chosen filters appear as chips above the products, with Clear all.

Color filters

To show colors as swatches, set the color filter's display to swatches in the Search and Discovery app. The swatch colors and images come from Shopify, not from the theme.

The color filter lists each color with its name and count. With more than 12 colors, or with Show the color filter as dots only turned on, it shows a compact grid of dots, and the name appears when a customer points at a dot.

When a filter combination has no products, the page shows "No products match these filters" with a way to clear them.

Sorting

With Show sorting on, customers can sort by the options Shopify provides, such as best selling, price and date. The order a collection opens in is the sort order you set on that collection in your Shopify admin.

Pagination

Pagination type decides how customers reach more products:

The presets start with different types: Loco uses Pages, Almanac uses Load more button, and Roster uses Infinite scroll for long catalogs. All three work as regular links, so search engines can reach every product.

Sub-collections

A sub-collection menu links a collection to its parts, for example Drills, Saws and Sanders inside Power tools.

1. In your Shopify admin, go to Content > Menus and click Add menu.
2. Add a link for each collection you want to show and save.
3. In the theme editor, choose the menu in Sub-collection menu.
4. Change Heading if you want. The default is "Shop by type".
5. Turn on Show images to show each linked collection's image as a tile.

Without images, the links show as a list next to the products on desktop and as a row of chips on phones.

The menu belongs to the template, so every collection that uses this template shows it. To show a different menu on different collections, create a new collection template from the page selector, choose its menu, and assign the template to those collections in the admin.

Grid and list view

When Design style is Crisp sheets, the Roster default, customers can switch the collection between a grid and a list with the buttons above the products. In the other design styles the collection always shows a grid.

Empty collection

A collection with no products shows "This collection is empty" and a Browse all products button. Filters and sorting are hidden until the collection has products.

Collection list page

The collection list page shows all your collections. Its address is your store's /collections page.

Collections are listed in alphabetical order. Each card shows the collection's image, or the image of its first product when the collection has none. Images are never cropped.

To show a hand-picked set of collections on your home page instead, use the Collection list section. See Sections.

Search results page

Click Search results in the sidebar of the search template.

To preview results in the theme editor, search for something on the search page itself.

Predictive search

Predictive search opens from the search key in the header. On desktop it opens under the header, and on phones it fills the screen.

Before a customer types, it shows their recent searches on that device and your Popular links. Set Popular links in the Header section: choose any menu. The default is your main menu.

As the customer types, it suggests search terms, products, collections, pages and blog articles. Pressing Enter opens the full search results page.

What predictive search finds comes from Shopify. To add synonyms, so that a search for one word also finds another, use the Search and Discovery app.

Related pages

• Product page for color swatches on product options
• Header and footer for the search key and menus
• Theme settings for product card options