Collections, filters and search

Collection pages and search results in Fine Print share one layout: the products as a register or as cards, with Shopify’s filters, a sort menu and numbered pages. Shopify decides which filters exist and which values they offer. The theme decides how they look. You set the first in the Search & Discovery app and the second in the theme editor.

The collection template

The collection template holds two sections:

Collection banner names the collection and holds the page’s main heading.
Collection products lists the products with the filters, the sort menu and the pages.

To edit them, go to Online Store > Themes > Customize, then choose a collection page from the page menu at the top of the editor.

Layout set to Text shows the collection title and description in a row. When there is an image, Text shows it beside the row on desktop and under the row on phones. Image above the text puts the image above that row. The image is the collection’s image from your admin, or the Image you pick in the section, which replaces it. Without either image, the banner falls back to text on your store.

Show breadcrumbs adds a “Shop / Collection name” link back to your collections.
Show the product count adds the number of products under the title.
Cut long descriptions after 3 lines shortens long descriptions behind a “Read more” toggle.

The collection register

Product layout in the Collection products section picks Cards or Register, and the Fine Print preset ships with Register, while Remedy and Larder ship with Cards. The register is a table with the columns No., Product, Spec and Price, and an add button on each row:

The number counts on across pages, so the first product on page two of a 24-product page is 25.
Product shows the image and the full title, as one link to the product.
Spec shows the product’s spec line, from its subtitle metafield. The Product pages guide explains how to fill it. When no product on the page has a spec line, the register leaves the Spec column out.
Price shows the price, the compare-at price struck through, the unit price, and “Sold out” for a sold-out product. When variants differ in price, it shows “From” and the lowest price, followed by “Sale” when a variant costs less than its compare-at price.
A product with one variant has an “Add” button that adds it to the cart. A product with several variants, or one sold only by subscription, has a “Choose” button that opens quick view. A gift card with several values has a “View” link to its product page instead. A sold-out product has no button.

On phones each row folds onto two lines, with the price and the button on the right.

Sort by column

The Product and Price column headers sort the page. A press on Price sorts from low to high, and a second press flips it to high to low. Product sorts from A to Z, then Z to A. A small arrow beside the header shows the current order. The filters the shopper applied stay in place.

The headers sort only when Shopify offers both directions of that order. Search results offer no sort by name, so on the search page the Product header is plain text.

Sorting by column is the same as picking an order in the sort menu: the page address gets a sort_by value, such as ?sort_by=price-ascending, so a sorted page can be shared or bookmarked.

Filters

Fine Print shows the filters that the Shopify Search & Discovery app provides. The theme has no filter list of its own, so with no filters set up in the app, no filters show on your store.

Install the Search & Discovery app from the Shopify App Store if your store does not have it yet.
From your Shopify admin, go to Apps > Search & Discovery > Filters.
Click Add filter, pick a source such as availability, price, product type, vendor, tags, a product option or a metafield, then save.
Repeat for each filter. The order in the app is the order on your store.

Shopify sets which values each filter lists and how many filters a store can have. See Shopify’s guide to Search & Discovery filters.

How each filter looks

List filters show a checkbox and a product count for each value. After six values, the rest fold under “Show 4 more”.
Filters set to show swatches or images in Search & Discovery show a small swatch or image beside each value.
The price filter shows “From” and “To” fields and a line with the highest price among the results.
A filter with a single yes or no value shows one checkbox.

A value with no matching products is grayed out and can’t be picked, unless it is already applied, so shoppers can always clear it.

Each change applies at once: the products, the count and the chips update in place, and the page address changes so Back returns to the previous results. Applied filters show as chips above the products, each one removing its value, with a “Clear all” link.

Filter settings

In the Collection products section:

