Above-the-Fold UX
Above-the-fold UX is the discipline of deciding what earns space in the first viewport on landing pages and product pages — every element competes for attention against the primary conversion goal.
Above-the-Fold UX
The design discipline of choosing what belongs in the first viewport so every element earns its place against the primary conversion goal.
Above-the-fold UX governs everything a visitor sees on a landing page or product page before they scroll. On a 14-inch laptop that's roughly the top 700 pixels; on an iPhone in portrait, closer to 650. That window is the most valuable real estate on your site — every visitor sees it, and roughly half never scroll past it.
Good above-the-fold UX treats that space as a budget, not a canvas. The hero image, headline, price, primary CTA, social proof and trust signals all compete for attention, and weak elements push the strong ones below the fold. The discipline is ruthless prioritisation: if a block doesn't move the visitor closer to add-to-cart or lead capture, it belongs lower on the page.
The fold isn't a fixed line — it's a distribution. A Shopify store sees visitors across iPhones, Android mid-range devices, tablets, laptops and the occasional 27-inch monitor. The practical rule: design for the median mobile viewport (around 390×650) and let larger screens get a bonus second element. If your CTA only fits above the fold on desktop, you've designed for the wrong half of your traffic.
Above-the-fold UX is one of the highest-leverage decisions inside broader landing page optimization. A weak hero section caps the ceiling for every downstream test — you can A/B test pricing tables and FAQ ordering for months, but if 48% of mobile visitors bounce before scrolling, the page never reaches its potential.
Fold Attention Score = (Visible CTA Weight × 0.4) + (Headline Clarity × 0.3) + (Visual Hierarchy × 0.2) + (Trust Signal Density × 0.1)
Visible CTA Weight
CTA prominence
0-10 score for whether the primary action is visible, sized correctly, and contrast-distinct
Headline Clarity
Headline clarity
0-10 score for whether the headline communicates the offer in under 5 seconds
Visual Hierarchy
Visual hierarchy
0-10 score for whether the eye is guided to the CTA via size, contrast, and whitespace
Trust Signal Density
Trust signal density
0-10 score for visible reviews, ratings, guarantees, or recognisable logos
A mid-range apparel brand on Shopify auditing its PDP fold on mobile. The Add-to-Cart button is visible but low-contrast (6), the headline names the product but not the benefit (5), hierarchy leads the eye to the image instead of price (4), and one 4.8-star rating sits below the price (7).
Visible CTA Weight: 6
Headline Clarity: 5
Visual Hierarchy: 4
Trust Signal Density: 7
→ 5.4
A score of 5.4 sits in the 'needs work' band — fixable in one sprint. Lifting CTA contrast and rewriting the headline as a benefit statement would push this above 7.0, which typically correlates with a 8-15% lift in PDP conversion rate.
Score interpretation: under 5.0 means the fold is actively losing conversions; 5.0-7.0 is the common middle where most stores live; 7.0-8.5 is competitive; above 8.5 is best-in-class. The score isn't a verdict — it's a diagnostic that tells you which lever to pull next.
Typical above-the-fold composition by store type (mobile, 390×650 viewport)
| Store type | Hero image height | Headline lines | CTA visible? | Trust signals shown |
|---|---|---|---|---|
| Apparel PDP | 55-65% | 1-2 | Sometimes | 1 (review stars) |
| Beauty PDP | 45-55% | 2 | Usually | 2 (rating + badge) |
| Electronics PDP | 40-50% | 1 | Usually | 2-3 (rating, warranty, stock) |
| Home goods PDP | 50-60% | 1-2 | Sometimes | 1-2 (rating, free shipping) |
| Lead-gen landing page | 30-40% | 2-3 | Always | 3+ (logos, count, guarantee) |
Notice the pattern: categories with higher consideration (electronics, lead-gen) compress the hero image and load the fold with trust signals, because the buyer's blocker is risk. Apparel and home goods give image more room because the buyer's blocker is desire. Match your fold composition to the dominant friction in your category, not to whatever your theme ships with.
Above-the-Fold UX FAQ
Yes. Heatmap data still shows 40-55% of mobile visitors never scroll past the first viewport on PDPs, and engagement decays sharply with each scroll. Scrolling is common, but the fold disproportionately drives the decision to keep scrolling at all.
Plan for roughly 650px on a median mobile portrait viewport (iPhone 14, Pixel 7), 800px on tablet, and 700-900px on laptop depending on browser chrome. Design for the smallest viewport that represents at least 25% of your traffic and let larger screens reveal a second row.
On product pages, yes — visible primary CTA correlates strongly with PDP conversion rate. On long-form landing pages with high consideration (e.g. mattresses, supplements with multi-step claims), a sticky CTA bar that appears on scroll often outperforms a hardcoded above-the-fold button.
Putting a generic lifestyle hero image at full viewport height with the headline overlaid in low-contrast text. It looks like an editorial campaign and converts like one. Compress the image, surface the price and CTA, and let the eye land on the action.
Often, yes. Autoplay video pushes the CTA below the fold, slows Largest Contentful Paint, and competes with the headline for attention. If you need video, use a short loop under 3 seconds with a poster frame that works as a static image.
It's the highest-leverage sub-discipline. Landing page optimization includes copy, offer, social proof and form design — but the fold determines whether visitors stay long enough for any of that to matter. Fix the fold before you A/B test anything below it.
Keep the H1 and primary keyword in the headline regardless of variant. Run A/B tests server-side or with a flicker-free client snippet so Google's mobile crawler sees the control content. Avoid hiding meaningful content behind 'read more' toggles.
On dedicated landing pages, hide or simplify the nav — every link is an exit. On PDPs and category pages, keep nav present but visually subdued so it doesn't compete with the CTA. A 'distraction-free' PDP usually underperforms because shoppers want to browse adjacent SKUs.
With reasonable traffic (5,000+ sessions per variant per week), most fold tests reach significance in 10-21 days. Lifts of 5-15% on PDP conversion rate are common; lifts above 20% usually indicate the original fold was actively broken.
Scroll-depth heatmaps show where visitors stop, session recordings show what they tried to interact with, and a fold-budget audit (like the formula above) gives you a structured score. Pair quantitative drop-off data with qualitative recordings to find the specific element that's costing you the click.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.