How Far Down Is Your Add-to-Cart Button? Go and Measure It.

Most product page reviews come down to opinion. Someone senior looks at the page, says it feels cluttered, and the conversation goes round for a fortnight.

Here is a version that doesn't. Open your best-selling product page on a 390 pixel wide viewport and measure, in pixels, how far down the page the add-to-cart button sits. It takes about five minutes and it gives you one number you can track, argue with, and hand to a developer.

We run this on every store we audit. The number is almost always worse than the merchant expects.

"The gap between what a founder remembers approving and what a customer on a train actually gets is where a lot of mobile revenue quietly goes."

The method

1. Open Chrome, load the product page, open DevTools (Cmd+Option+I on Mac, F12 on Windows) and switch on the device toolbar. Set the dimensions to 390 x 844 — the logical viewport shared by the iPhone 12 through 15 line.
2. Hard refresh so every app and widget loads the way a first-time visitor gets them. Don't dismiss the cookie banner or the newsletter popup. They are part of the page.
3. Right-click the add-to-cart button, choose Inspect, then run this in the console:
   $0.getBoundingClientRect().top + window.scrollY
   $0 is whatever you last inspected. What comes back is the distance in CSS pixels from the top of the document to the top of the button.
4. Run window.innerHeight. The emulator gives you 844. On a real iPhone in Safari, with the address bar and toolbar on screen, the visible area is shorter than that, so treat 844 as generous.

What the number means

Our working benchmark, from running this across a lot of stores: under 900 pixels is healthy, and the customer scrolls once. Between 900 and 1,500 is worth a look. Past 1,500 you are asking someone to make three deliberate swipes before they can act on an intention they already had when they landed.

Pages that measure badly rarely have one culprit. It stacks:

• Announcement bar
• Sticky header
• A square hero image filling the full width at 390 pixels tall
• Carousel dots
• Breadcrumbs
• A row of trust badges
• The product title
• A review widget that injects late and shoves everything down
• Swatches for every option in the range
• A shipping estimator
• And then, finally, the button

"Every one of those was approved on its own merits. Nobody approved the stack."

The fix

Reordering, mostly. Cheaper than it sounds, and it doesn't need a redesign:

• Put name, price and rating directly under the first image, so a customer knows what they are looking at and what it costs without moving.
• Hold the options back until they are needed. If the range has a size and variant matrix, showing all of it at once reads as work rather than choice.
• Add a compact sticky purchase bar, controlled by an IntersectionObserver watching the real button rather than a fixed scroll distance. The bar appears when the actual button leaves the screen and goes away when it returns. Tie it to a pixel threshold instead and it will fight the page on every device you didn't test on.
• Send the trust badges, the shipping estimator and the long description below the fold. None of them are earning their place at the top.
• Reserve the space for the review widget so the page doesn't jump while it loads. A button that moves under someone's thumb costs you more than a slow one does.

If your collection pages have the same problem, and they usually do, the companion piece is “Your collection pages are hiding the products”. The wider version of the argument sits in Your desktop site looks fine. That's the problem.

At beCommerce, we run this exact audit against your top-selling product pages as part of every mobile CRO review. If you want a hand measuring and fixing yours, let's talk.