Your Collection Pages Are Hiding the Products

A collection page has one job on a phone. Show the products.

"A collection page has one job on a phone. Show the products."

Plenty of them don't, and the reason is the same one that makes the page look good in a design review. Everything above the grid was approved individually, by people looking at a large monitor. On a 390 pixel wide screen those decisions stack, and the first product ends up a screen and a half down.

Same method as measuring add-to-cart depth. One number, five minutes, no opinions required.

Measure it

1. Chrome, DevTools, device toolbar at 390 x 844. Load your busiest collection page and hard refresh, so the announcement bar, the cookie banner and the popup all behave the way they do for a stranger.
2. Right-click the first product card, choose Inspect, then run this in the console:
   $0.getBoundingClientRect().top + window.scrollY
   That is how far down the page the first product starts.
3. Compare it against the benchmark. Under about 700 pixels and the customer sees products in the first screen. Over 1,000 and they are scrolling past your branding to reach your catalogue.

Then find where the height went. Measure each block above the grid the same way, or read the heights off the Elements panel. The usual offenders, with the ranges we see most often:

• Announcement bar — 40 to 60 pixels, sometimes two lines because the copy was written for desktop.
• Sticky header — 60 to 90 pixels.
• Collection hero image — 300 to 400 pixels, usually a lifestyle shot with the collection name over it.
• H1 and intro copy — 150 to 300 pixels.
• Filter and sort row — 50 to 100 pixels.

Add those up and you have spent a thousand pixels before a single product.

What to cut and what to move

• Cut the hero image back on mobile, or replace it with a text band. On desktop it sets a mood. On mobile it is a full screen of not-shopping, and the collection name is already in the H1 underneath it.
• Trim the intro copy to 50–80 words above the grid. Put the remaining 200 to 500 words below it. Google reads the whole page. Your customer reads the first screen.
• Move filters into a slide-out panel behind a compact sticky control. Stacked above the grid they earn their space on desktop and cost more than they return on mobile. One tap away instead of a screen deep.
• Run two columns, not one. A single-column mobile grid halves the number of products someone sees per swipe, which is the opposite of what a collection page is for.

Page height isn't the problem

There is a habit of treating total page length as the metric.

"A collection page running 12,000 pixels because it loads 48 products is doing its job."

What matters is the distance before the first product, and how fast that first row of images arrives. Two separate problems, two separate fixes. For the second one, set loading="eager" and fetchpriority="high" on the images in the first row of cards, and leave native loading="lazy" on everything below. A lot of themes lazy-load the whole grid by default, which delays the one image the customer is waiting for in order to save loading the ones they haven't reached yet.

Check the card images are being served near the size they are displayed at, while you are in there. A 285 pixel wide card fed a 750 pixel image is a common and expensive default, and it has its own piece coming: “You're sending 750px images into a 285px space”.

Related reading: Your desktop site looks fine. That's the problem. covers why this gap survives review after review. How far down is your add-to-cart button? Go and measure it. applies the same measurement to product pages.

At beCommerce, we run this same measurement across your top collection pages as part of every mobile CRO audit. If you want a hand fixing what's stacking above your grid, let's talk.