Collection and search pages

Three templates share one browsing experience in Lapels: the collection page (a grid of products with filters and sorting), the search results page (products, blog posts and pages together), and the all-collections page at /collections. They are built from the same parts, so a shopper who learns one has learned the other two.

One distinction runs through this page, and it is worth settling before anything else.

The theme decides how filters are presented. That covers a sidebar or a drawer, swatches drawn as a grid or as rows, and whether the panel applies itself or waits for Apply.

Shopify decides which filters exist. That is set in your admin under Search & Discovery, not in the theme editor. Lapels draws whatever that app produces, and nothing at all when it produces nothing.

The collection template

Every collection URL renders the Collection section. It is the main section of the collection template, so it is always there. You configure it, and you never add or remove it.

Open it in the theme editor: Online Store → Themes → Customize, use the page picker at the top to navigate to a collection, then select the Collection section.

Layout

Setting	What it does	Default
Color scheme	Section colors, chosen from the schemes in your theme settings.	scheme-paper
Products per page	How many products a page of the grid holds before pagination takes over. 8 to 48, in steps of 4.	24
Columns on desktop	Products per row from 990px up. 2 to 5.	4

The desktop count is the only column setting, because the narrower layouts are fixed: phones are always two across, and tablets are three (or the desktop count, when you have set it below three). Grid gutters follow the global spacing sliders under Theme settings → Layout.

Display

Setting	What it does	Default
Show collection image	Sets the collection’s own photograph as a band across the head of the page, above the title. Set the image under Products → Collections in your Shopify admin.	On
Fallback image	The picture used for collections that have no image of their own, so the band is consistent across the store rather than appearing on some collections and not others.	None
Image focus	Which part of that image stays in frame when the band crops it. Nine positions: Top left, Top, Top right, Left, Center, Right, Bottom left, Bottom, Bottom right.	Center
Overlay strength	How hard the band is washed so the title over it stays legible: Very strong, Strong, Medium, Soft, or None.	Strong
Overlay color	Which scheme the wash and the title are drawn from.	scheme-night

Note

A Shopify collection image carries no focal point, so Image focus is how you aim it. A wide band crops a tall photograph hard, and the difference between Center and Top is often the difference between a face and a torso. Set the image itself under Products → Collections in your admin.

Under the band the page reads: the collection title as the page’s one top-level heading, the piece count on the same line, then the collection description if you have written one. The description is rendered as ordinary rich text, in the same voice a product description and a blog post are set in, so what you type comes out looking the same wherever you typed it.

Filtering and sorting

Setting	What it does	Default
Show filters	Shows the filter panel and the active-filter chips. Nothing appears until the collection actually has filters defined in Search & Discovery.	On
Layout	Where the panel sits: Sidebar is a sticky column beside the grid from 990px up, Drawer is an overlay at every width. Below 990px, Sidebar becomes an overlay too.	Sidebar
Swatch filter layout	How a filter whose values all carry a swatch (Color, typically) is drawn. Grid draws the swatches on their own, with the name and count in the tooltip and read out to a screen reader. List keeps a checkbox, the name and the count on every row.	Grid
Show sorting	Shows the Sort by menu above the grid.	On

Section spacing

Setting	What it does	Default
Device	Which set of values the two sliders below are editing: Desktop or Mobile. Both sets are saved.	Desktop
Top / Bottom	Space above and below the section, 0 to 200px in steps of 4.	96 / 96 desktop, 56 / 56 mobile

Blocks

The Collection section takes no blocks. To put a banner, a promise row or an app’s content on a collection page, add another section above or below it on the collection template in the theme editor. Every section in the sections library is available there, including Custom Liquid. Many of those sections accept app blocks, so an app can place its own content among them.

Filters come from Search & Discovery

Lapels renders filters. It does not define them.

1. Install Shopify’s free Search & Discovery app.
2. Go to Settings → Search & Discovery → Filters in your admin.
3. Add the filters you want: product type, vendor, price, availability, or any product option or metafield you have enabled for filtering.

Once filters exist and Show filters is on, the panel appears. Lapels draws four kinds:

• Value lists. A checkbox, the value and its product count on each row.
• Swatches. For filters whose values carry swatch data. With Swatch filter layout set to Grid, the swatched values gather at the top of the group as a grid of discs, and any value without a swatch keeps an ordinary row below them. A filter that is mostly unswatched rows stays a list, whatever the setting says. A blank disc standing for “Multicolor” would be a worse drawing than a row.
• Price range. A two-handle slider over From and To fields, with the currency symbol shown once on the group’s own name.
• Yes / no. Both answers are offered, since “no” is as real an answer as “yes”.

A group opens on arrival if it holds an active filter, and the first group always opens so the panel never reads as a stack of closed lids.

Above the grid, every active filter is a removable chip, followed by Clear all. Clearing the filters keeps the sort order the shopper chose. It does not quietly reset it.

Two settings for the panel are global rather than per-section, under Theme settings → Filters:

Setting	What it does	Default
Apply filters automatically	Loads the results shortly after the shopper picks their last filter, instead of waiting for Apply. Each load is a page load, so leave it off on a large catalog. With it off, Apply is the only thing that filters.	Off
Wait before applying	How long the panel waits after the last tick before it goes. 0.5 to 5 seconds, in half-second steps.	2s

Apply is always present and always works, whichever way that setting is left. See Search and filters for the whole group.

Sorting and pagination

Sorting uses Shopify’s standard sort options for the collection: Featured, Best selling, Alphabetically, Price, and Date. Choosing an order in the Sort by menu is what applies it. There is no second control to press. The starting order is the default sort you set on the collection itself in Products → Collections, not a theme setting.

