Collections and search
Collection pages and search results work the same way: a grid of product cards, with filters, sorting and page numbers.
Collection pages
The Collection products section shows a collection. To edit it, choose Collections from the page menu at the top of the theme editor.
At the top:
- Show collection image: the collection's image beside its title. It's cropped to a fixed shape, centered on the image's focal point.
- Show collection description: the description you wrote for the collection.
- Show breadcrumbs: the trail above the title.
The grid:
- Products per page: up to 50. Page numbers appear below the grid.
- Columns on desktop and Columns on mobile.
- Show product count: "Showing 1–24 of 300 products" above the grid.
What each card shows is set in Theme settings > Product cards. See Theme settings.
Quick view. Products with options show Choose options on their card. With Theme settings > Product cards > Open product options in a quick view on, it opens the product in a window: its images, options, price, stock, quantity and Add to cart. After adding, the cart drawer opens. View full details goes to the product's page.
Filters and sorting
- Enable filtering: filters beside or above the grid.
- Filter layout on desktop: Sidebar keeps the filters open beside the products. Drawer puts them behind a Filter button. On phones, filters always open in a drawer.
- Enable sorting: a menu to sort by price, name, date and so on. It starts at the collection's own sort order.
Choosing the filters. You set up filters in Shopify's free Search and Discovery app: availability, price, vendor, product type, tags, variant options such as color, and metafields such as condition. Xenon shows whatever you set up there:
| Filter | How it shows |
|---|---|
| A list of values | Checkboxes, each with a count of matching products |
| Options with swatches | Color or image swatches |
| Price | From and To fields |
When shoppers filter or sort, the products update without reloading the page, and the page address changes too, so a filtered page can be shared or bookmarked. Each chosen filter shows above the grid, with a button to remove it, and Clear all.
When nothing matches, shoppers see "No products match these filters" with a way to clear them. An empty collection says so, with a link to all products.
Collection list page
Your collection list page (/collections) shows every collection as a tile with its image and title. Its section, Collection list, has Columns on desktop, Columns on mobile and Show product count. To show only some collections, use the Collection list section on another page instead.
Live search
As shoppers type in any search field, results appear below it:
- Suggested searches: searches that Shopify suggests from what they've typed
- Products: up to six, each with its image, title, part number and price
- Collections, pages and blog posts: up to three of each
- Search for "…": goes to the full results
Shoppers can use the arrow keys to move through the results, and Enter to open one.
Settings in Theme settings > Search:
- Enable predictive search: turns live results on or off.
- Show vendor in results and Show price in results.
- Search products only: leaves pages and blog posts out of results.
Finding part numbers. Search looks in product titles, types, vendors, tags, descriptions, and variant SKUs and barcodes. It matches the start of the last word typed, so "C41N" finds "C41N1901", and a laptop model number finds parts that list it in their description.
The search page
The Search results section shows the full results, with the same filters, sorting and page numbers as collections. Its settings match the collection page's: Results per page, Columns on desktop, Columns on mobile, Show result count, Enable sorting, Enable filtering and Filter layout on desktop.
Products show as product cards. Pages and blog posts, when included, show as text cards in the same grid.
When nothing is found, the page suggests checking the spelling or trying a part number, model or brand. With a request page set, it offers Ask us to find it, which opens your request form with the search filled in. See Contact page and part requests.
Improving search
The Search and Discovery app also lets you:
- add synonyms, so "battery" finds products described as "accu"
- boost products to the top of results for certain searches
- hide products from search