Collection Page
Most brands treat the collection page like a holding area. It's not. It's the primary discovery engine, where a visitor either finds what they came for or leaves.
Start Here: Framing
Before anything else, count the products.
<10
Under 10 products
Don't use a collection grid. Use a featured card layout. Think Crumbl Cookies homepage. Standout cards, not rows of thumbnails.
~
Under 10 with lots of variants
Split variants into individual listings. Each color, each flavor, each option gets its own card. The grid should feel full.
30+
30+ products
Standard collection grid is correct. Everything below is for this context.
Layout & Discovery
- Do subcollections appear at the top of large collections? Should be image-first, carousel format. (Bottoms → Jeans, Leggings, Shorts, Sweatpants)
- Are subcollections also surfaced at the bottom of the page for visitors who scrolled through without finding what they wanted?
- Is there a search-within-collection feature? Two places to surface it: inside the filter panel, and as a pill that appears after a certain scroll depth.
- Are non-product cards placed inside the grid? Lookbook images that direct to subcollections, a quiz, or other high-value pages.
Filters & Sorting
- Do they have filters? Do the number of filters match the product count? 500 products with no filters is a problem.
- Are filters visually represented, not just text? Colors should show swatches. Sizes should show swatches, not plain text. Occasions should show images.
- Are there multiple sorting options? Best sellers, newest, price low-high, price high-low. Shopify's default best-seller sort is by units, that's wrong. It should sort by revenue.
- For advanced builds: custom sorting by product attributes, fit, feel, use case, coverage, color category, set membership.
Product Cards
- Are product images consistent across the grid? Same background, same framing, same lighting.
- Do best-selling products have a standout image that breaks the grid pattern? (Only if 30+ products)
- Does each niche-required shot exist? Fashion needs every angle. Supplements need a pack shot, serving close-up, and scale reference.
- Are review stars showing on product cards? Single star, numerical rating, review count.
- Are sale prices visually dominant? Compare-at price struck through, sale price in a strong brand color, larger than the original.
- Are product badges used? Best Seller, New, Seen on TikTok, Staff Pick. Not on every product, only the ones that matter.
- Are swatches showing variant options below the card? Clicking a swatch should update the main card image.
Quick Add
Good
Quick add button that adds directly to cart.
Great
Two-step quick add. Clicking "Add" opens a drawer, not the cart, a focused drawer. The drawer contains: media gallery, color selector, size selector, 2–3 line product description, Add to Cart button, View Full Product link.
For fashion: on hover (desktop) or quick-add tap (mobile), show a size overlay on the product card first. When they select a size, then open the drawer with that size pre-selected.
Image Interaction
Can visitors scroll through product images from the collection page without going to the PDP? On hover, carousel arrows should appear, or a thin progress bar at the bottom of the image that fills as you scroll through shots.
UX & Navigation
- Is there a back-to-top button?
- Does scroll position preserve when returning from a PDP? Visitor should land where they left off, not at the top.
- Is infinite scroll enabled? Pagination is worse in almost every case.
- Can visitors adjust grid density? 3-column, 4-column, 5-column. At 6 columns, drop all text, images only.
Below the Grid
- Is there a Recently Viewed or Recommended section? Frame it as "Recommended for You." Prioritize recently viewed if available; fall back to Shopify's recommendation feed.
- Is there a collection description at the bottom? A short version at the top for context, a longer version at the bottom for SEO and customer education.
- Is a quiz accessible from the collection page? As a product card in the grid or as a scroll-triggered overlay.
- Is there a UGC video element? Plays on scroll, starts muted, user can unmute, links to the specific product featured.
Collection Banner
- Is the collection title clear?
- Does the collection have a short description that reinforces its purpose?
- Is the banner image-based, or just plain text on a color background?
Inventory
Are out-of-stock products hidden? In most cases, yes. Exception: scarcity-based brands where showing sold-out previous collections reinforces demand. If you're running paid traffic to a collection, every product in it should be in stock.
What good looks like
Products sorted by revenue performance, not upload date. Filtering brings the count down fast. Quick add reduces friction without polluting the cart. The best products stand out visually. Image quality is high, shot lists are complete. Scroll position is preserved. Discovery options, search, subcollections, quiz, are surfaced at the right moments. The design feels premium, not assembled.
This is 1 area. The full audit covers 11.
Which of your leaks is actually costing the most?
A checklist shows you what to look for. It cannot tell you which leak is bleeding the most revenue on your store, or in what order to fix. The Store Autopsy ranks the 20 to 70 leaks actually costing you money, top 3 surfaced, delivered in about 2 weeks. $800, credited in full toward the fix. Proof, not opinions.
Get the Store Autopsy →
See the full audit