What to change on a product page after reading a heatmap
Short answer
Start with the first screen: the price, the main photo and the add-to-cart button should all sit there, because most phone visitors never get much further. Then link what shoppers tap, move proof up, trim the menu and repeat the button at the end. Change one thing at a time.
A real heatmap, read step by step
This heatmap pools every page type, because product pages alone don't yet clear our 20-site rule. The lesson holds: 35% of phone taps happen on the first screen.
- 1
35% of taps land on the first screen
- 2
51% land in the top quarter of the page
- 3
Only 30% land in the middle half
- 4
19% land at the end, where scrollers look for the offer
Two weeks of phone visits on about 130 live Replo sites: over 800,000 taps and over 850,000 page views. Each site counts once, no figure rests on fewer than 20 sites, and no store is shown.
| How far phone visitors get on the typical site | Share |
|---|---|
| Past the first fifth of the page | 47% |
| Halfway down | 28% |
| The end of the page | 9% |
| Visits that bought: average depth | 50% of the page |
| Visits that didn't buy: average depth | 33% of the page |
Five changes, top to bottom
Put price, photo and button on the first screen
Only 47% of phone visits get past the first fifth of a page. Whatever sells the product has to be up top.
Make the photos open
Product photos draw taps. If they don't zoom or swipe, those taps are dead ends.
Move one piece of proof up
Reviews usually sit low, where few reach them. A star rating or one quote near the price does the work earlier.
Trim the menu on ad traffic
8% of phone taps hit the header and menu. On a page built for one product, those taps lead away.
Repeat the button at the end
19% of phone taps land in the last quarter of the page, more than in either middle quarter. Shoppers who read everything want the button there.
What a product page heatmap usually shows
| You see | It usually means | Try |
|---|---|---|
| Taps on size or color labels | The options aren't clear buttons | Show each option as a tappable button |
| Heat on the shipping line | Delivery is a question | State delivery time near the price |
| Cold add-to-cart | It sits below the first screen | Move it up, or add a sticky button |
| Heat on the reviews tab | Proof matters to the decision | Show a rating near the title |
| Scroll stops at the description | A wall of text | Break it into short benefit lines |
See your own heatmap
Every page Replo publishes collects clicks, scroll and revenue per element, with nothing to install. Open a page, pick the last 7, 30 or 90 days, and click any element to see what it led to.
Frequently asked questions
- What should be on the first screen of a product page?
- The product photo, the name, the price and the add-to-cart button. On phones most visitors don't scroll far, so anything that decides the sale belongs where everyone sees it.
- Should the add-to-cart button be sticky on mobile?
- Often, yes. A sticky button keeps the next step in reach as people scroll. Test it against your current page, because on some pages it covers content shoppers want to see.
- Why does the end of my product page get so many taps?
- Visitors who read to the end are often deciding to buy, and they look for the button there. If it's missing, they scroll back up or leave. Repeat the offer and the button at the end.
- How do I know a product page change worked?
- Compare the page's heatmap and sales before and after, or run an A/B test so both versions run at once. On pages Replo publishes, each version gets its own heatmap. See A/B testing.
More heatmap guides
All heatmap guidesHeatmaps
Read a heatmap
Six steps, worked through on a real heatmap from about 130 sites.
Heatmaps
Use a scroll map
Find where visitors stop, and what to move above it.
Heatmaps
Use a click map
See what gets tapped, from buttons to plain text.
Heatmaps
Spot rage and dead clicks
Find repeated taps and taps on things that aren't links.