Pagination is numbered. Previous and next links with page numbers appear under the grid once there is more than one page, and the page size is your Products per page. Lapels does not use infinite scroll or a load-more button on collection, search or collection-list pages: a numbered page can be linked to, bookmarked, indexed and returned to, and a shopper can always reach the footer.

Empty states

Two of them, because there are two different dead ends and only one has a way out to offer:

• Filters matched nothing. The page says “Nothing matches”, with a Clear all button that returns the unfiltered collection.
• The collection itself is empty. The page says “This collection is empty”, with a Browse all products button.

Pagination still renders under either, so a page that happened to draw nothing is never a dead end to the pages either side of it.

Product cards

Every product in a collection grid, in search results and in a product carousel is drawn by the same card. Its settings are global rather than per-section, so a change applies everywhere a card is shown.

They live under Theme settings → Product cards and Theme settings → Badges. They cover the image ratio, the second image on hover, color swatches, the vendor line, the rating, and the quick button that opens Quick view or adds to the cart.

The full list is on Product cards.

Tip

If a card’s color swatches do not match the values in the Color filter beside them, the two are reading different sources. The card reads your product options. The filter reads the group Search & Discovery built. Both are editable. See Fit and swatches.

The search results page

The search results template renders the Search results section: a search field set at display size across the head of the page, then the results.

Results mix products, blog posts and pages. Products use the standard product card. A blog post gets a card of its own, carrying its image, its title and a short excerpt, with a Read post button that rises off the picture the way a product card’s quick button does. A page has no picture to carry, so its card is labeled Page and a Read page text link sits under it.

Content

Setting	What it does	Default
Empty search icon	The mark above the prompt on the empty search page, before a shopper has looked for anything. Pick one from the theme’s making set, such as Needle, Scissors, Hanger, Shirt, Tape measure, Ironing, Wash or Leaf, or choose None.	Hanger

Layout

Setting	What it does	Default
Color scheme	Section colors.	scheme-paper
Results per page	Results before pagination. 8 to 48, in steps of 4.	24
Columns on desktop	Results per row from 990px up. 2 to 4.	3
Show view toggle	Gives shoppers a grid/list toggle above the results. List draws one result per row.	On

The chosen view is remembered in that shopper’s own browser, so it survives the walk to page two and follows them to the next search. It is per visitor and never changes your saved settings.

Filtering and sorting

The Show filters, Layout, Swatch filter layout and Show sorting settings are the same four the collection section carries, with the same defaults, and they drive the same panel. Section spacing is the same Device / Top / Bottom trio, with the same defaults.

Caution

Shopify drops every non-product result the moment a filter is applied, because a filtered search is a product search by definition. So a shopper who filters a search stops seeing the blog posts and pages that were in their results a moment earlier. Nothing in the theme can change that. It is how the platform’s filtered search works.

Sorting is hidden when a search returns nothing, since a menu of orderings is not the answer to “try another word”. The filter panel stays, because when a filter is what emptied the page, the panel is the way back out.

The three states

• Before searching. The icon you chose, the line “What are you after?”, and the open field above it.
• Nothing found. A struck-bag mark and the query repeated back. When a filter is what emptied it, the wording changes to “Nothing matches” and a Clear all button appears. When it was the query, the field above is already the next move.
• Results. The count, then the filter button, the view toggle and Sort by on the same line, then the active-filter chips, then the paginated results.

Lapels’ search template also ships a Recently viewed section below the results, so a search that goes nowhere still leaves something to pick up. Remove it like any other section.

Tip

What is returned is tuned in your admin under Settings → Search & Discovery. That covers relevance, synonyms, and which resources are searched. The theme controls how results look. The same split applies to the suggestions that appear as a visitor types. See Search drawer.

The all-collections page

The storefront’s list of collections, at /collections, renders the Collections list section. It draws a deliberately non-uniform mosaic: the first tile of each page runs wide across two columns, so the grid reads as an edit rather than a spreadsheet. Each tile is a single link carrying the collection’s picture, its name and, optionally, its piece count.

Setting	What it does	Default
Color scheme	Section colors.	scheme-paper
Collections per page	Collections before pagination. 6 to 48, in steps of 3.	24
Columns on desktop	Collections per row from 990px up. 2 to 4.	3
Collections order	Name, A to Z, Product count, high to low, or Date, newest first.	Name, A to Z
Show pieces count	Adds the product count under each collection’s name.	On

Section spacing offers the same Device / Top / Bottom controls as the collection section, with the same defaults.

The page heading is fixed, and translated with the rest of the theme. There is no heading field to fill in.

Each tile uses the collection’s own image. Where a collection has none, Shopify falls back to the featured image of its first product, and failing that the theme draws a placeholder. When the store has no collections at all, the page says so and offers Browse all products.

Note

This is the page at /collections. The Collection list section is a different thing: a curated row of collections you place on a home page or a landing page and choose the members of by hand.

Theme editor or admin

You set in the theme editor	You set in Shopify admin
Columns per row, products per page, section spacing	Which collections exist, their products, images and manual order
Whether filters and sorting show, and how the panel is drawn	Which filters exist and what they filter by (Search & Discovery)
Swatch grid or list, auto-apply and its delay	The swatch values themselves, and the filter group names
The product card’s ratio, badges, hover image and quick button	Search relevance, synonyms and suggestions (Search & Discovery)

Related: Search and filters · Product cards · Product pages · Cart · Lapels support replies within 12 hours.