Collections and search

Collection pages, the page that lists all your collections, the New arrivals helix and search results all use the same filters, sorting and product cards.

The collection page

A collection page opens with an animated heading: the collection's title spells itself out and its product count counts up. On a computer, product pictures follow the pointer across the heading. Below it, the collection's description (when it has one), the filters, and the products.

Products appear first as an editorial catalog of large rows. Shoppers can switch to a compact grid with the layout buttons above the products, and back again.

The Collection grid section has three settings:

Show the collection title and description: Turn off to start the page at the products.
Card style: How products look in the grid layout: Grid cards, with the product type under the title, or Editorial cards.
Products per page: From 8 to 40. Collections with more products get page links at the bottom.

The collection's image and description come from the collection in your admin, in Products > Collections.

Product cards

The product's first image, and its second image when a shopper hovers over the card on a computer.
One badge at most: Sold out when no variant is available, otherwise the discount when the product is on sale. A product whose variants have different prices shows Sale instead of a percentage, because one percentage wouldn't be true for all of them.
The price, with the compare-at price when there is one. Products whose variants have different prices show a From price, and unit prices show when a variant has one.
Up to six color swatches, from the product's color option, then a count of the rest.
When a shopper filters a collection by color, each card shows the picture of a variant in that color, as long as the variant has its own image.

Filters and sorting

Filters appear once you turn them on in the Shopify Search & Discovery app. Inkblot shows every filter the app provides: yes-or-no filters (such as availability), price ranges, and lists of values (such as product type, size or color).

If the Search & Discovery app isn't in your admin, install it from the Shopify App Store. It's free and made by Shopify.
Open the app, go to Filters, and add the filters you want.
Save. The filters appear on collection pages and search results.

On a computer, filters and sorting sit in a panel beside the products. On a phone, a bar with Filter and Sort buttons opens them. Choosing a filter or a sort order updates the products without reloading the page, and the web address changes too, so the filtered page can be shared or bookmarked.

The collections list

The page at /collections lists your collections as a ledger with each collection's image and product count. Collections per page in the Collections list section sets how many appear before page links, from 6 to 24.

New arrivals helix

The New arrivals helix section spins product cards around a 3D helix as shoppers scroll or swipe. Shoppers who prefer reduced motion, devices that the theme judges low-powered or that have turned on data saving, and browsers without 3D graphics see a grid of the same products instead, and every product is a normal link either way.

Collection: The products on the helix. Point it at your new arrivals collection so the helix stays current. Leave it empty to show all products.
Heading and Subheading: The text over the helix.
Products shown: From 8 to 32. More products take longer to load, especially on phones.

Inkblot includes two templates that use it:

collection.new-arrivals: the helix above a normal collection page. Assign it to a collection: open the collection in Products > Collections, and choose new-arrivals in the Theme template drop-down menu.
page.new-arrivals: the helix as a page of its own. Create a page in Online Store > Pages and choose new-arrivals as its template.

You can also add the section to other templates, such as the home page.

Search

Search in the header

As a shopper types in the header's search field, matching products appear below it. See all results opens the full search page. On a phone, search opens as a sheet from the bottom of the screen.

The search results page

The search results page shows products, pages and blog posts that match, with the same filters and sorting as collection pages, and a message when nothing matches. It has no settings of its own.