Home/Above-the-Fold Design

Above-the-Fold Design:
Win the First 3 Seconds

The first viewport is the most critical real estate on your product page. Learn exactly what to place there — and how to design each element for maximum conversion impact.

⬆️ Critical Zone
⏱ 10 min read
📈 Avg. +55% CTR on CTA
Interactive Breakdown

The Anatomy of a High-Converting Above-the-Fold Section

Every element shown below has a specific CRO purpose. Hover over the annotations to understand why each element is placed exactly where it is.

yourstore.com/products/premium-item
Product Hero Image Area
✦ Hero image — full bleed
✦ Zoom on hover
← Trust badge
⭐ Top Seller
✓ Verified
← Benefit headline

Premium Ergonomic Chair — Built for 8-Hour Focus

★★★★★ 4.9 (2,847 reviews)
← Clear price
$329 USD
✓ Free shipping · Ships in 2–3 days
← Primary CTA
🔒 Secure checkout ↩ 30-day returns

↑ All elements above the fold line. Everything a visitor needs to make a purchase decision is visible without scrolling.

Element Breakdown

6 Critical Above-the-Fold Elements

Each of these elements must be present and correctly designed. Missing or poorly executed elements directly reduce conversion rate.

01 — Image

Hero Product Image

High-resolution, white or lifestyle background, multiple angles accessible via thumbnail. The image must instantly communicate what the product is and who it's for.

Minimum: 800×800px
02 — Headline

Benefit-Led Product Title

Not just the product name — a title that answers "what does this do for me?" Lead with the primary benefit. Keep it under 12 words. Use sentence case for readability.

Max 12 words · H1 tag
03 — Social Proof

Star Rating + Review Count

Display the aggregate rating and total review count immediately below the title. Clickable — scrolls to the full review section. Minimum 50 reviews to display credibly.

Essential trust trigger
04 — Price

Transparent Pricing Display

Large, clear, immediately visible. Show original price + sale price if applicable. Include the currency. Never hide price or make users calculate it. Clarity = trust.

Most-scanned element
05 — CTA Button

Primary Call-to-Action

The single most important element on the page. High contrast, large (min 48px height), action-oriented copy. "Add to Cart" beats "Buy Now" for consideration purchases.

Highest visual weight
06 — Micro-Trust

Shipping + Returns Assurance

Brief, scannable reassurances: "Free shipping over $50 · 30-day returns · Secure checkout." These lines remove the last pre-purchase anxieties before committing.

Anxiety eliminator
CTA Design

Designing the Perfect Buy Button

The CTA button is responsible for the entire conversion. Every design decision — colour, size, copy, placement — directly impacts your revenue. Here's what the data says.

✓ DO

Full width · High contrast green · Action verb · Arrow → urgency signal · 48px+ height

✗ AVOID

Low contrast · Lowercase · Passive language · Two competing CTAs create decision paralysis

Pricing Table Design

CTA Copy Testing Results

"Add to Cart"+0% (control)
"Get Yours Now"+12%
"Shop Now"-8%
"Buy Now"-3%
Impact Data

Why Above-the-Fold Optimisation Matters

55%
of conversions happen within the first viewport without scrolling
3s
Average time before a visitor decides to stay or leave your page
+47%
Conversion lift from above-fold CTA vs. below-fold placement
38%
Visitors who scroll past the fold on a well-designed product page

Next: Build Trust Elements That Convert Hesitant Buyers

You've mastered the fold — now learn how to design trust signals that eliminate purchase anxiety and validate the buying decision.

Explore Trust Elements →
✅Nice catch!