The same product page is two different experiences. On desktop the shopper sees price, rating, variants and the buy button in one view. On a phone those four things are stacked across three screens, and the order you chose is deciding your conversion rate.
The gap is bigger than most teams think
Across 486 million sessions and 117 brands, DRIP found desktop converting 1.56 times higher than mobile while mobile carried 78% of traffic. Most of the audience is on the worse experience.
Product pages are the most exposed template, for three reasons. They are image-heavy, which makes them slow. They carry the most information, which makes stacking brutal. And they are almost always designed and approved on large screens.
What happens to the fold
On desktop the first screen answers four questions at once. On mobile it usually answers one: here is a photograph.
The shopper then has to scroll to find the price, scroll again for the rating, and scroll again for delivery information. Each scroll is a decision point where leaving is an option, and the questions that matter most frequently sit furthest down.
The fix is not a smaller image. It is deciding deliberately what the first mobile screen has to accomplish, then building backwards from that. Usually: product name, price, star rating and a visible path to the buy button. The hero image can be smaller than a designer wants and the page will convert better.
Speed, which only bites on mobile
Only around 42% of mobile sites pass all three Core Web Vitals. Google and Deloitte's analysis of over 30 million mobile sessions associated a 0.1 second improvement in mobile load time with an 8.4% rise in retail conversion and a 9.2% rise in average order value.
Product pages load many large images, often at desktop dimensions, often through an app that injects additional scripts. On a laptop with good wifi none of that is visible. On a mid-range phone on mobile data it is the entire experience.
Correctly sized images and lazy loading do more for a product page than any layout change, and neither requires a test to justify.
The four things to check on a real device
| Check | What fails |
|---|---|
| Time to first meaningful paint | Oversized images, render-blocking scripts |
| Scrolls to reach price | Hero image occupying the full viewport |
| Thumb reach on the CTA | Buy button positioned for a cursor |
| Variant selector usability | Swatches sized for a mouse pointer |
That last one is quietly expensive. Variant swatches designed at desktop scale become targets too small to hit accurately on a phone, and a mis-tap that selects the wrong size produces either an abandoned cart or a return.
Checkout inherits the problem
A mobile shopper who reaches checkout is still fighting the small screen, and the documented causes of abandonment hit harder there. Baymard's research attributes 48% of abandonments to unexpected extra costs, 19% to mandatory account creation and 18% to a checkout that is too long.
Typing card details on a phone is the single largest friction point, which makes wallet payment options one of the highest-return changes available. On Shopify, analysis puts Shop Pay's conversion improvement at up to 50% against guest checkout and 91% on mobile. That is a configuration change, not a project.
How to test it without confusing yourself
Segment every product page test by device before reading it. A change that helps mobile and does nothing on desktop will read as a marginal blended result and get discarded.
Run mobile-only tests where the hypothesis is mobile-specific. Most brands do not, and then wonder why their product page programme produces inconclusive results. ConversionTeam's audit of 2,288 tests found 19.1% reached statistical significance per test, and blending two opposite effects is a reliable way to land in that majority.
The twenty minute version
Take your phone off wifi. Load your best-selling product page. Time it. Count the scrolls to price, to rating, to delivery information, to the buy button.
Then add to cart and go all the way to the payment step with a realistic order. Note every point where you had to zoom, hunt or type something awkward.
Almost every brand finds at least one thing in that walkthrough that has been costing money for a year, and none of it requires a research budget.
The full structure, including what belongs on the first mobile screen, is in our guide to what a product detail page has to do.
Sign in to leave a comment.