Collections, filters and search

Collection pages

The collection template has three sections:

• Collection intro: breadcrumb, title, tagline, key figures, description and image. The Tagline setting can connect to any collection metafield; left empty, the tagline and the figures come from Nook's collection metafields (see Custom data). The image defaults to the collection image. Turn on Show image caption to show the image's alt text under it, or Show product count to add the number of products to the figures. Breadcrumb menu tells the breadcrumb which menu to look in for the collection's parent.
• Product grid: the products, with filters, sorting and paging.
• Samples banner: a band promoting fabric samples. Remove it if you don't offer samples.

If you remove the Collection intro, the Product grid shows the collection title, description and image itself.

Product grid options

• Products per page (6 to 36), Columns on desktop (2 to 4) and Columns on mobile (1 or 2).
• Pagination: Load more button or Page numbers.
• Show editorial tile: a larger tile in the grid with an image, label, heading, text, measurements (one per line) and a link. Choose its Position: the number of products before it. On desktop it moves to the nearest row start, and on two-column layouts it fills a single cell when needed, so the grid never has a gap. It shows on the first page when no filters are applied.
• Quick filter: shows one filter's values as buttons above the grid (for example "All sofas · Sofas · Sectionals"). Enter the filter's name, such as Product type. If your store sells in more than one language, enter the filter's URL parameter instead, such as filter.p.product_type. Leave it blank to hide the buttons.
• Collection chips navigation: when the quick filter isn't available (for example on a store with only the default filters), the buttons link to the other collections listed beside this one in the menu you choose, such as "All seating · Sofas · Sectionals · Lounge chairs". Collections with nothing beside them in the menu show no buttons.
• Show fabric line and Show swatches here override the matching Theme settings › Product cards settings for this grid.

Other card options (image ratio, second image on hover, dimension line, maximum swatches) follow Theme settings › Product cards.

Quick view

With Theme settings › Product cards › Show quick view button on, product cards show a Quick view button over the image (on hover with a mouse, always on touch screens). It opens a side panel with the product's images and video, price, options and Add to cart, so shoppers can add a piece without leaving the collection. View full details links to the product page. Without JavaScript the button is hidden and the card links to the product page.

Filters

Every store has two filters out of the box: availability and price. To add more, use the free Shopify Search and Discovery app.

1. Install Search and Discovery (opens in a new tab).
2. In the app, go to Filters › Add filter and add the filters you want: availability, price, product type, vendor, options (such as seat depth) or metafields (such as color).
3. Save. The filters appear in the Filter drawer on collection and search pages right away.

Tips:

• A Color filter that uses the category metafield groups fabrics into base colors and shows swatches.
• Filter values with no matching products are shown but can't be selected.
• Filters, sorting and paging still work in browsers with JavaScript turned off: shoppers choose their filters, then press Show products.

Search

Search suggestions

As shoppers type in the header search, a panel suggests search terms, products, blog posts and pages.

• Turn it on or off with Theme settings › Search › Enable search suggestions.
• Choose what it shows in the Predictive search section (Header group): Show search suggestions, Show products, Show blog posts and Show pages.

Search results page

The Search results section shows results with the same filters and sorting as collections.

• Results per page sets how many show at once.
• Show blog posts and pages adds them to the results, with buttons to switch between all results, products, blog posts and pages.
• No results: the text and the collections to suggest when a search finds nothing.

Collection list

The Collection list page shows every collection as a card. Add a collection image under Products › Collections so its card has a photo.