Move Add to Cart above the fold
If the buy action isn't visible without scrolling, you're adding friction to every sale.
In short
- Shoppers judge the page in ~50ms. If the buy action isn't in the first viewport, you're spending that window on a scavenger hunt.
- About 57% of viewing time happens above the fold (NN/g); attention drops off a cliff below it.
- Mobile is ~70% of traffic but converts at 2.0% vs 3.4% on desktop, so a buried button costs the most exactly where most people shop.
Add to Cart only appears after a full screen of scrolling.
Illustrative. Real lift is measured on your traffic first.
A shopper decides whether your page is worth their time in about 50 milliseconds, before they've read a word, before they've found a price. If the buy action isn't in that first eyeful, you're spending those milliseconds making them hunt instead of making them want it. The fold isn't a vanity line; it's where roughly 57% of total viewing time actually happens, per NN/g eye-tracking.
What's the problem?
On some templates your Add to Cart button sits below the fold, so shoppers have to scroll to even find how to buy, and on mobile it's worse.
Why does this happen?
- Large hero images push the buy area below the first viewport.
- Variant pickers and long titles consume above-the-fold space.
- Mobile layouts stack content so Add to Cart lands far down.
- Thumb reach, not just visibility. Even when the button is technically on-screen, on a tall phone the natural thumb-rest zone is the bottom third. A button stranded mid-viewport under a fold of variant copy gets seen bu…
- The price-then-button sequence breaks. Shoppers want price, then proof (rating), then the buy action, in that order and in one glance. When a big hero shoves price down and the rating sits in a separate block, people sc…
- Slow-loading hero media delays the fold entirely. A heavy above-the-fold image or autoplay video means the buy area renders late on mobile data, and the visible part of the screen during those first seconds is a spinner…
- Sticky bars get dismissed or ignored. Teams 'solve' a below-fold button by bolting on a sticky add-to-cart, but a persistent bar competes with the OS gesture area and reads as an ad to repeat visitors. It's a patch, no…
What does the research show?
Independent researchFigures below are from independent studies, not StorePilot data. They're why this problem is worth testing on your own store.
-
Users form a visual first impression of a page in about 50 milliseconds, and those snap judgments hold up under longer exposure, so what's in the first viewport sets the tone before anyone scrolls.
Lindgaard et al., Behaviour & Information Technology (peer-reviewed) ↗ -
Eye-tracking shows people spend about 57% of their total viewing time above the fold, with attention falling off sharply below it.
Nielsen Norman Group (NN/g), Scrolling and Attention ↗ -
Mobile carries roughly 70% of site traffic yet converts at just 2.0% versus 3.4% on desktop, the device where a buried buy button does the most damage.
Contentsquare 2026 Digital Experience Benchmark ↗ -
Mobile ecommerce UX is broadly weak: across 138 benchmarked major mobile sites, 62% scored 'mediocre' or worse and 0% earned a 'good' overall rating.
Baymard Institute, Mobile E-Commerce Usability research ↗ -
53% of mobile visits are abandoned if a page takes longer than three seconds to load, and a heavy above-the-fold hero is often what pushes the buy area past that line.
Google / SOASTA Research, via Marketing Dive ↗
How does StorePilot AI fix it?
- StorePilot detects when shoppers must scroll before any add-to-cart interaction and flags it.
- It tests a tightened above-the-fold layout that keeps price, key proof, and Add to Cart visible.
- It measures the conversion impact by device so the fix fits where the problem is.
How do you fix it, step by step?
-
Measure the real fold on a small phone
Open your PDP on a 6.1-inch device (or DevTools at 375x667) and screenshot the first viewport with no scroll. If price, a rating, and Add to Cart aren't all in that shot, you have the problem. Note exactly how many pixels of scroll the button sits below the cut.
-
Shrink the hero, don't delete it
Cap the lead product image at roughly 45–55% of the mobile viewport height instead of letting it run full-bleed. You keep a strong visual but reclaim the vertical space the buy block needs.
-
Collapse the variant and title block
Trim a multi-line title, move long descriptions and shipping copy below the buy zone, and render variant pickers as compact swatches or a single dropdown so they cost one row, not four.
-
Stack price, rating, then Add to Cart in one group
Put the price, the star rating, and the button in a single tight cluster (price first, proof second, action third) so the whole purchase decision is answerable without a scroll.
-
Defer heavy media so the buy area paints first
Lazy-load gallery images past the first, drop autoplay video above the fold, and make sure the price and button aren't waiting on a 2MB hero. The buy zone should render in the first second on mobile data.
-
A/B test it, watch add-to-cart rate, not just clicks
Run the compressed layout against the current one and measure mobile add-to-cart rate and progression to checkout. Don't call it on a day-one bump; let it reach real traffic before you publish the winner.
An illustrative example
Demo data- What StorePilot detects
- On mobile, the Add to Cart button only appears after a full screen of scrolling.
- The fix it builds & tests
- Compress the above-the-fold layout so price, rating, and Add to Cart are visible without scrolling.
- The projected outcome
- Example projection: faster, higher add-to-cart on mobile. (Illustrative demo figure.)
Key takeaways
- Shoppers judge the page in ~50ms. If the buy action isn't in the first viewport, you're spending that window on a scavenger hunt.
- About 57% of viewing time happens above the fold (NN/g); attention drops off a cliff below it.
- Mobile is ~70% of traffic but converts at 2.0% vs 3.4% on desktop, so a buried button costs the most exactly where most people shop.
- Price, rating, Add to Cart in one tight cluster beats a giant hero every time on a 6-inch screen.
This guide is part of the StorePilot product pages playbook. If this is costing you sales, look at Add a sticky Add to Cart on mobile and Eliminate mobile tap errors that frustrate buyers next.
