Search and filters

Collection and search pages

The Collection section shows a banner (the title, the description and, with Show collection image, the collection's image), a toolbar with the number of products and Sort, and a grid of product cards: four to a row on desktop, three on tablets and two on phones. With filters set up, they sit in a column beside the products from 990px wide, and in a drawer behind a Filter button on smaller screens: each filter a list of checkboxes with counts, and price as From and To fields with Apply. Active filters show as small tags with Clear all. Filtering updates the results without reloading the page, and works without JavaScript too.

Its settings: Show breadcrumbs (on), Show collection image (on), Show description (on), Enable filtering (on), Enable sorting (on), Show vendor (off) and Products per page (12, 8 to 36).

The Search section has Show breadcrumbs, Enable filtering, Enable sorting (all on) and Results per page (12, 8 to 36). As shoppers type in the header's search, it shows matching products, collections, pages and articles, with a link to the full results.

Set up filters with Search & Discovery

Filters come from Shopify's free Search & Discovery app. Install it from the Shopify App Store, open it, go to Filters › Add filter, choose the source and save. New filters can take a little while to appear while Shopify indexes your products.

Good filters for a digital shop: Product type (Planners, Printables, Templates), Price, the variant option License or Paper size, and a Works with filter from the custom.works_with metafield (Search & Discovery can filter by a product metafield of type single line text). A filter you add appears on every collection and on search results; values with no products in the current results are hidden or disabled. Leave Availability out if you sell only downloads: they're always in stock.

The same app sets the complementary products behind "Pairs well with" when its Recommendation type is Complementary products (chapter 4).