Collection Page CRO: How to Turn Category Browsers into Buyers
Collection Page CRO: How to Turn Category Browsers into Buyers
Change your sort order first. On most Shopify stores, switching a collection from manual or alphabetical to best-selling lifts collection-to-product click-through more than any redesign will, and it takes ninety seconds. Everything else in this guide matters, but that is the one to do today.
When we run stores through our Collections Health Check, the pages leaking the most revenue are rarely ugly. They look fine. They just show the wrong twelve products above the fold, hide their filters behind a button nobody taps, and stall for four seconds on 4G.
What does a category page CRO guide usually get wrong?
Most advice treats the collection page as a smaller product page. It isn't. Product pages answer "should I buy this?" Collection pages answer a different question: "which of these is for me?"
That changes what you optimize. On a product page you add trust signals, longer copy, better photography. On a collection page you are running a shortlisting exercise. The shopper is comparing eight to fifteen items in a few seconds, so your job is to make the comparison cheap. Inconsistent image crops, prices in different formats, badges that mean nothing: all of it slows the shortlist down.
The second mistake is treating CRO and SEO as separate projects. They share a page. A collection description stuffed at the top for keywords pushes products below the fold and costs conversions; the same content below the grid earns its ranking without the tax. We cover placement in our category page content guide, and the ranking side in the ecommerce category page SEO guide.
Why does default sort order beat manual curation?
Because your merchandising instinct is a sample size of one and best-selling sort is a sample size of everyone who visited last month.
Manual sort feels responsible. You drag the new arrivals up, put the hero product first, tuck the slow movers at the bottom. Then the collection sits untouched for eight months while demand shifts underneath it. Meanwhile "best selling" re-sorts itself daily using real purchase data from your store, at your price points.
There are three honest exceptions: seasonal collections in the first two weeks before sales data exists, collections where margin justifies pinning a specific SKU, and brand-new collections with no order history. Outside those, default to data.
| Sort order | Best used for | Typical weakness |
|---|---|---|
| Best selling | Almost every evergreen collection | Ignores new SKUs with no sales history |
| Manual | Seasonal launches, curated editorial collections | Goes stale fast; needs a calendar reminder |
| Price: low to high | Deal-driven categories, gifting under $25 | Trains shoppers to buy your cheapest item |
| Newest first | Fashion, drops, subscriber-driven stores | Buries proven sellers within a week |
| Alphabetical | Almost nothing on a storefront | Product names are not a shopping criterion |
The "price: low to high" row deserves a warning. It converts well on click-through and badly on average order value. Setting it as default means you've decided to compete on price in that category. Make that a choice, not an accident.
How to change your default sort in Shopify admin
- Go to Products → Collections and open the collection you want to fix.
- Scroll to the Products section and find the Sort dropdown on the right.
- Choose Best selling. Shopify recalculates this daily from your own order data.
- If the dropdown is greyed out, the collection is set to manual arrangement. Change Sort away from "Manually" first, then pick Best selling. Our help article on collection types walks through the switch.
- Save, then load the collection in an incognito window and check the first two rows. A sold-out item up there is an inventory-visibility setting under Settings → Products, not a sort problem.
- Repeat for your top ten collections by sessions, found under Analytics → Reports → Top collections by traffic.
One more thing while you're in there: push out-of-stock products to the end. That lives in the collection's sort behaviour on most themes, and where it doesn't, our guide to changing product order on Shopify covers the theme-level approach.
A garden centre client of ours ran 340 SKUs across eleven collections, all on manual sort set up at launch two years earlier. We switched nine to best selling and left the two seasonal ones alone. Collection-to-product click-through went from 22% to 31% over six weeks, and sitewide conversion moved from 1.4% to 1.7%. No design work, no new photography.
What is the anatomy of a product card that converts?
A card has roughly six slots, and every slot past the useful ones costs you scan speed. Here's what earns its place.
The image does most of the work. Consistent crop, background and aspect ratio across the whole grid. Mixed backgrounds are the most common visual problem we see, usually because half the catalogue came from a supplier feed. A secondary image on hover earns its place for apparel and homeware; it's noise for consumables.
The price should be one line. Show a compare-at price as a strikethrough next to the current price, never above it. Two-line prices double the vertical space every card needs and push a whole row below the fold on mobile.
Star ratings matter more than most merchants think. Our collection page scans check for review markup on cards specifically, and pages showing ratings in the grid consistently score higher on the conversion dimension. A shopper comparing fifteen items uses ratings as the fastest filter available.
Badges should be capped at one per card. "New", "Best seller", "Low stock" and "20% off" all fighting on the same tile means none of them registers.
Variant swatches belong on cards only when colour is a primary decision criterion. For a rug store, yes. For supplements, no.
Quick-add is the contested one. It helps on repeat-purchase and single-variant categories (coffee, pet food, consumables) and hurts on considered purchases, because it pulls people into cart before they've compared. If your category has a return rate above 15%, skip it. If you add it, keep it always-visible on mobile, since mobile has no hover state and a hidden button is a dead button.
For a scored breakdown of your own cards, our free Collection Page Score checks a live collection URL for price presence, review markup, CTA coverage, image lazy-loading and filter availability, then scores it across SEO, UX, performance and conversion.
What do the best ecommerce category pages do with filters?
They make filters visible without being asked.
The strongest pages I've studied share a pattern: a horizontal filter bar on desktop showing the three or four attributes that actually matter for that category, with the rest tucked into "More filters". On mobile, a sticky filter and sort bar pinned to the bottom of the viewport, not a link buried at the top that scrolls out of view after one swipe.
Three rules that hold up across categories:
- Show result counts next to each filter value. "Waterproof (14)" prevents the zero-result click.
- Never let a filter combination return nothing. If it must, return the closest matches with a message explaining what you relaxed.
- Filter values must come from real product data, which on Shopify means metafields or tags applied consistently. Half-tagged catalogues produce filters that hide products, and merchants blame the filter app.
Filter architecture also decides which faceted URLs you want indexed. If you're planning both at once, read how to structure categories and filters for SEO before you commit to a taxonomy.
How many products should a mobile grid show per row?
Two, in almost every case.
One-per-row wastes the screen and makes comparison impossible; you can't shortlist against something you have to scroll to see. Three-per-row on a 390px viewport gives cards about 120px wide, at which point the image is too small to judge and the title truncates to two words. The exception is visual, low-detail categories like plants, prints and tiles, where the image alone carries the decision.
Watch the vertical rhythm too. Aim for two full rows plus a sliver of the third on first paint. That sliver is what tells the shopper there's more below, and it's free. Cards so tall that only one row fits behave like a one-per-row grid, however many columns you've configured.
What are the category page retail best practices for dead ends?
A dead end is any state where the shopper has nowhere sensible to go next. Retail sites generate four, and all four are preventable.
Empty collections. The worst, and common. A collection built on an automatic condition ("tag equals summer-2025") that no longer matches anything renders as a heading with nothing under it. Our health-check scans flag these routinely on stores with more than fifty collections, usually still linked from the main navigation. Audit for zero-product collections quarterly and either repopulate or redirect them.
Out-of-stock grids. A collection where the first row is all sold out reads as "this store doesn't have stock", even if item seven is available. Push out-of-stock to the end.
Over-filtered zero results. Covered above; the fix is a message plus fallback products, not an apology.
The end of the grid. Most themes end the product list with pagination and then the footer. That's a cliff. Put related collections, a "shop by" block, or the collection's supporting content there instead.
To check all four across your whole catalogue, our Collections Health Check crawls your collection sitemap and reports missing descriptions, thin pages, absent schema and structural gaps for every collection you have, not just the one you're staring at.
How much does collection page speed affect conversion?
Enough that it belongs in a CRO guide rather than a technical one.
Collection pages are the heaviest templates on most Shopify stores because they load twenty to forty product images at once. The biggest single win is making only above-the-fold images load eagerly and lazy-loading everything below. In our scans, the lazy-load ratio is one of the sharpest predictors of a poor performance score; plenty of themes lazy-load nothing, and plenty lazy-load everything including the first row, which delays largest contentful paint.
Two other things to check: how many stylesheets and scripts the page pulls (under ten total is healthy, over twenty is a problem), and whether your theme preconnects to your CDN and review-app domains.
Speed compounds with everything else here. A brilliant product card that appears at 4.2 seconds converts worse than an average one at 1.4. For where speed sits among other conversion levers, see our guide to increasing your Shopify conversion rate.
What does conversion rate optimization for garden center websites look like?
Garden centres are a useful stress test because they combine everything awkward about collection page CRO: heavy seasonality, live inventory, wide price variation, and shoppers who want local pickup.
Four adjustments matter more here than in general retail. Best-selling sort needs a seasonal window rather than an all-time one, so pin two or three current-season heroes and let the rest sort by sales. Cards should carry pot size or plant height rather than a generic subtitle, because that is the real comparison criterion. Stock is volatile, so out-of-stock handling matters more than anywhere else; nothing kills a garden centre collection faster than a top row of unavailable perennials in April. And if you offer click-and-collect, surface local availability on the card, not at checkout.
The same logic transfers to any seasonal or perishable category: florists, seasonal food, festive gifting. Identical principles, different weightings.
FAQ
What is collection page CRO?
Collection page CRO is the practice of improving how many collection page visitors go on to view and buy a product. It focuses on the shortlisting decision: sort order, product card design, filter usability, grid density, page speed, and preventing dead ends like empty collections or all-sold-out first rows. It differs from product page CRO, which optimizes a single purchase decision rather than a comparison.
Should I use best selling or manual sort on Shopify collections?
Use best selling as your default for evergreen collections. It re-sorts daily using your own order data, so it stays current without maintenance. Use manual sort only for seasonal launches in their first weeks, editorial or curated collections, and cases where margin justifies pinning a specific product. Manual sort on an untouched evergreen collection goes stale within a few months.
How many products should a Shopify collection page show before pagination?
Between 24 and 48 products per page works for most stores. Fewer than 24 forces pagination too early and interrupts browsing; more than 48 adds significant image weight and slows first paint. If you use infinite scroll, keep a real paginated URL underneath it so search engines and shoppers using back-navigation both still work.
Do quick-add buttons on collection pages increase conversions?
It depends on the category. Quick-add helps for repeat-purchase and single-variant products such as coffee, pet food, and consumables, where the shopper already knows what they want. It hurts for considered purchases with sizing, fit, or high return rates, because it moves people to cart before they've compared options or read details. Test it per collection rather than sitewide.
What causes an empty Shopify collection page?
Usually an automated collection whose conditions no longer match any product, for example a tag that was renamed or a seasonal tag that was removed. Manual collections can also empty out when their products are archived or unpublished from the online store channel. These pages often stay linked in navigation, so audit for zero-product collections quarterly and redirect or repopulate them.
Where should the collection description go for both SEO and conversion?
Put a short introduction of one or two sentences above the grid and the longer supporting content below it. Long copy above the grid pushes products off the first screen and costs you conversions, while content below the grid still earns its ranking value and doubles as a dead-end fix at the bottom of the page.
Start with sort order on your top ten collections, then run one of those pages through the Collection Page Score to find the card and filter gaps. To see every collection at once, the Collections Health Check scans your whole catalogue in one pass.
