Above the Fold: 12 ideas for better conversions (+ amazing examples)

Above the fold is ideal to gain your visitor’s attention and engage them.
If they are intrigued, then they'll explore more on your store.
In this blog post, we'll cover:
‘Above the fold’ is the part of the webspage that a shopper sees before scrolling down.
Here is an image of the above the fold page of Calvin Klein.
The page is separated a fold as shown in the image below.
And as we scroll, this is an image that appears separated by a fold.
Now, you know that the fold works as a UX guide to ensure your above the fold content drives users to engage with the content below.
Here are a few content optimization best practices to help you make the best use of your visitor’s time on your website:
When it comes to above the fold content, it’s important to reserve the space only for vital, high-priority information.
Each element should serve an important purpose that relates to or finds closure further down on the home page.
Here are the above the fold content elements that you should prioritize:
Check out Chipotle’s above the fold design on it's homepage.
It has neatly laid out all the essential elements above the fold without making the layout or design look cluttered.
So, a visitor scrolls to your website. You’ve already designated fixed attention-grabbing elements for your top fold.
All they have to do is land on your page and engage.
8 seconds is all you get to woo them with your web page. Make it count.
Do read up: 28 Inspiring eCommerce Homepage Examples (not your usual brands)
When your page hits the Google featured snippet, it’s effectively hit gold.
This piece is like the gold standard of search results — and is definitely something you should aim for.
This snippet is usually drawn from the best-performing pages: those that Google sees in a positive light for regularly sharing high-quality content.
There are a variety of different formats Google uses for these: paragraphs, listicles, bullet points, tables, videos, etc.
The above the fold website example mentioned below features a paragraph with images.
Want to see it for yourself? Check out Why is My Conversion Rate Dropping? And How to Fix It
To be considered for the Google featured snippet, your content should have three primary characteristics:
To do this, you should format the content well using bullet points, a table of contents, short copy, descriptive images, and CTAs that drive response.
You should also understand which words are more likely to be met with a featured snippet.
Here’s a quick list you can keep handy:
The truth is: visuals sell.
As people, we love pretty things.
And aesthetic images are a great way for brands to use this.
But you must prioritize speed and optimize images for an ideal experience.
Use large and heavy images with caution.
While they’ll attract the visitor’s attention, they may also affect your page load speed.
This is where your discretion comes in.
If you feel a high-quality image is crucial to building a story after compromising a few seconds, go for it.
If not, go for a solid background instead.
You’re sure to know that a mobile-first approach is crucial while designing sites and landing pages.
Don’t just stop there. Make sure the padding for above-the-fold content is customized for smaller screens.
Notice how the above the fold example from SkinnyTies is all optimized for the device screen it’s hosted on?
Further, pay close attention to the font as well. While a 22 px may work for desktop, you may need to resize it to 18 px for mobile.
The same goes for navigation bars. Check how they appear on smaller screens.
Make the options click-friendly.
The last thing you’d want is a well-designed website that cannot be clicked and hence used.
That’s why it’s important to check for finger taps.
Ensure the navigation, menus, and buttons are all accessible by both fingers as well as styluses.
We love how Amazon has not only absorbed responsive design into its website across devices but actually integrates it into the UX so that visitors on all devices can have a truly engaging experience.
Also read: eCommerce Mobile UX: 27 Ways to Get More Conversions
This ensures that every single customer is looked after and that they all can have a pleasant time shopping online.
And isn’t that what it’s all about?
Fun fact: 90% of those who read your headline also read your CTA.
It’s important to have a goal for your call to action (CTA). This is intrinsically tied to your broader marketing goals.
Coming back to this research, there are two types of goals you can assign for your CTA. One is reach maximization and the other is exposure time maximization.
If you want to reach out to more people, placing your CTA above the fold makes the most sense. If you want it to be visible to users for more time, place it below the fold.
This is a great example that shows one CTA (the more prominent one) above the fold and one (the less prominent one) below the fold. Do you see the difference in how these two would be perceived and hence used?
Placing it somewhere in between (600–1000 pixels) may offer the best of both worlds—higher reach and greater engagement.
We love how The Mountain builds into the CTA they have placed here.
From having all the information available at easy access on the top to leading into the CTA towards the midsection of the page, this is truly fantastic placement.
Create high-converting CTAs by telling people exactly what action to take. Here’s 21 ways to create call-to-action buttons that convert
For example, Start Building Your Order sounds more specific than Get Started.
Personalize them with pronouns such as you and I. Sprinkle the word free if you can.
Throw in a bit of urgency with words such as Today or 30-days.
Start with a goal. This will depend upon your sales funnel and in which stage of the funnel your customers are.
If they’re in the awareness stage, your heading should focus on problem identification.
If they’re in the purchase stage, your heading should focus on problem-solving.
We love what Away does here to introduce their AirPods Cleaning Kit
Once your copy convinces the visitor, they’ll look at taking the next step.
If your navigation is cluttered and stuffed with too many actions, it can be counteractive.
To keep decision fatigue at bay, keep the navigation items to a minimum of 5–7 items.
It's important to think about how a customer will shop on your website.
They only have so much time to make a purchasing decision, so if they're overwhelmed or distracted by your navigation, then they'll leave.
Ideally, you want to keep your navigation consistent throughout the website while still being user-friendly.
We love how NewBalance has developed its navigation to account for an intuitive menu as well as provide navigable sections across the homepage.
Want more? Check out 11 navigation changes (across the funnel) to improve conversions
Both for SEO and UX, your page load time should be minimum.
0 - 4 seconds, to be specific. The quicker it loads, the better your conversion rate.
What’s interesting is that this speed holds value not just for customer experience, but also from an SEO perspective.
Google shows a preference for those websites that load quickly and are not too heavy on the interface.
The sweet spot here is 3 seconds.
Quicker page load times also benefit CPC and other performance marketing campaigns.
In short, keep your speed in check. Here’s what happens when you don’t:
Think of your above the fold content as an interaction: the first look a customer has into your brand.
Would you rather have it be distinct and memorable or scattered and all over the place?
Exactly.
When you make this first interaction unique and on-brand, customers are more likely to be invested in what else you have to offer.
So, take away the extras. Focus on creating a singular yet distinct experience that doesn’t leave customers overwhelmed.
Remember, the idea is to put your most important content on the top fold, not all your content.
Mentioning product categories that are specific and not broad help users in finding what they’re looking for.
The Body Shop mentions specific product categories on their above the fold header.
See how the above the fold makes it clear on the different types of products offered.
When you click further it refines the product category further.
The drop down consists of By Product Type, By Concern, and Recommended.
What stands out is how ‘By Concern’ makes it easy for people looking for acne products, dry skin, and sensitive skin.
38% of customer journeys start on the retailer’s homepage.
For first-time customers to develop trust in you, having a sense of security is critical. Including a returns policy in your above the fold header inspires confidence and security in customers to make a purchase.
Plus, it has other benefits—improves conversion rates, increases repeat customers, and improves profitability.
BlackMilkClothing includes its return policy above the fold.
Thanks to high visibility, it addresses the customers’ objections, if any, and influences purchase decisions.
In fact, 67% of customers visit the returns page before making a purchase.
It rules out buyer’s remorse and reduces the sense of perceived risk encouraging customers to buy.
Your site has multiple elements but you would like your customers to click on something particular.
Enter visual cues—elements on the website that subtly draw the attention of users and help them interact with the site.
Incorporating visual cues in your above the fold design invokes heuristics—mental shortcuts that enable decision making and solving problems quickly.
It reduces the unnecessary load on the working memory and guides the users.
Dollar Shave Club has a visual cue in its above the fold website to subtly drive users to a CTA.
The image in this above the fold example features a person stealthily looking towards the side.
This is a suggestive cue—using images to draw the attention of your site visitors in a subtle manner without making it obvious.
It doesn’t get simpler than this. 2 sentences and this skincare brand hooks the customer by addressing their problem and offering a solution.
The best part: it walks the talk with an accompanying image right beside the text.
This gets the message across perfectly.
Now we remember having said not to upload heavy images or GIFs to load your site faster and avoid distractions.
On both counts, Frank Body performs.
Their site loads fast enough.
Also, their clean and subtle brand colors and web design help keep the focus on the content.
Frank Body prioritized personalized communication without losing out on UX aspects. This is a call you’ll have to take for your brand.
Some brands tell you what they do. The best brands show what they do.
Allbirds falls in the second category.
Yes, you don’t just see that they sell shoes, but you experience how wearing them can make you feel.
That’s the power of high-quality, contextual images.
They help communicate the intangible brand qualities where just a copy may fall short.
Remember how we mentioned that you’ve very little time to convince your customers to scroll?
You’ll need something attention-grabbing or valuable to hook your visitors.
Something like what Warby Parker has.
Their value proposition screams simplicity.
The visual right beside shows exactly what they’re talking about in the copy.
The subheading Take a quiz to find frames adds even more intrigue and offers an opportunity for visitors to interact with the brand.
Of course, the fact that it adds a layer of personalization goes without saying.
Hey, you'll love this: 20 best product page design examples in 2022 (+ expert advice)
Customers who have done a lot of online shopping know that nothing catches their attention like a simple website.
Like the one by Clarks.
Yes, it still retains the clunky sliders, although the personalization element makes it worthwhile.
But one look and you’ll be able to view everything without the need to process too much information.
Keeping the search and add to cart icons instead of texts, adding the sale communication at the top where it’s easily viewable, and adding separate links to the men’s and women’s range all add to the intuitive UX.
The breathtaking product pictures (including the ones portraying the product in use by the customer) add to the brand experience.
Most often, your website will be designed to attract both new as well as returning customers.
In that case, making your site design inclusive to target both audiences is important.
This is what Jackie Smith does.
They have multiple elements to encourage customers into exploring their range.
This is what the sections New arrivals, Dear collection, and Our community do in the header.
These are attractive enough for new customers and add extra value for existing customers.
The prominent Jackie Club widget is a great way to boost customer retention and loyalty.
If you want your customers to view your products without browsing, then carousels are for you.
Lenskart showcases its sunglass collections using a carousel in its above the fold page.
The captivating visuals make it more effective in capturing the users’ attention span.
Brands who produce animal free products often garner praise but how do you use it to drive customer attention?
Psst….. Add it to your above the fold content.
By displaying its brand value of producing 100% animal free products Muroexe projects a brand that is authentic and responsible.
Videos sell better than static images and when videos that don’t require users to click ‘Play’.
81% of the marketers report that videos have increased dwell time.
GymShark uses a background video in its above the fold content to drive attention to its Gymshark x Whitney Simmons collection.
A relatable story for the millennials and Gen Z.
Valuable information offered for free always makes great lead magnets. More so, when it is included above the fold.
Be Bodywise offers a free doctor consultation for hair, skin, nutrition, intimate, and PCOS problems communicating trust signals.
So, freebies in your above the fold website page are great head turners.
Quizzes are a potent way to pique customers' interest. Weight Watchers uses a quiz in its above the fold website.
This is a bit of a tricky question.
Traditionally, most UX designers placed the web page fold at 1000 pixels wide and 600 pixels tall.
But, today there are just too many screen sizes out there (and corresponding resolutions).
So it’s safe to say that the average fold is 800 pixels.
It’s always a good idea to decide on your fold line based on visitor screen size data from your web analytics.
VERY. The average difference between how users treat the information above the fold and the one below the fold is 84%.
Users will scroll ONLY if they find the information above the fold useful enough to spend more time and explore further down the page. This intent is irrespective of the screen size.
So above-the-fold content is still important, provided you fix your goal.
The top fold is ideal to gain your visitor’s attention and engage them, not necessarily convert them.
Its job is to keep the readers hooked to the page and scroll down to consume the rest of the information.
This is where below-the-fold content comes in—it complements the above-the-fold content.
This brings us to the last question.
YES, it does. Google’s updates have always focused on putting the customer first. And their research revealed that users wanted to see the content right away—instead of ads.
People already have a short attention span. So if they don’t find something engaging on the top fold, they’ll leave. This will affect the average time spent by users on a page—which Google tracks.
So putting your important content above the fold is going to boost user engagement—and consequently, search engine rankings.
Below the fold content has an extreme chance of less viewability since the user has to scroll down to see the content.
According to a Google Study, the median viewing time for below the fold ads was 40% while the above the fold ads fared better at 68%.
So summing it up, less scroll means higher viewability.
As you’re already aware, the concept of a fold began with journalism. Since they were stacked and folded on stands beside the street, only the top half was visible.
It wasn’t long before publishers realized that the best way to sell more papers was by grabbing the people’s attention. So they reserved the top half for compelling headlines and eye-catching imagery.
This translated to the digital world. On a website, above the fold means any content that’s viewable without scrolling.
So websites would try to cram up all their information within the designated 600 pixels of space.
Like this website below has done.
Their excuse: what if people didn’t scroll!
But there’s a catch: website usability has changed a lot since 1994. The most remarkable change has been the habit of scrolling. Today, scrolling has become second nature to online users.
Add to that, the invention of a plethora of devices such as smartphones and tablets. This means a wide range of screen sizes and resolutions.
Therefore, it’s a bit dicey to decide exactly where the page fold lies.
This has led to many propounding that the days of the fold are long gone. You’re sure to have read such seductively titled pieces: the fold is dead or the fold is a myth.
Here’s the research and data they base their case on:
This data matches with the Nielsen Norman Group’s research.
Their 2010 research had revealed the viewing time for above-the-fold content to be 80%. Their recent 2018 research revealed that the same had dropped to 57%.
Another interesting research was carried out by MECLABS. They discovered that placing the call to action (CTA) below the fold boosted conversions by 20%.
These conclusions are NOT wrong. In fact, this helps us understand how the fold has evolved over time.
Above the fold copy refers to the key messaging present in the first half of the website before scrolling down. It’s the first thing that a user sees within 5 seconds of landing on your eCommerce homepage.
Here’s an example of above the fold copy featuring RXBar.
The copy, formatting, and CTA are a part of above the fold copy. It is recommended that you don’t overstuff the above the fold portion and use carousels instead to display other elements.
Above the fold refers to the first portion of the page before scrolling down while below the fold is the latter part of the page appearing after the scroll.
While above the fold content has high visibility, stuffing it will cause friction and confuses your site visitors. It also adversely affects your UX resulting in high drop-offs and low conversion rates.
57% of users spent most of their time viewing above the fold content. This is due to the interaction cost—the collective effort including mental and physical that users must take to reach their goals while interacting on a site.
Above the fold has a low interaction cost. It takes minimal effort to view. Comparatively below the fold content has an invisible or higher interaction cost of scrolling to see what’s hidden.
Your above the fold is going to determine if a user decides to scroll further and take action.
Above the fold content is critical for UX success because it includes important elements such as copy, CTA, categories, navigation menu, etc.
Summing up, yes, your above the fold content is important for CRO success.
To determine above the fold size, running a scroll map test will help you identify the areas where your users are spending the most time.
98% of visitors who visit an eCommerce site—drop off without buying anything.
Why: user experience issues that cause friction for visitors.
And this is the problem Convertcart solves.
We've helped 500+ eCommerce stores (in the US) improve user experience—and 2X their conversions.
How we can help you:
Our conversion experts can audit your site—identify UX issues, and suggest changes to improve conversions.