Above the fold

Online, the principle has stayed the same; only the fold is now the lower edge of the browser window. Whatever sits above it decides in fractions of a second whether someone stays or clicks away.

The flip side is logically called below the fold: everything that only appears after scrolling. For a long time the iron rule was that everything important had to go to the top because nobody looked further down anyway. Today that rule is only half true. But the upper edge of the screen is and remains the most expensive square centimetre of your website.

Why the visible area decides on conversion

Visitors judge quickly. Very quickly. Studies on the first perception of websites show that the first impression forms within milliseconds, long before anyone has consciously read what the page is about. At that moment only the above-the-fold area is in play. It carries the full weight of the question: am I in the right place?

This has a hard economic consequence. Anyone who wastes the visible area, with a huge stock photo that says nothing, a cookie banner that eats half the page or a headline that promises nothing, loses visitors whose click they have paid for. In e-commerce this is doubly expensive: the traffic costs money (through ads, SEO effort, newsletters), and the bounce rate rises exactly at the point where the journey is actually just beginning.

A second function is often overlooked: the above-the-fold area sets expectations. What the user sees at the top shapes whether they scroll at all. If the first impression is strong and arouses curiosity, the threshold for reading on drops. If it seems arbitrary, the page has already been mentally ticked off, even if the best information is further down.

The end of the single fold line

There used to be an approximate pixel limit, around 600 pixels in height on the monitors common at the time. That one line no longer exists. Today the fold lies somewhere different on every device:

• On a desktop monitor with 1920×1080, the fold sits low, often only at around 900 visible pixels in height.
• On a laptop with a lower resolution, considerably higher.
• On a smartphone held upright, the visible area is narrow and tall, and additionally cut down by the browser bar and address line.
• In landscape format, everything shifts again.

Because mobile traffic in German e-commerce regularly accounts for more than half of all sessions, the mobile fold is the more important reference point today. What still just sits at the top on the desktop slips below the edge on a phone. This makes the old "put everything at the top" practically impossible: on a narrow portrait display, not everything fits above the fold. You have to prioritise.

What belongs above the fold

Instead of a rigid pixel rule, a content rule applies today: above the fold has to make clear where users are, what they get here and what they can do next. In concrete terms this almost always means four elements.

The order is not dogma. A product detail page prioritises the product image, price and buy button; a category page the first product tiles; a campaign landing page the headline and the one decisive CTA. The common denominator: no wasted space and no mandatory elements that only get in the way.

The myth of the dead area below the fold

For a long time the belief persisted that hardly anyone scrolls. That has been disproved. Scrolling is a natural, learned gesture today, not least because mobile devices work almost entirely by scrolling. Scroll-tracking analyses regularly show that a large proportion of users do scroll down, provided the upper area gives them a reason to. That is exactly the point: below the fold is not dead, but it has to be earned. The fold is not a graveyard, it is a threshold.

This leads to a productive reversal: you do not have to squeeze everything into the top. You have to create enough tension at the top for the scroll to happen. An overloaded above-the-fold zone that shouts ten messages at once is often weaker than a focused one that says one thing clearly and makes people want more.

An example: the home page of a Shopware shop

A Shopware shop for coffee equipment had a generous slider banner at the top with changing lifestyle photos and only the product categories below it. On a smartphone this meant: the fold in the middle of the banner, not a single product, no category and no incentive to buy in sight. The mobile bounce rate on the home page was high.

The team rebuilt it. Above the fold there is now a concrete headline ("Freshly roasted coffee, delivered every two weeks"), directly below it two clear buttons ("Start subscription" and "One-off purchase") and a single, calm product image instead of the rotating slider. The lifestyle images moved down, where they still work as a mood element but no longer block the entry. The result after several weeks: a noticeably lower mobile bounce rate and more clicks to the category level. No magic, just taking the fold seriously.

Common mistakes

• Cookie and consent banners that cover half the screen. Legally necessary, but often far too large in design. Keeping the banner compact gives the content its space back.
• Huge hero images without a message. A beautiful photo that answers no question is a waste of space in the most expensive area of the page.
• Autoplay sliders. Changing banners confuse more than they help, and users rarely catch the message that would be relevant to them.
• Slow loading of the visible area. Whatever is at the top has to be there first and fast. This is exactly what Google measures with Largest Contentful Paint, one of the Core Web Vitals; details can be found in the official documentation on web.dev on Largest Contentful Paint.
• Testing only on the desktop. Anyone who only checks the fold on a large monitor overlooks the fact that the majority see the opposite.

Above the fold in Shopware page building

Anyone designing a Shopware shop with Shopping Experiences effectively decides on the fold for every page, even though the tool does not use the term. Every section you drag to the top of the page layout competes for the visible area. A few concrete consequences for day-to-day work in the page builder:

• The first section carries the main load. Whatever is in the top row of blocks is seen by everyone. Reserve it for the message and the action, not for decoration.
• Set image heights deliberately. A full-screen hero element on the desktop can mean that nothing else fits above the fold on a smartphone. Check the mobile preview, not just the desktop view.
• Use sticky elements sparingly. A fixed bar permanently eats visible space. On small displays, a combination of a sticky header and a cookie banner can push the content out almost completely.
• Mind the loading order. Images in the visible area should not be delayed by lazy loading; otherwise the user sees an empty area at the decisive moment.

Above the fold and SEO

The visible area is not only a conversion topic; it also touches on search engine optimisation. Google takes the user experience into account, and an above-the-fold area cluttered with advertising or intrusive interstitials can have a negative effect on rankings. At the same time, the loading time of the visible area feeds directly into the assessment via Largest Contentful Paint. In short: a fast, clean, clearly worded upper area pays off twice, for conversion and for visibility.

There is, however, a limit that should not be overstretched. "Important keywords must be above the fold" is, in this strict form, a stubborn SEO myth. Google reads the whole page, not just the upper area. Anyone who stuffs the visible area with text just so that a keyword appears early sacrifices its actual function, quick orientation, for an imagined ranking effect. The visible area belongs to clarity, not to keyword density.

The visible area on different page types

There is no single correct above-the-fold layout. What has to be at the top depends on the page type and the visitor's intention. A few typical cases from everyday shop life:

• Home page: orientation and entry. Visitors often do not yet know the range. What counts here is a clear statement about the offer plus a way into the most important categories, not a jumble of every message at once.
• Category page: show products. Anyone landing on a category page wants to see a selection. The first product tiles and the filter options belong above the fold, not a large category banner image that pushes the goods down.
• Product detail page: enable the decision. Product image, price, availability and the buy button are the stars. Long product descriptions can follow below.
• Campaign landing page: one goal, one path. Here the fold is at its most unforgiving: a strong headline, a value proposition, a CTA. Anything that distracts does harm.

The common logic: for every page type, ask in what state of mind the visitor arrives, and give them exactly what serves that state at the top. A product page that starts with the brand story at the top instead of showing the product misses the expectation, however beautiful the brand story is.

A pragmatic test routine

Instead of philosophising about the "right" fold, a simple routine before every page launch is worthwhile. Open the page on a typical smartphone (not just in the desktop browser with a reduced window, which is deceptive). Look at the screen for three seconds without scrolling and answer three questions: do I understand where I am? Do I understand what I get here? Can I see what I can do next? If even one answer is "no", the visible area has failed in its task. These three seconds often save expensive discussions.

All in all, above the fold is not a pixel value to tick off but a discipline of prioritisation. The question is not "What else fits at the top?" but "What does an unfamiliar visitor have to understand in the first second in order to stay?". Answer it honestly, test it across the mobile fold, and the most expensive square centimetre of your website starts to justify its price.