Collection and search
Collection pages and search results share the same grid, filters, sorting and product cards. This page covers the Collection and Search results sections, the cards, quick view and quick add.
Collection layouts#
Open a collection in the theme editor and select the Collection section.
| Setting | What it does |
|---|---|
| Layout | The lookbook keeps the collection image, a video or a slideshow in view on one side while the products scroll in a column on the other. Add slide blocks to choose its pictures. |
| Size | Small is a dense catalog, large an editorial grid with fewer columns and taller images. |
| Products in the lookbook | |
| Show the product image on the stage on hover |
The Lookbook layout keeps the collection image, a video or a slideshow in view on one side while the products scroll in a column on the other. Add Lookbook slide blocks to choose its pictures. With Show the product image on the stage on hover on, pointing at a product shows its picture on the stage.
Collection header#
| Setting | What it does |
|---|---|
| Header layout | Uses the collection image. Without one, and in the lookbook, the header shows text only. |
| Image position on desktop | |
| Image height | |
| Collection description | |
| Show product count as a figure | A large number under the collection title. The line above the products already says how many products are shown, so this is off by default. |
| Figures style | Add figure blocks to show more numbers beside the product count. |
| Quick links menu | Shown as pills under the header. Use it for related collections. |
Grid and pagination#
| Setting | What it does |
|---|---|
| Products per page | |
| Columns on desktop | |
| Columns on mobile | |
| Pagination | |
| Make the first card span two columns |
With the Load more button, the next page of products is added under the current one. The button is a normal link to the next page, so it still works when JavaScript is off.
Blocks in the collection#
- Promo tile (up to 6): Style, Image, Label, Heading, Text, Button label, Link, Position in the grid, Width, Color scheme.
- Figure (up to 3): Label, Value.
- Lookbook slide (up to 6): Image, Video.
- Custom Liquid: Liquid code.
- Also accepts app blocks.
A Promo tile sits in the grid among the products, at the position you choose. Use it for a guide, an offer or a story.
Filters#
Filters come from Shopify. Choose which filters exist, and their order, in the Shopify Search and Discovery app under Filters. The theme shows whatever that app provides: availability, price, product type, vendor, options, and metafield filters. Color filters use the swatches set on your product options.
| Setting | What it does |
|---|---|
| Show filters | Choose which filters appear with the Shopify Search and Discovery app. |
| Filter layout | The Filters button always opens the drawer at the full height of the screen. The bar also shows every filter as a button. The column sits beside the results on desktop. |
| Drawer side | |
| Quick filters beside the button | The first filters of the list, such as availability and price, also open from the bar on desktop. Set their order in the Shopify Search and Discovery app. |
| Filter groups | |
| Show result counts in filters | |
| Keep the filter bar in view while scrolling | |
| Show sorting | |
| Sorting style | The switch holds the short sort orders. On mobile, and for the other orders, the dropdown is used. |
| Show grid density switch | Lets customers choose larger or smaller cards. |
The three layouts of Filter layout:
- Drawer: a Filters button opens a drawer at the full height of the screen, on the side set by Drawer side. This is the layout on mobile in every case.
- Bar above the results: every filter is also a button in a bar above the grid.
- Column beside the results: filters sit in a column beside the grid on desktop.
Quick filters beside the button shows the first filters of the list as their own buttons beside the Filters button on desktop. The first filters are the ones at the top of the list in the Search and Discovery app.
Results update without reloading the page, the address in the browser changes with each choice so a filtered view can be shared, and active filters are listed with a control to remove each one or all of them.
If no filter appears, check that the Search and Discovery app is installed and that the collection has enough products. Shopify does not show filters on collections with more than 5,000 products.
Sorting#
Show sorting adds the sort control. With Sorting style set to Switch, the short sort orders are shown as a switch on desktop, and the other orders stay in a dropdown. The sort orders themselves are Shopify's: featured, best selling, alphabetical, price and date.
Show grid density switch lets customers choose between larger and smaller cards.
Product cards#
Cards are set in two places.
For the whole store, under Theme settings > Product cards: the image ratio, the second image on hover, vendor, swatches, rating, badges and the actions on the card. See Product cards.
For one section, under its Product cards heading:
| Setting | What it does |
|---|---|
| Card style | |
| Image fit | |
| Product video on cards | Plays the first video of a product as a silent loop. On mobile one video plays at a time. |
Cards show the product title, the price with compare-at price and unit price where they apply, badges, and up to five color swatches when Show color swatches is on. Each swatch links to that variant of the product.
Quick view and quick add#
Both are turned on under Theme settings > Product cards, under the heading Actions.
| Setting | What customers get |
|---|---|
| Show quick view | Opens the product as a sheet on the right edge of the screen, or from the bottom on mobile: gallery, price, options, buy buttons and a link to the full page. |
| Show add button | A product with one variant is added straight to the cart. A product with options opens a small picker inside the card's picture. Turned off, the card only links to the product page. |
| Actions | On the picture: quick view is a round icon at the top right and add is a bar across the foot of the picture. Under the picture: quick view is a text link and add is a small pill. None: no actions. |
| Actions on the picture | On hover or Always visible, on desktop. On mobile, and on any touch screen, they always show. |
| Show dynamic checkout buttons in quick add | Shows the accelerated checkout button in quick view. |
After a product is added, the cart drawer opens when Cart type is Drawer.
Search results#
| Setting | What it does |
|---|---|
| Show result type tabs | Lets customers see products, blog posts or pages alone. |
| Suggested links menu | Shown as pills before a search and when nothing is found. |
| Collection to suggest when nothing is found |
The search results page lists products, pages and blog posts. With Show result type tabs on, customers can see one type alone. Filters, sorting, the grid and the cards have the same settings as on the collection page.
Settings of Search results
| Setting | What it does |
|---|---|
| Size | Small is a dense catalog, large an editorial grid with fewer columns and taller images. |
| Search | |
| Show result type tabs | Lets customers see products, blog posts or pages alone. |
| Suggested links menu | Shown as pills before a search and when nothing is found. |
| Collection to suggest when nothing is found | |
| Filters and sorting | |
| Show filters | Choose which filters appear with the Shopify Search and Discovery app. |
| Filter layout | The Filters button always opens the drawer at the full height of the screen. The bar also shows every filter as a button. The column sits beside the results on desktop. |
| Drawer side | |
| Quick filters beside the button | The first filters of the list, such as availability and price, also open from the bar on desktop. Set their order in the Shopify Search and Discovery app. |
| Filter groups | |
| Show result counts in filters | |
| Keep the filter bar in view while scrolling | |
| Show sorting | |
| Sorting style | The switch holds the short sort orders. On mobile, and for the other orders, the dropdown is used. |
| Show grid density switch | Lets customers choose larger or smaller cards. |
| Results | |
| Results per page | |
| Columns on desktop | |
| Columns on mobile | |
| Pagination | |
| Product cards | |
| Card style | |
| Image fit | |
| Product video on cards | Plays the first video of a product as a silent loop. On mobile one video plays at a time. |
The search panel that opens from the header is described in Header and navigation.
Collections list page#
The page at /collections lists your collections. It uses the Collections section.
| Setting | What it does |
|---|---|
| Heading | Leave empty to use the page title. |
| Text | |
| Show number of collections | |
| Layout | |
| Size | Small is a dense catalog, large an editorial grid with fewer columns and taller images. |
| Card style | The editorial layout always uses images. |
| Image ratio | |
| Columns on desktop | |
| Columns on mobile | |
| Show product count | |
| Collections per page |