Everyone links the same product pages as examples. We opened four of them on a phone and measured where the price, rating and add-to-cart actually sat.
Every article about product page design links the same handful of stores and tells you they're doing it right. Almost none of them say what "right" means in a way you could check.
So we opened four on a phone and measured them. Bombas, Glossier, Beardbrand and Death Wish Coffee, all at 375 pixels wide, on 12 August 2026. Two of them put the buying decision inside a single screen. Two make you scroll past two screens to reach it.
What a product detail page is
The product detail page, or PDP, is the page for a single item: images, title, price, variants, reviews, add to cart. On most stores it's where the buying decision actually happens. The home page gets people interested and the cart handles the transaction. The product page is where somebody decides.
It's also the page merchants audit least carefully, because they've looked at it a thousand times and stopped seeing it.
The single most useful thing to measure on an ecommerce product page is how far down the buying block sits. Title, price and add-to-cart, the three things you need in order to buy, should all be reachable within about one and a half scrolls on a phone. That is not a style preference. It's the difference between a visitor who can decide and one who has to work for the information first.
At 375×812 that bar is 1,218 pixels.
The four pages, measured
Title · Price · Add to cart · Button · Buying block · Rating · Sticky ATC
Glossier · 630 · 916 · 905 · 351 × 44 · 1.13 scrolls · 673 · Yes
Bombas · 136 · 840 · 1,019 · 343 × 56 · 1.25 scrolls · accordion · No
Beardbrand · 568 · 647 · 1,682 · 191 × 44 · 2.07 scrolls · 656 · Yes
Death Wish · 307 · 880 · 1,914 · 345 × 43 · 2.36 scrolls · 387 · No
Pixel offsets from the top of the document at 375×812, measured 12 August 2026. Buying block is the furthest of title, price and add-to-cart. Bar is 1,218px.
Two things jump out before any interpretation.
Glossier gets to the decision fastest, at 1.13 scrolls, and still has a sticky add-to-cart for anyone who scrolls past it. It's the most carefully built of the four.
Death Wish takes 2.36 scrolls, has no sticky button, and the one it does have is 43 pixels tall. One pixel under the bar. That is the kind of detail that only shows up when you measure.
What the two passing pages do
Glossier puts the rating at 673, directly under the title at 630: 4.45 stars from 10,729 reviews, before the price. The add-to-cart lands at 905 and is exactly 44 pixels tall, which is the thumb bar precisely, hit deliberately.
The page is also short. The whole document is about 7.3 viewports, against Death Wish's 16.7. A shorter product page is not automatically better, but it does mean every section had to earn its place.
Then a sticky add-to-cart appears once you scroll past the inline one. Fast to the decision, and the decision stays available. That's the pattern worth copying.
Bombas does it differently and also passes. The title sits at 136, so it's the first thing you see, price at 840, and the add-to-cart at 1,019 is 343 by 56 pixels, the most generous button of the four.
Where Bombas is weaker: the rating is buried. A "4.8, 67,692 Reviews" row sits in a collapsed accordion below the button, along with the shipping terms. Sixty-seven thousand reviews is social proof most brands would sell a kidney for, and it's behind a plus sign. Bombas also has no sticky add-to-cart, which it mostly gets away with because the inline one is already inside the bar.
Where the other two slip
Beardbrand is the interesting case, because it fails the headline test and then mitigates it.
Title at 568, price at 647, rating at 656 with 864 reviews, all tight and all well placed. Then the add-to-cart is at 1,682, which is 2.07 scrolls. The variant selectors and product copy sit between the price and the button, so you read the whole pitch before you can act on it.
What saves it is a sticky add-to-cart bar, 75 pixels tall, that follows you down the page. So the decision is slow to arrive but never leaves. If you're going to fail the buying-block test, this is how to fail it.
The button itself is the odd part: 191 pixels wide against 343 to 351 for everyone else. It's the only one on the page and it takes up about half the width available to it.
Death Wish Coffee gets one thing more right than anybody and several things wrong.
The rating sits at 387 pixels, directly under the title, above the price: 4.8 out of 5 across 4,729 reviews. Of the four pages this is the best review placement, and it's the cheapest change on this list to copy. It also shows a per-unit price, which for anything sold by weight is the number buyers are actually comparing.
Then it goes sideways. Subscribe-and-save is preselected, the one-time purchase option sits below it, and the primary button reads "START A NEW SUBSCRIPTION" at 1,914 pixels, 2.36 scrolls down. A first-time visitor scrolls past two screens to find a button that commits them to a recurring charge. The button is 43 pixels tall, and there's no sticky version of it. The document runs 13,567 pixels, nearly 17 viewports.
What actually separates them
Four pages, and the split isn't about taste. All four have good photography. All four have competent copy.
The difference is how much work the page makes you do before you can decide, and whether the decision stays available once you've scrolled past it. Those are two different things, and the four pages cover every combination:
- Fast and sticky: Glossier. Best of the four.
- Fast, not sticky: Bombas. Fine, because the button is already inside the bar.
- Slow but sticky: Beardbrand. Recoverable.
- Slow and not sticky: Death Wish. The buyer who decides at scroll four has to go back up to act.
Everything else is decoration on top of that.
The three things worth copying, in order:
- Get title, price and add-to-cart inside 1,218 pixels. Glossier does it in 916.
- Put the rating under the title. Death Wish does this best of the four, at 387. Bombas has sixty-seven thousand reviews hidden in an accordion, which is the opposite move.
- Add a sticky add-to-cart. Two of these four have one, and it's what turns Beardbrand's slow page from a problem into an inconvenience.
How to write the product page
Copy is the part people ask about most and measure least.
Lead with the benefit, not the specification. The first line answers "why would I want this," and the spec table underneath answers "will it work for me." Both are needed, in that order.
Make it scannable in ten seconds. Bulleted key points, short paragraphs, specs in a table. Nobody reads a product description as prose. They scan it for the one thing they're worried about.
Answer the blocking question. Every category has one: sizing for apparel, ingredients for skincare, compatibility for electronics, care for anything upholstered. If the answer lives in a support email, you've lost everybody who won't send one.
Give a scale reference in the photos. One image where the product sits next to something whose size everyone knows. Returns data is full of people who guessed.
Don't use the manufacturer's copy. It's on forty other sites, it reads like a spec sheet, and it's the single clearest signal that nobody at the company has thought about this page.
Watch what the copy pushes down. Beardbrand's problem isn't the writing, it's that the writing sits between the price and the button.
Shopify product page specifics
If you're on Shopify, a few theme defaults cost money out of the box.
Dawn and most free themes don't ship a sticky add-to-cart. Two of the four pages above have one and two don't, and it's the difference between recovering a slow buying block and not.
The default gallery puts a tall hero image first, which is what pushes the price down at 375 pixels. Cropping the first image or reducing its aspect ratio usually moves the entire buying block up several hundred pixels for zero design cost. Bombas's title at 136 against Glossier's at 630 is almost entirely a gallery decision.
Review apps inject their widget wherever the theme's block order puts it, which is often far down, or into a collapsed accordion. Moving the rating to sit under the title is usually a two-line change and it's the highest-return edit on this list.
Theme updates revert custom work. Sticky add-to-cart is the usual casualty. If you fixed it once, check it after every update.
The failures are predictable on Shopify, because everybody starts from the same handful of themes.
Doing this repeatedly
We measured four pages at one moment. Your own pages need it more often than that, because product pages drift: a theme updates, an app injects a block, a seasonal banner moves the fold, and the buying block that fit last quarter now sits at 1,500 pixels.
You can do this by hand. Open your product page at 375 pixels, measure where title, price and add-to-cart land, check the button height, then scroll past the button and see whether anything follows you down. It takes about ten minutes per template and the numbers don't lie to you the way a screenshot does.
Wait for the images to load before you measure. That sounds obvious and it's the thing that ruined our first pass at this article: on an unloaded gallery, Beardbrand's title read 193 instead of 568, and every number underneath it was wrong by the height of a photograph.
That's the job Qosmic does continuously, against your live storefront, so a theme update that pushes your price below the fold shows up the same week instead of next quarter. A calendar reminder and ten minutes gets you most of the way there, and plenty of good operators run it exactly like that. What matters is that somebody measures, because nobody notices this by looking.
The short version
The product detail page is where the decision happens, and the metric that matters most is how far down the buying block sits.
Get title, price and add-to-cart inside about 1,218 pixels on a phone. Glossier does it in 916, Bombas in 1,019. Beardbrand and Death Wish need more than two screens.
Add a sticky add-to-cart so the decision stays available. Half of these four have one.
Make the button at least 44 pixels tall. Death Wish's is 43.
Put the rating under the title. Death Wish does it at 387. Bombas hides 67,692 reviews behind a plus sign.
And measure rather than admire. All four of these pages have good reputations, and half of them fail the basic test.
