Above the Fold

What is Above the Fold?

Above the fold is the part of a page visible in the browser window before the user scrolls. The term comes from print newspapers, where the top half of the front page was visible on the newsstand. On the web there is no fixed “fold”: the boundary depends on the visitor’s screen size, device, and browser window, so what is visible on desktop may require scrolling on mobile.

Why does Above the Fold matter?

This is where you have a few seconds to show what you sell and what the next step is. Eye-tracking studies from the Nielsen Norman Group show that users spend the large majority of their attention above the fold, even though they do scroll. A clear value proposition and a visible CTA above the fold is therefore a classic lever for conversion rate in an online store.

Common use cases

• Homepage hero. Show your key message, offer, or category without scrolling on both mobile and desktop.
• Product page. Make sure price, “Add to cart,” and the product image are visible immediately.
• Campaign pages. Place the offer and CTA above the fold so ad traffic doesn’t have to hunt for the action.
• Core Web Vitals. The largest element above the fold is often the LCP element, so a heavy hero image can slow your LCP.

Shopify perspective

In Shopify, the above-the-fold area is controlled by the theme’s sections and blocks in the theme editor. A common mistake is lazy-loading the hero image: when it is the LCP candidate, that delays loading and hurts Core Web Vitals. Instead set loading="eager" (or fetchpriority="high") on the hero image and keep the top section light. Always test on a real phone — not just desktop — since the fold sits much higher on small screens.