lengthy page building?
Try GemPages to create pages faster and smarter with AI-powered feature.
Exclusively for users making any first payment from Oct 1st to Dec 31st 2023, UTC.
Discount applied automatically at checkout.
Stay in the know
Subscribe and you'll be the first to know about Shopify news, profitable store ideas, helpful guides, product updates, and more.
If your website is a digital asset, the above-the-fold section is one of the most valuable parts of that asset.
It’s the first thing your website visitors see when landing on your website. Thus, it carries a significant importance, especially in eCommerce businesses.
But the question is — what should you consider when creating your above-the-fold section and its content?
In this blog post, we’ll walk you through some of the best above-the-fold website examples and share the tips and best practices that you can implement when creating your above-the-fold content and design.
“Above the fold” is the top section of a web page that appears immediately once you land on it — and before scrolling down the page.
A typical above-the-fold section of an eCommerce store’s homepage may contain elements such as the brand logo, announcement bar, header menu, hero image or video, heading and subheading copy, promotional offer, search bar, CTA (Call to Action) button.
Now, let’s go through the best above-the-fold or hero banner examples that we have collected from the eCommerce world — after reviewing more than a hundred websites/Shopify stores.
Huel is a nutritional food brand that makes its products from plant-based and sustainable ingredients such as peas, rice, oats, coconut, etc.
Key takeaways from Huel’s above-the-fold section:
The brand has provided two different CTA buttons — “Shop Huel” and “What is Huel?” — to help two different types of customers: 1. Those who are already aware of the brand and 2. new customers who might not be aware of the brand or its products.
The brand highlights the many popular media platforms where it was featured, such as Women's Health, Men's Health, CNN, Shape, Vox, TIME, Fox, and Wired. This helps enhance the brand’s credibility.
Another great thing the brand has done is that they have displayed its Trustpilot rating (TrustScore 4.3 from 16,454 reviews). This shows to customers that thousands of customers have already used this brand’s products.
Allbirds is one of the most popular Shopify-powered brands that offers a wide range of comfortable shoes and clothing products.
Key takeaways from Allbirds’ above-the-fold section:
Amazfit is a smart wearables brand that offers smartwatches, bands, and accessories.
Key takeaways from Amazfit’s above-the-fold section:
When landing on the Amazfit website, its announcement bar grabs the attention where the brand has mentioned some important information, i.e., free shipping, a 12-month warranty, and the 30-day returns policy. All these details can help customers purchase the product without hesitation.
The slideshow highlights some of the best products offered by the brand. While each slide has the "Learn more" button, customers can click anywhere on the image, and it'll redirect them to the respective product page.
Amazfit’s above-the-fold section displays some impressive product images along with its key features which can allow entire buyers to make a quick purchasing decision.
When designing your above-the-fold section, consider all the different device types, especially mobile. If you’re using GemPages to design your website, you can easily switch between different device types in the editor and create a mobile-optimized and responsive above-the-fold design.
Kylie Cosmetics — a cosmetics brand run by a famous celebrity, Kylie Jenner — is an excellent example of a beautifully designed above-the-fold section.
Key takeaways from Allbirds’ above-the-fold section:
Customers love getting free treats, and Kylie Cosmetics knows it very well. It has highlighted an enticing offer of “free treats” in its hero section. This makes it an attention-grabbing above-the-fold section.
The overall design of Kylie Cosmetics’ above-the-fold section looks aesthetically pleasing with the mild colors and nice fonts.
Cupshe is a fashion brand that offers stylish beachwear, swimwear, jumpsuits, and dresses at affordable prices for women of all sizes.
Key takeaways from Cupshe’s above-the-fold section:
Right below the menu section, Cupshe highlights promotional offers with three blocks — "FASTER & FREE", "10% OFF | SITEWIDE", and "GET EXTRA 15% OFF".
Under the Pre-Black Friday and the subscription discount offers, there are two different CTAs — “SHOP ALL CLOTHING” and “SHOP CLEARANCE”. By using such specific CTAs, you can make it easy for customers to explore any specific promotional offers.
Apart from the hero image section, Cupshe uses the announcement bar to promote its different discount offers and free shopping offers (for a certain order value).
Bulletproof is a popular brand that started by selling coffee and now offers a variety of other products including protein bars and other supplements.
Key takeaways from Bulletproof’s above-the-fold section:
The overall look and feel of Bulletproof’s homepage look so elegant thanks to its great color scheme and proper use of color contrast.
The 20% discount offer is being promoted with a dedicated widget. Customers can click on that widget and unlock the offer. Another good thing about this widget is that it’s a sticky widget. So, even if you scroll down, it appears on your screen.
The heading title after the hero image — “DISCOVER WHAT BETTER FEELS LIKE WITH BULLETPROOF FUNCTIONAL NUTRITION” — is also a great way to intrigue the visitors to explore more on the website.
Peak Design offers a wide range of products including everyday bags, bag accessories, mobile cases and accessories, camera gear, and tripods.
Key takeaways from Peak Design’s above-the-fold section:
Peak Design donates a small portion of its sales to nonprofits and it makes the customers aware of this case through the announcement bar at the top of the website that says, “1% OF EVERY SALE GOES TO ENVIRONMENTAL NONPROFITS”.
One more interesting thing about Peak Design’s above-the-fold section is the About tab in the top right corner of the website. When you expand that tab, it provides links to all the company resources.
William Painter offers sunglasses with high-quality and durable material for an "adventurous lifestyle".
Key takeaways from William Painter’s above-the-fold section:
The video in the hero section showcases the benefits of the product (sunglasses) and how it can be used for various types of adventures.
One of the unique aspects we observed on this brand’s above-the-fold section was the widget given for accessibility adjustments. It provided different settings to adjust the website's accessibility based on individual needs.
The brand offers free shipping on all orders in the US above $100 and it has highlighted this offer in the announcement bar.
Bombas is a sock and apparel brand with a great mission to help others who are in need. The brand creates comfortable socks for men and women.
Key takeaways from Bombas’ above-the-fold section:
Bombas has a unique design displaying its major collections right below the menu bar. This can help customers easily find what they’re looking for.
In the above-the-fold section, typically brands use copy promoting their product benefits or discount offers; however, Bombas is different. It has mentioned its initiative of "One Purchased = One Donated" and that the brand has already completed 100 million donations.
Manscaped is a lifestyle consumer brand for men that offers essential grooming products such as beard grooming kits, hair trimmers, body care kits, deodorants—and clothing items such as t-shirts and boxers.
Key takeaways from Manscaped’s above-the-fold section:
Manscaped has put its products in the limelight in the hero image section. With a great color contrast, the overall visual appeal of its above-the-fold section looks quite stunning.
Sometimes, you might have too much to share in the announcement bar but too little space. Manscaped has created an announcement bar that can be expanded to review more details. In this section, the brand promotes its offers like free gifts, free shipping, the peak hygiene plan, etc.
Figs is a medical uniforms and apparel brand that offers comfortable and stylish scrubs, outerwear, loungewear, layering essentials, and more.
Key takeaways from Manscaped’s above-the-fold section:
The header menu is one of the crucial elements in the above-the-fold section. It helps visitors navigate through the website easily by finding different collections. However, Figs has taken it to the next level.
It allows visitors to explore the products by color. There are many customers who are very specific about their color choice, and this section could be incredibly helpful to them.
Figs shows how its different products look on people by showcasing lifestyle images with different models. This makes the overall look and feel of the website aesthetic as well as authentic.
As the name suggests, Hand Dyed Shoe Co. offers custom handmade shoes. This brand uses GemPages to design its store.
Key takeaways from the above-the-fold section:
Hand Dyed Shoe Co. shows how premium and elegant its finished product looks through a high-quality video. We must say — the video steals the show in this above-the-fold section.
Instead of using a copy explaining the product and its features/benefits, this brand has focused on the brand philosophy. You can see the quote by the founder that says, “It's not about what you do in your unique shoes, it's about how you feel when you do it”.
There are two different CTAs — “Design Yours Now” and “Book a Fitting” — and this makes it easy for customers to go for the specific CTA based on their requirements.
Brooklinen was founded with a mission of providing high-quality home essentials at accessible prices. The brand sells products such as bed sheets, towels, blankets, home fragrances, wall art, and much more.
Key takeaways from Brooklinen’s above-the-fold section:
Brooklinen promotes an interesting offer to its customers by giving them the opportunity to earn four times more points on every gift guide purchase.
In the header section, it has a message icon that entices us to click on it. Upon clicking on that icon, a pop-up appears that offers a 15% discount for signing up for the newsletter. This is a creative way to capture email subscribers.
First impression is essential, and it applies to web design as well. The first thing that visitors notice when landing on your website is the above-the-fold section.
And that’s why it’s so crucial to create a great first impression with your above-the-fold content.
Use GemPages to create your entire web page and not just the above-the-field section. You can create different pages such as the About page, Contact page, and Blog page — with a similar design and style as your homepage.
You might be wondering how above-the-fold content can impact SEO!
While it’s definitely not the direct factor in SEO, it’s still important to consider it. If the above-the-fold content is poor, your visitor may exit your website immediately. This can increase the bounce rate, and eventually, it may impact your website’s SEO.
Great above-the-fold content makes the user stay on your website and explore more content. As a result, it’ll not only reduce the bounce rate but also help enhance your ranking.
Your website’s above-the-fold content plays a crucial role in influencing your website visitors. It can really build or damage your customers’ perception of your brand.
Compelling above-the-fold copy along with a CTA can entice visitors to convert into buyers. Some brands also use this section to highlight and promote their best offers in this section.
Design is one of the most important aspects of the above-the-fold section. If you’re using Shopify and wondering how to nail your website design, GemPages can help you do so.
GemPages lets you design your website with an intuitive drag-and-drop editor, and you can customize the design as you wish.
GemPages is one of the most loved page builder apps on the Shopify app store. What’s more exciting is that GemPages also has an AI-powered image-to-layout feature that makes the design process smarter and faster.
One of the common mistakes we see a lot of stores make is that they keep too long a header section. As a result, the hero section gets too little space to create an impression as needed.
Try to keep the header section reasonably short in terms of its height. Also, we would advise using a rectangular-shaped logo instead of a square logo. A square logo takes up too much space.
The heading copy or the tagline can be used in different ways. Many brands use it to highlight the key benefit or the USP (Unique Selling Point) of their business.
Some brands prefer to use their headline copy to state the brand’s mission. It creates a strong bond between your brand and your customers.
All in all, make sure to use a tagline that aligns with what your brand is doing and what makes you stand apart from the competitors.
Think of your above-the-fold copy as a quick intro to your brand. It doesn’t have to be too lengthy. Ideally, you can write a heading copy with just a one-liner of no more than 5-7 words.
Then, for the subheading, just a couple of lines to briefly expand on your main heading. Be creative but get to the point straight away.
Personalized CTAs have 202% better conversion than basic CTAs.
Typically, most online stores have one commonly used CTA button — “Shop Now”. However, you can be more specific and create more personalized CTAs depending on your products and customers.
One more common mistake we noticed in many websites is that the background is too busy and it’s hard to read the text. It can completely eliminate the positive impact that your copy could bring.
So, make sure the texts are clearly visible by adjusting the contrast level of the background image or video and the text. Use image overlay if the background is too busy.
Above-the-fold content is a great opportunity to create a solid first impression. Don’t miss out on that opportunity. Create a unique and compelling design to show customers why they should buy from your brand.
Also, you must update and change your above-the-fold content at regular intervals. And that’s why using a page builder app like GemPages can make your job much easier and faster.
Lastly, whenever you’ve created/changed the design of your above-the-fold section, make sure to check it out on different devices to ensure everything looks perfect on all types of devices.