Above the Fold refers to the area of a website that a visitor sees immediately - without scrolling. The term originates from newspaper printing: "above the fold" was the upper half of the folded daily newspaper, which was visible at the newsstand and decided whether to buy or not. The principle remains the same online, only the fold is now the bottom edge of the browser window. What lies above it decides in a fraction of a second whether someone stays or clicks away.
The flipside 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 be at the top because nobody would look at the bottom anyway. Today, this rule is only half true. But the top edge of the screen is and remains the most expensive square centimetre of your website.
Why the visible area determines conversion
Visitors make quick judgements. Very quickly. Studies on the first perception of websites show that the first impression is formed in milliseconds - long before someone has consciously read what the website is about. At this moment, only the above-the-fold area is in play. It bears the full weight of the question: Am I in the right place?
There is a tough economic consequence attached to this. If you give away the visible area - with a huge stock photo with no message, a cookie banner that eats up half the page or a headline that promises nothing - you lose visitors whose click you have paid for. In e-commerce, this is doubly expensive: the traffic costs (via ads, SEO effort, newsletters) and the bounce rate increases right at the point where the journey actually begins.
A second function is often overlooked: The above-the-fold area sets the expectation. What the user sees at the top determines whether they scroll at all. If the first impression is strong and arouses curiosity, the inhibition threshold to continue reading is lowered. If it seems arbitrary, the page is already mentally ticked off, even if the best information is further down.
The end of the one fold line
In the past, there was an approximate pixel limit, around 600 pixels high for the monitors commonly used at the time. This one line no longer exists. Today, the fold line is different for every device:
- On a desktop monitor with 1920×1080, the fold is deep, often only at 900 visible pixels in height.
- Significantly higher on a notebook with a lower resolution
- On a smartphone in portrait mode, the visible area is narrow and high - and additionally cropped by the browser bar and address bar.
- 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 now the more important point of reference. What sits just above the top on the desktop slips under the edge on the mobile phone. This makes the old "pack everything on top" practically impossible: not everything fits over the fold on a narrow portrait display. You have to prioritise.
What belongs above the fold
Instead of a rigid pixel rule, a content rule applies today: Above the fold must clarify where the user is, what they can get here and what they can do next. In concrete terms, this almost always means four elements
.| Element | Function in the visible area |
|---|---|
| Expressive headline | Answers in one sentence what the page is about and what benefits it offers |
| Clear call to action | Makes it clear what the next step is (buy, enquire, read on) |
| Relevant mission statement or product visual | Supports the statement visually instead of just filling space |
| Orientation / navigation | Shows that the user is in the right place and can move around |
The order is not a dogma. A product detail page prioritises the product image, price and buy button; a category page prioritises the first product tiles; a campaign landing page prioritises the headline and the one crucial CTA. The common denominator: no wasted space, no mandatory elements that only get in the way.
The myth of the dead below-the-fold
For a long time, people believed that hardly anyone scrolled. This has been disproved. Today, scrolling is a natural, trained gesture - not least because mobile devices work almost exclusively by scrolling. Analyses of scroll tracking regularly show that a large proportion of users do scroll down if the upper area gives them a reason to do so. This is exactly the point: Below the Fold is not dead, but it is deserved. The fold is not a graveyard, it is a threshold.
From this follows a productive reversal: you don't have to squeeze everything in at the top. You need to create enough tension at the top for the scroll to happen. A cluttered above-the-fold zone that shouts ten messages at once is often weaker than a focussed one that says one thing clearly and makes you want more.
An example: Home page of a Shopware shop
A Shopware shop for coffee equipment had a large slider banner at the top with changing lifestyle photos, followed by the product categories. On the smartphone, this meant: folding in the middle of the banner, not a single product, no category, no incentive to buy visible. The mobile bounce rate on the homepage was high.
The team rebuilt. There is now a specific headline above the fold ("Freshly roasted coffee, delivered every fortnight"), two clear buttons directly below ("Start subscription" and "Single purchase") and a single, calm product image instead of the rotating slider. The lifestyle images were moved to the bottom, where they continue to act as a mood element but no longer block the entry point. The result after several weeks: a noticeably lower mobile bounce rate and more clicks on the category level. No magic - just taking the fold seriously.
Typical errors
- Cookie and content banners that cover half the screen Legally necessary, but often far too large in terms of design. Keeping the banner compact gives the content its space back. Huge hero images without a message A beautiful photo that doesn't answer a question is a waste of space in the most expensive area of the page.
- Autoplay slider Changing banners confuse more than they help, and the user rarely catches the message that would be relevant to them.
- Slow loading of the visible area What is at the top must be there first and quickly. This is exactly what Google measures with the Largest Contentful Paint, one of the Core Web Vitals; details can be found in the official documentation on web.dev for the Largest Contentful Paint.
- Test the desktop only. If you only check the folding on the large monitor, you will overlook the fact that the majority will see the opposite.
Above the Fold in Shopware page building
Whoever designs a Shopware shop using Shopping Experiences effectively decides on the fold for every page - even if the tool does not use the term. Every section that you drag to the top of the page structure competes for the visible area. A few concrete consequences for daily work in the page builder:
- The first section carries the main load. Everyone can see what is in the top row of blocks. Reserve it for message and action, not decoration.
- Set image heights deliberately. A screen-filling hero element on the desktop can mean that nothing else fits above the fold on the smartphone. Check the mobile preview, not just the desktop view. Use sticky elements sparingly. A fixed bar permanently eats up visible space. On small displays, a combination of sticky header and cookie banner can almost completely displace the content.Note the loading sequence Images in the visible area should not be delayed by lazy loading, otherwise the user will see an empty area at the crucial moment.
Above the Fold and SEO
The visible area is not just a conversion issue, it also affects search engine optimisation. Google also evaluates the user experience, and an above-the-fold area that is cluttered with adverts or intrusive interstitials can have a negative impact on the ranking. At the same time, the loading time of the visible area flows directly into the evaluation via the Largest Contentful Paint. In short: a fast, clean, clear top section pays double dividends - in terms of conversion and visibility.
However, there is a limit that should not be overstretched. "Important keywords must be above the fold" is a persistent SEO myth in this strictness. Google reads the entire page, not just the top section. If you cram the visible area with text just so that a keyword appears early, you are sacrificing the actual function - quick orientation - for an imaginary ranking effect. The visible area belongs to clarity, not keyword density.
The visible area on different page types
There is no one correct above-the-fold structure. What should be at the top depends on the page type and the visitor's intention. A few typical cases from everyday shop life:
- Start page: Orientation and introduction. Visitors are often not yet familiar with the product range. What counts here is a clear statement about the range plus a path to the most important categories - not a hodgepodge of all messages at the same time. Category page: Show products. Anyone who lands 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 decision-making. Product image, price, availability and the buy button are the stars. Long product descriptions may follow below.
- Campaign landing page: one goal, one path. This is where the convolution is most relentless: a strong headline, a value proposition, a CTA. Anything that distracts is detrimental.
The common logic: for each page type, ask what mental state the visitor arrives in and give them exactly what serves that state at the top. A product page that starts with brand story at the top instead of showing the product misses the expectation - no matter how nice the brand story is.
A pragmatic test routine
Instead of philosophising about the "right" fold, it's worth following a simple routine before every page launch. Open the page on a typical smartphone (not just in a desktop browser with a minimised 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'm getting here? Do I see what I can do next? If even one answer is "no", the visible area has failed to do its job. These three seconds often save expensive discussions.
The bottom line is that Above the Fold is not a pixel value that you tick off, but a prioritisation discipline. The question is not "What else fits at the top?", but "What does a visitor need to understand in the first second so that they stay?". Answer it honestly, test it across the mobile fold, and the most expensive square centimetre of your website will start to justify its price.