Product pages & pricing
The 3-second test: above-the-fold on mobile
Most traffic is on a phone and shoppers decide in about three seconds, before they scroll. The mobile fold must show product image, name, price, one CTA, and one trust element, without a single swipe.
On mobile, the space visible before the first scroll (the fold) decides whether a shopper stays. It has to answer three questions instantly: what is this, does it fit me, and what do I do next. When a hero banner, a load-time popup, or slow LCP pushes the price and Add-to-cart below the fold, you lose buyers who never see them. The fix is a five-item must-have checklist and a real-phone self-audit. AI can grade a screenshot; you move the layout.
The 3-second test: above-the-fold on mobile
Most of your traffic is on a phone. Shoppers decide whether to stay in about three seconds, before they scroll at all.
The mobile fold has to answer three questions without a single swipe: what is this, does it fit me, what do I do next? AI can audit a screenshot and list what's missing. You fix the layout.
Fastest path: one prompt, end to end
AI prompt — paste into ChatGPT / Claude
You are a mobile CRO reviewer. Judge only what I show you. What I'll give you: a screenshot of my product page as it looks on a phone before scrolling (the fold). Product + price + who it's for: [fill in] Do this: 1. Check the mobile fold for the 5 must-haves: (1) a clear product image, (2) product name, (3) price, (4) one primary call-to-action (Add to cart / Buy), (5) one trust element (star rating, review count, guarantee, or free-shipping line). 2. Flag common blockers pushing those below the fold: an oversized hero banner, a popup or cookie wall on load, an announcement bar eating vertical space, or a slow Largest Contentful Paint. 3. For each missing must-have, say exactly what to move up and what to cut. Judge only from the screenshot; if you cannot see it clearly, ask me to resend, do not assume it's there. Output: a 5-item checklist marked pass/fail + a short fix list ordered by impact.
Or do it in 4 steps
- List the five must-haves. On the phone fold a shopper needs: product image, name, price, one primary CTA, and one trust signal. If any of the five is missing before the first scroll, you're losing buyers who never see it.
- Do the self-audit on a real phone. Open your page on your own phone (or Chrome DevTools device mode), don't scroll, and screenshot exactly what shows. Then tick the five. Seeing it at true phone size is the whole test; a desktop preview lies about how little fits.
- Clear the blockers stealing the fold. The usual culprits: a giant hero image that pushes the CTA down, a popup or cookie wall covering everything on load, a fat announcement bar, and slow LCP so the image hasn't even painted at second three. Shrink the hero, delay the popup, thin the bar.
- Move the must-haves up, cut the rest. Anything not in the five earns its place below the fold. Price and the Add-to-cart button especially should never require a scroll.
Worked example (labeled): a skincare page opens with a full-screen lifestyle banner and an email popup. On a phone at second three you see only banner and popup. No name, no price, no Add to cart, no rating.
Fix: the image shrinks to the top third, so name, price, "Add to cart", and "4.8 (2,300 reviews)" all land in the first screen. The popup is delayed to 15 seconds or exit-intent. Same page, but now it answers the three questions before a swipe. Numbers are illustrative.
If price, the CTA, and a trust signal aren't on the phone before the first scroll, that's usually the highest-ROI fix on your page.
Do
- ✓Make the phone fold carry all five must-haves: product image, name, price, one primary CTA, and one trust element.
- ✓Do the self-audit on a real phone (or Chrome DevTools device mode), don't scroll, and screenshot exactly what shows before ticking the five.
- ✓Keep price and the Add-to-cart button in the first screen, they should never require a scroll.
- ✓Let AI grade a screenshot against the checklist, but move the layout yourself.
Avoid
- ✕Don't let an oversized hero banner push the price and CTA below the fold.
- ✕Don't fire a popup or cookie wall on load that covers everything at second three.
- ✕Don't trust a desktop preview, it lies about how little actually fits on a phone.
- ✕Don't let a slow Largest Contentful Paint leave the image unpainted before the buyer has decided.
Quick tips
- Shrink the hero, delay the popup to 15 seconds or exit-intent, and thin the announcement bar to reclaim the fold.
- If price, the CTA, and a trust signal aren't on the phone before the first scroll, that's usually the highest-ROI fix on the page.
- Give AI a true phone-size screenshot plus your product and price so it returns a pass/fail on the five and a fix list ordered by impact.
Brand in focus
ASOS — a mobile product page that answers the fold in one screen
ASOS.com
ASOS fits because its mobile product pages are built fold-first: on a phone before any scroll you get the product image, name, price, and the buy action together, exactly the three-second answer this note demands. What it did well was treat the phone as the primary screen, not a shrunk-down desktop. The watch-out is that ASOS has a large mobile UX team and heavy testing behind those choices, so a small store should copy the discipline (audit on a real phone, protect the fold) rather than assume its own template already does this.