How to set up collection and search pages
Last checked against Splash 1.0.0 / 2026-08-15
Collection pages, the search page and the collections directory share one grid and one set of controls. Filters are the part that needs work outside the theme editor, so start there.
Filters need an app#
Splash draws its filter rail from whatever storefront filters your store has configured. It does not define filters of its own, and it cannot: filters are store data, not theme data.
Requires Shopify's Search & Discovery app, which is free. Install it, open its Filters tab, and add the filters you want: Availability, Price, Product type, Vendor, an option like Size, or a metafield-backed filter.
With no filters configured there is no filter rail on collection pages, no filter rail on search results, and no Filter cell in the bar at the bottom of a phone screen. Sorting still works everywhere, because sort options come from Shopify rather than from the app. If your collection pages show a sort control and nothing else, that is the symptom of an empty Filters tab, not a theme fault.
Filters appear on search results too, on the same rail, drawn from the same app. A search that returns only articles and pages shows no rail, because there are no products for a filter to narrow.
How the rail behaves#
On a wide screen the rail sits to the left of the products, pinned below the header so it stays reachable through a long grid. Choosing values and pressing Apply filters loads a filtered page. Applied values also appear as a row of chips above the products, each removable on its own, with Clear all at the end.
Below 990px the rail leaves the page. In its place a bar pins to the foot of the screen with two cells, FILTER and SORT. Tapping either raises a sheet that spans the window and stops at the bar's top edge, and opening one closes the other. The Filter cell prints the number of filters currently applied, which is the one thing a shopper cannot read off the grid behind it. A price range counts as one filter whichever end of it is set.
The bar does not hide when a shopper reaches the footer. It is the only filter and sort access a phone has, so taking it away at the foot of a result set removes it exactly where someone who has seen every card wants to narrow.
Note The phone bar needs JavaScript. With scripts turned off the filter list stays in the page above the products and the page's own sort control stays visible. That is the intended fallback, not a broken page.
Long filter lists#
The rail manages length rather than printing everything, so a store with many filters stays scannable.
Groups past the fifth start collapsed
The first five filter groups open; the rest are closed until a shopper clicks the group name. A group holding an applied filter always opens, whatever its position.
Values past the tenth fold away
A group with more than ten values shows the first ten and puts the rest behind Show 12 more. If one of the hidden values is applied, the fold opens with it. A checkbox inside a closed fold still submits, so nothing is lost by leaving it shut.
A dead-end value is greyed out, not removed
A value that would return zero products stays in the list, disabled. The rail keeps its shape as filters are applied, and a shopper can see that a combination leads nowhere rather than wondering where an option went.
The order of the groups, and which values each one holds, are set in Search & Discovery. The theme prints them as given.
Collection page settings#
Open Online Store, then Themes, then Customize. Use the template picker at the top of the editor to choose a collection page, then click the Collection section.
| Setting | Values | What it does |
|---|---|---|
| Products per page | 12 to 36, in steps of 4. Default 24 | How many products a page holds before numbered pagination takes over. |
| Columns on mobile | 1 or 2. Default 1 | How many products sit side by side below 750px. Tablets and wider screens are unaffected. |
| Image frame ratio | Square (1:1), Portrait (4:5), Landscape (4:3). Default Landscape | The shape of every product photograph in the grid. Photographs are fitted to the frame, so one ratio holds across a mixed catalog. |
| Show vendor | Off by default | Adds the product's Vendor above the title. The card already prints the product type there, so this is a second line rather than a replacement. |
| Show filter group names | Off by default | Prefixes each applied-filter chip with its group name, so a chip reading 10 reads Width: 10 instead. |
Turn on Show filter group names if you filter on more than one numeric attribute. A store filtering on both width and height leaves two chips reading 10 and 12 with nothing to tell them apart. Where your values speak for themselves, leaving it off keeps the chip row short.
Two products per row on a phone#
One per row is the default and gives each card the full width for its photograph, its SKU and its specification lines. Two fits about twice as many products on a screen. At that width the card is narrow enough that the price and the stock badge stack instead of sharing a line, which the theme does on its own. If your prices run to five figures, look at a collection page at two across before settling on it.
How many products across#
| Screen width | Collection page | Search page |
|---|---|---|
| Below 750px | 1 or 2, from Columns on mobile | Always 1 |
| 750px to 1199px | 3 | 3 |
| 1200px and wider | Always 3 | 3 with a filter rail, 4 without |
The collection page holds three across at every width from 750px up, whether or not you have configured any filters. A fourth column drops each card below the width its specification lines need to stay on one line, and a card that changed width the day a filter rail appeared beside it would be worse than one that is slightly narrower and stays put. The search page is the exception: it takes the fourth column at 1200px and wider when there is no rail, and gives it back when there is.
What the collection page does not have#
There is no banner or thumbnail slot for a collection image. The page opens with a breadcrumb, the collection title, the product count, and the collection description if you have written one. Both the title and the description come from the collection in Shopify admin, not from the theme editor.
Collection images are still used, on the home page category tiles. See Set up the home page.
Search page settings#
In the editor's template picker, choose Search, then click the Search section.
| Setting | Values | What it does |
|---|---|---|
| Results per page | 12 to 36, in steps of 4. Default 24 | How many results a page holds. Products, articles and pages all count toward it. |
| Image frame ratio | Square (1:1), Portrait (4:5), Landscape (4:3). Default Landscape | The shape of the product photographs among the results. |
| Show vendor | Off by default | Adds the vendor to product cards in the results. |
| Show filter group names | Off by default | Prefixes each applied-filter chip with its group name. |
There is no Columns on mobile setting here. Search is always one result per row on a phone.
Search results mix product cards with articles and pages. A text result takes the same frame as a card, with a label reading Article or Page where the card has its photograph, then the title, the date if it is an article, and a short excerpt. Both halves of the grid divide at the same line, so an article does not read as a card whose photograph failed to load.
The header's search panel is configured separately. See Navigation and mega menus.
The stock line on a card#
Every card that is not quote-only prints a price and an availability mark. The mark has three states, and one of them carries a number.
In stock: 12
The live count. It needs all three of: inventory tracking on for the variant, "Continue selling when out of stock" left unchecked, and a quantity above zero.
In stock
What you get when any of those three is not true. The product is available and the theme has no count it can honestly print.
Sold out
The variant is unavailable. A sold-out badge also appears on the photograph.
Note Quote-only products show Price on request in place of the price and carry no availability mark, no sale badge and no sold-out badge at all. See Quote-only products.
To add specification lines to the cards, see Show your specifications. They are off by default.
The second image on hover#
Open Theme settings, then Product cards, then Show the second image on hover. It is on by default.
When a customer points at a card, the photograph crossfades to the product's second image and back again when the pointer leaves. Three things are worth knowing about which image that is and what it costs.
It is the first image that is not the featured one
Not "image 2". Promoting a later image to featured does not reorder the media list behind it, so taking image 2 would show the featured shot twice on every card where that had happened.
A product with one image is unaffected
Nothing to swap to, so nothing happens on that card. No setup is needed per product beyond adding a second image in Products, then Media.
Phones and tablets never download it
There is no hover on a touch screen, so the second photograph is never shown and never fetched. On a pointer device the fetch waits until the page has finished loading, so it costs nothing at first paint.
The collections directory#
The /collections page lists your categories as tiles, each showing the name, its product count and a direction mark. In the editor's template picker choose Collections list, then click the Collections grid section.
It has two modes, decided by one setting.
Menu, left empty
The automatic listing. Every collection in the store that holds at least one product, paginated. Collections with no products are skipped, because a directory entry that leads nowhere is worse than a shorter directory.
Menu, pointed at a link list
The curated listing. Exactly the collections in that menu, in that menu's order. Any menu item that is not a collection link is dropped in silence, so a menu mixing pages with collections lists only the collections.
Build the menu first, under Content, then Menus. The theme ships pointing at a menu with the handle category-directory, which does not exist on your store until you create it. Until then, or until you point the setting at a menu of your own, the page falls back to the automatic listing.
Use the curated mode when your store has collections that are mechanisms rather than categories: a best sellers collection feeding a home page section, or an automatic collection left over from another theme. Those read as noise in a directory a shopper is using to find a range.
Limit Collections per page (8 to 24, in steps of 4, default 16) applies to the automatic listing only. A curated menu is printed in full on one page, however many collections it names.
If the page shows a title and a line reading "No collections to show yet", either every collection is empty or your menu names no collection links.
What is not a theme setting#
Several things on these pages come from Shopify rather than from the theme editor, and looking for them in Customize will waste your time.
Which filters exist, and their order
Search & Discovery, Filters tab.
The sort options in the dropdown
Shopify supplies the list. A collection's default order is set on the collection itself, under Sort in Shopify admin.
Which products are in a collection
The collection's own conditions, in Products, then Collections.
The collection title and description
The collection record in Shopify admin. The theme prints both as written.
For everything the theme deliberately does not print on a card, see What Splash never invents. For the full list of settings on these sections, see the Section and block reference.
Something wrong here If a step does not match what you see, say so and it gets fixed. Documentation goes stale, which is why the line under the title carries a date.