Nappa Theme documentation
All guides

Collections and search

Filters with the Shopify Search and Discovery app, swatch filters, price histogram, sorting, sub-collection pills, promotion tiles, predictive search and the search page.

Product grid

Collection pages use the Product grid section. Open a collection template in the theme editor to change it.

Heading size Large, Extra large
The size of the collection title.
Show collection image
Shows the collection image as a banner above the title.
Menu for sub-collection links
Shows the links below the current collection in this menu as pills. See Sub-collection pills.
Show collection description
Shows the description you wrote for the collection in your Shopify admin.
Filters on desktop Sidebar, Drawer
Sidebar shows filters in a column next to the products. Drawer hides them behind a button. On phones, filters always open in a bottom sheet from a button placed within thumb reach.
Price filter Slider and fields, Fields only
A slider with two handles above the minimum and maximum fields, or the fields alone.
Show price distribution
Draws how many products sit in each price band, from real prices. Shown for collections of up to 250 products.
Products per page 8 to 36
The number of products loaded at once.
Columns on desktop 3 to 5
The number of products per row on computers.
Columns on phones 1, 2
Visitors can still switch between 1 and 2 columns. Their choice is remembered on their device.
Pagination Load more button, Infinite scroll, Page numbers
Infinite scroll loads more products as the visitor reaches the end of the grid, and keeps the load more button as a fallback. Without JavaScript, the load more button is a link to the next page.

The top of the grid shows the number of products on the left and the sort menu on the right. Active filters show as removable pills above the grid.

Filters

Nappa uses Shopify's native storefront filters. You choose which filters to show in the free Shopify Search and Discovery app. The theme shows them on collection pages and on the search page. Filters work without JavaScript, and the page address changes with each filter, so customers can share a filtered page.

Add Size, Color, Price, Brand and other filters

  1. Install the Shopify Search and Discovery app from the Shopify App Store.
  2. In the app, open Filters and click Add filter.
  3. Choose the source of the filter:
    • Price and Availability.
    • A product option, such as Size or Color. The option must have the same name on all your products.
    • Vendor, to filter by brand. You can rename the filter label to Brand.
    • Product type or Tag.
    • A category metafield, such as color or fabric, or a product metafield you created.
  4. Save. Reorder the filters in the app to change their order on the page.

See Search and Discovery filters in Shopify Help. App labels can change; Shopify Help has the current steps.

A filter only shows values that exist in the products of the current collection or search. In the filter panel, the first two filters are open, and so is any filter in use.

Swatch filters

When the values of a color filter have swatches, Nappa shows each value with its color or image. This works with filters based on the color category metafield, or on a color option linked to it. To set swatches on your products, see Swatches.

Price filter and price distribution

With Price filter set to Slider and fields, customers drag two handles or type amounts. With Show price distribution on, bars above the slider show how many products sit in each price band, from the real prices of the collection. The bars use your primary color. They show on collections of up to 250 products, and not on the search page.

Sorting

The sort menu offers Shopify's sort options, such as featured, best selling, price and date. The default order of a collection is the one you set for the collection in your Shopify admin.

Sub-collection pills

Pills under the collection title let customers jump between related collections, such as Dresses, Shirts and Knitwear under Women.

  1. Build a menu in your Shopify admin where the parent collection is a menu item, and the related collections are its sub-items.
  2. In the Product grid section, choose that menu in Menu for sub-collection links. By default, Nappa reads your main menu.

On the parent collection, the pills list its sub-items. On a sub-collection, the pills list its sister collections, with an All pill that returns to the parent. Collections that are not in the menu show no pills.

Promotion tiles

A promotion tile is a card inside the product grid, for a guide, a campaign or a collection. In the Product grid section, click Add block and choose Promotion tile.

Position in the grid 1 to 24
The tile appears before the product at this position.
Width One product, Two products
The width of the tile.
Image, Caption, Heading, Link label, Link, Color scheme
The content of the tile. Always set a Link: the whole tile is a link.

Up to 4 tiles. Tiles show on the first page of the collection only, and only when the collection has enough products to reach their position. Tiles appear on every collection that uses this template. To show a tile on one collection only, create a separate collection template.

The search icon in the header, or the search bar in the Search bar header layout, opens a search panel. It is full screen on phones and centered on computers.

The search code loads only when the visitor moves toward the search icon or field, so it doesn't slow down the first page view.

Search page

The search page uses the Search results section. Results include products, blog posts and pages. Filters and sorting work as on collection pages.

Categories to browse
Collections shown before a search and when nothing is found.
Popular searches
Search terms shown as shortcuts. Separate with commas.

To improve results, use the Search and Discovery app: it lets you add synonyms and boost products. See Search and Discovery in Shopify Help.

List of all collections

The page at /collections uses the Collections list section. It lists all your collections with their image, and has no settings. To show a chosen set of collections instead, use a Collection list section on a page.