Filters set to Sidebar shows the filters in a column beside the products on screens 990 pixels wide and up. Drawer puts them behind a “Filter” button that opens a panel from the left. On smaller screens both open the panel. The button shows how many values are applied, and the panel ends with a “Show 12 products” button that closes it.
Open filter groups starts All, the First 3 or None of the groups open. The Fine Print and Larder presets ship with All, and Remedy with First 3.
Show sort adds the sort menu. Shopify supplies the orders in it, and you can’t add or rename them in the theme.
Show product count shows the number of matching products above the list.
Products per page runs from 12 to 48 and starts at 24. Pages show as numbered links under the products.

Each collection opens in its own default order. To change it, go to Products > Collections in your Shopify admin, open the collection, and pick a sort order. See Shopify’s guide to collection sort order.

When a collection is empty, or no product matches the filters, the page says so with a button back to all products or to the collection without filters.

Product cards

With Product layout set to Cards, products show as a grid of cards.

Columns on desktop runs from 2 to 4. Columns on mobile is 1 column or 2 columns.
Show columns switch, available with Cards, adds a “View” switch above the grid where shoppers pick how many cards to show per row: 2, 3 or 4 on wide screens, 1 or 2 on phones. The browser remembers their choice for other collections and the search page.

The look of every card on your store comes from Theme settings > Product cards:

Card style picks Spec sheet, Image or Minimal. Spec sheet shows a numbered card with a rule on top, the image, the title, the spec line, the price and an add button. Image shows a taller image with the name in capitals, the price and up to four color swatches. Minimal shows the image with a centered name, the spec line and the price.
Image ratio crops card images. Set by card style, the default, gives Spec sheet and Minimal cards a 4:5 image and Image cards a taller 3:4 one. Portrait 4:5, Portrait 3:4 and Square apply one shape to every card, and Original keeps each product image’s own shape.
Show vendor adds the product’s vendor above its name. It is off by default.
Show second image on hover shows the product’s second image when the pointer rests on the card. It also needs Enable animations in Theme settings > Layout.

Cards show up to two badges: the sale saving as a percentage, or “Sale” when the variants differ in price, “Sold out”, “New” for products tagged new, and a subscription badge for products with subscription plans. The Subscriptions guide covers that badge.

Quick view

Quick view opens a product over the page, so shoppers can pick options and add it to the cart without leaving the collection. It opens from the “Choose” button of a register row and from the add button of a card, for products with several variants or sold only by subscription. Products with one variant add straight to the cart instead. A gift card with several values opens its product page, where the recipient form is.

Quick view shows the product’s media with arrows and a counter, the product type, the title, the spec line, the price, the variant picker, the subscription plans, a quantity field, an “Add” button and a “View full details” link. It leaves out accelerated checkout buttons.

After a shopper adds the product, quick view closes and the cart drawer opens, or the cart page when Cart type in Theme settings > Cart is Page. If quick view can’t load, the product page opens instead.

The Quick view section sits in the Overlays group, and its one setting is the color scheme. Select it in the theme editor and quick view opens in the preview with the first product on the page that has a “Choose” button. Its price, picker and buttons are the same blocks as on the product page.

Search

The search template holds the Search section. It shows product results in the same register or cards, with the same filters, sort menu and settings as Collection products. Each preset ships search with the same Product layout as its collections.

Above the results, shoppers switch between products and pages and articles. Pages and articles show as a list.
Only the Price header sorts the register on the search page.
Suggested links picks a menu whose links show before a search and when nothing matches. See Shopify’s guide to menus.

Predictive search

The search icon in the header opens the Predictive search panel, from the Overlays group. On a keyboard, the / key opens it too. In the theme editor, selecting the section opens the panel in the preview.

Before the shopper types, the panel shows Suggested searches, the links of a menu you pick, and up to four products from a Featured collection. From the second character typed, it shows matching products as rows with their spec line and price, then search suggestions, collections, and pages and articles.

Products to show sets how many products appear, from 4 to 10.
Suggestions, collections and pages to show sets how many of each of the other kinds appear, from 0 to 5.

Shoppers move through the results with the arrow keys and open one with Enter. Enter with nothing selected, or the link under the results, opens the full search page.