[How to] What does it take to have a best-in-class eCommerce Homepage in 2020?

The primary goal of a homepage is to provide an overview of the product categories so visitors can start exploring what is inside those categories. 

Let me use an analogy.

Imagine you are walking in a physical store. One you have never been to before.

At first, you have no real idea if the store has what you need. But as you walk past the aisles you become more and more confident the store might have the product you are after. You even get a sense of which aisle the product could be in.

It’s logical that only after you have identified what seems to be the right aisle that you will narrow down your product search to that specific aisle.

The same process occurs when visiting an online store. 

A visitor will first try to understand if he landed at the right place before spending more time exploring.  

From the moment a visitor lands on your homepage, 3 questions will usually pop in his head:

  1. “Where am I?”
  2. “What can I do here?”
  3. “Is this the right place for me?”

The trick is that you need to answer them almost simultaneously and in less than 5 seconds.

Why 5 seconds? 

Because that’s the number of times visitors will need before “bouncing off” your website if you fail to answer these questions. Relentlessly pressing that back button and thinking you can’t be of any help for them. That’s how potential customers are lost. 

Analytics guru Avinash Kaushik explains what bouncing off means even more explicitly: 

“I came, I puked, I left”

In fact, “you only have one chance to make a good impression” holds true as much in the real world as in the digital world. 

Which is why the homepage is so dramatically important to the user experience. How could your website be trusted if the homepage isn’t clear or looks messy?

So, how do you build a top homepage for your eCommerce website? The kind of homepage that leads your hard-earned visitors to go deeper and start exploring your products?

In today’s article, we will dissect the anatomy of a somewhat “perfect” eCommerce homepage and give you a number of guidelines that will help you drive more conversions down the line.

What to expect in this article

  1. Include a compelling value proposition to your homepage
  2. Use high-quality imagery to communicate trust
  3. Have your main product categories listed on the Homepage
  4. Get rid of carousels and use static promotional sections instead
  5. Display thematic product categories (based on seasons, lookbooks, inspiration)
  6. Highlight popular and high-margin products (best-sellers, sales, bundles)
  7. Make it clear from which categories featured products are from
  8. Ideally have more than one product shown in a product category thumbnail
  9. Consider showing popular subcategories directly in the main categories’ thumbnails.
  10. Use IP geo-targeting to display the right language and currency by default
  11. Be even more relevant to your visitors with personalization

Include a compelling value proposition to your homepage

The value proposition should be the first thing visitors see when landing on your homepage. It’s without a doubt the most important piece of messaging on your Homepage. 

The value proposition should answer the question “What’s in it for me?” in a sentence or two. It should highlight the main differentiation between your business and your competitors. Basically why visitors should buy from you and not from other businesses. 

Also, it needs to convey the main benefits of buying your products. Remember that “features tell but benefits sell”. Therefore, you need to put yourself in the shoes of your visitors and explain clearly what you are selling.

You should avoid jargon or hype terms at all costs as people will surely not fully understand them.

All in all, clarity is the name of the game. Think of the simplest way you would describe your business.

From our own experience working with eCommerce brands, adding or tweaking a value proposition can reap a huge increase in engagement and will make your visitors more confident to explore your products. 

What you can start doing now: 

Do you currently have a value proposition on your Homepage? No? Build one answering these 3 questions:

  1. What is this website about?
  2. What’s in it for me? (benefits from a customer standpoint)
  3. How does my business differ from the competition? 
Dollar Shave Club has a value proposition oriented around one main benefit: simplicity. Simplicity to shave and groom and simplicity of delivery “automatically delivered to your door” 

Use high-quality imagery to communicate trust

There is something quite baffling about how people behave on a website, as some studies in the field of ‘digital psychology’ have uncovered.

It has been shown that people will judge your website in no less than 50 milliseconds (that’s 0,05 seconds!). 

So having a sleek homepage design and high-quality images are crucial to make a good first impression and effectively communicate your brand identity.

One of the main problems with eCommerce is that potential buyers cannot feel or touch products, they can only rely on what’s displayed on your website. So great images will go a long way to help them assess your categories and products.

On top of that, having pictures that accurately depict product categories on the homepage is not only powerful to drive visitors to the desired action (e.g. start exploring products in a specific category) but also reduces their ‘cognitive load’, which is the cognitive strain that visitors might have when browsing messy and busy webpages.

What you can start doing now: 

Invest in bespoke photography for your ‘hero image’ (the main image above the fold on the Homepage) and for your product category. Don’t have professional photography equipment at your disposal? You’d be surprised what you can achieve with smartphones, sometimes a more natural look can go a long way. Another possibility is to collect User-Generated Content (UGC) from your own customers or influencers using your products and have the permission to feature them on your website.

Harry’s displays great product imagery first thing on the homepage

Have your main product categories listed on the Homepage

We talked about it in the introduction but visitors want to quickly determine what the website is about and have an overview of the variety of products available. Visitors don’t want to lose time figuring out if your eCommerce site is the right place.

If the homepage doesn’t quickly convey the nature of your website then your visitors 

By featuring all the most important or popular categories of your product catalog on the Homepage, you increase the likelihood users will find what they need and buy from you. 

But remember that by only showing your top categories and not the less popular ones you are missing out on showing the wide range of diverse products you may have. 

Some categories or products might generate most of your revenue but it doesn’t mean that the ones in the “long tail” should be overlooked. Displaying minor categories on the Homepage will help you avoid this pitfall.

It might not be possible to display all the categories you have but the more will be featured the more will be explored too.

What you can start doing now: 

Make your top product categories appear on the homepage and prioritize them based on the revenue they create. If only a few top product categories generate the majority of your revenue then have them included as sections on your homepage.

Bhphotovideo.com has all its main product categories listed on the homepage, making them easily exploration

Get rid of carousels and use static promotional sections instead

Carousels as we know them on eCommerce websites are displaying several rotating promotions at the top of the homepage.

At first, it might sound a good idea but unfortunately, most visitors won’t even see the promotions past the very first slide of the carousel. Indeed, the clickthrough rate (CTR) of the second, third (etc…) slides of carousels in abysmal.

Still, doubting about using them? Go have a look at http://shouldiuseacarousel.com/.

“So if carousels aren’t working, what should I do?” you may ask. 

We always recommend ditching carousels altogether and instead use static promotional sections on your homepage. The main reason is that they are always in sight and follow the natural path flow of your visitors, the promotion won’t be hidden behind a slide.

Promotional sections won’t require a click to be seen and can appear alongside product category thumbnails on the homepage. But don’t go overboard with static promotional sections either, your “pixel real estate” is limited and while promotions are great to drive sales, the majority of shoppers will first explore product categories.

What you can start doing now: 

Get rid of your carousel if you have one and include promotional sections or banners (like Chubbies does in the example below) on your homepage. The style of your section or banner shouldn’t look like an ‘ad’ but match with the style of your website.

Chubbies.com uses static sections and banners to display promotional campaigns

Display thematic product categories (based on seasons, lookbooks, inspiration)

Visitors won’t necessarily explore products using the classic category structure but rather by following inspirational or thematic categories. Indeed, some visitors will land on your website without necessarily having a product in mind but will browse for inspiration and ideas instead.

These visitors aren’t the majority of your traffic but it’s important you accommodate different product research methods. And this is where categories or blog articles promoting  “Lookbooks” or “Gift ideas” have their place. 

ASOS.com has a homepage section dedicated to ‘Style. Grooming. Inspiration. Advice’ for window shoppers who don’t necessarily have a specific product category to visit in mind

Other commonly used tactics to maximize your eCommerce store revenue is to display bundle offers, best-selling products, and sales high on the homepage. It will allow your visitors to buy one or more products together at a cheaper price than each individually. It can also increase the Average Order Value as they buy more products.

Best-selling products sometimes precede the product category thumbnails on the homepage as they can give a good representation of what you are selling on your store to your visitors. Since social proof plays a huge role when people choose a product it’s only logical that showing popular options (best-selling products) will trigger lots of interest.

A ‘Sales’ tab could be highlighted in the menu navigation so that discount shoppers can quickly access products on a sale, or used as a filter once visitors have reached a certain product category. 

By adding bundles, best-selling products, and sales to your homepage you offer alternative navigation paths to shoppers who all have a distinct buying intent. 

What you can start doing now:

Identify in your analytics tool what are the top 5-10 products on your website bringing in the most revenue. Consider showing them on your homepage as “best-sellers”. 

Find 1 or 2 highly complementary and high-margin products to each of these best-selling products. You should have 10 bundles ready (remember to apply a small percentage on each bundle to make them attractive and so that visitors feel they are making a bargain). Where you put the bundles are up to you. They could 1) appear on the homepage, 2) be included on the best-selling products’ product page or 3) have a “Bundle” tab on your navigation menu to display them.

MVMT highlights a prominent ‘Trending now’ section for some of its best-selling products

Visitors can be confused and disappointed at the seemingly few products presented after clicking on a given Homepage section because they didn’t realize that the section they clicked on is a subcategory or a portion of a bigger category. 

Indeed, visitors could wrongfully assume the featured category is all there is and miss the broader category it lies within.

We recommend adding a link to that bigger category close to the smaller section so that users understand that the section is part of something bigger.

Homepage mockup from Helumium.com’ Free Kit showing how a featured category could indicate it is part of a bigger parent category

Ideally have more than one product shown in a product category thumbnail

Each product category thumbnail on the homepage should ideally display a few products from that category. Otherwise, visitors could wrongly assume that a product category only has one type of product, while it may have several. 

This is why we recommend adding at least 2-3 products on each category thumbnail to avoid any confusion. 

To maximize the readability of your homepage you should still have written labels for your product category. Your visitors cannot really go wrong if they have a clearly labeled category and a thumbnail with representative products. 

What you can start doing now: 

If your product categories have several different product types then consider showing it on your product category thumbnails.

Pura Vida Bracelets has many different kinds of bracelets and jewelry, which is reflected in the product category thumbnails

It might sometimes be more practical to show the subcategories (or the most popular ones) directly on their respective main category thumbnails as visitors can assess quickly if they are going in the right direction. 

It can also save them a click on the main category, only to find out they won’t find the subcategory they are interested in. With this implementation, visitors can go straight to the desired subcategory 

What you can start doing now:

To even consider adding subcategories on your homepage you should have a quite wide product catalog with a lot of distinct subcategories. However, if you do, then you could possibly add subcategory links on the homepage right next (or below) their parent product category, as seen with Drizly below.

Drizly.com assists visitors in selecting a subcategory straight from the homepage without having to explore each individual top categories first (Beer, Wine, Liquor, and Extras)

Use IP geo-targeting to display the right language and currency by default

Language plays a crucial role in how confident visitors feel when landing on your website. While having a single version of your website in the English language could somehow work with non-native people who learned it at school, in most cases, it won’t be ideal for them to analyze products in a foreign language.

If you add a different currency to the mix, you can be sure people won’t have the best user experience they could have, as they need to translate and calculate at the same time. That’s a lot of effort you are asking them to do to buy from you.

While it can be understandable that your eCommerce website is not translated in many different languages you should still remember your customers are potentially everywhere, speak different languages, and use different currencies.

To offer the best shopping experience possible you should either have the IP geo-targeting feature enabled on your website or at least allow users to select their country and currency of choice.

With the IP geo-targeting feature your visitors are automatically sent to the right version of your site based on the language and region of their browser and you can convert significantly more visitors – visitors who wouldn’t have purchased if they had to go through all the steps in a foreign language.

For brands selling worldwide, having a homepage that has country-specific information is vital. 

What you can start doing now:

If you have international customers, have at the very least a feature that detects their local currency and updates your prices accordingly. If you have a significant portion of your traffic coming from a country with a different language and if you simply want to start selling your products abroad, then you should consider translating your website in the language where you see the highest revenue potential for your brand.

Danielwellington.com automatically recognizes visitors’ region, language, and currency but allows them to update them if needed

Be even more relevant to your visitors with personalization

Personalization is about showing relevant offers, promotions or content based on your visitors’ past interactions with your website. 

If one visitor has visited 14 different product pages from the ‘Men’s Boots’ category but hasn’t yet added any product to his cart, it’s fair to assume that showing him your best offers around this category might help you close the sale. Likewise, a returning visitor who has previously visited articles within the “Kitchen tools” category would probably expect to see kitchen-related products. 

What’s incredibly powerful with personalization is that you can do it at scale: every visitor on your eCommerce website can potentially have a slightly different experience, based on his previous visits, pages visited, location… and the list goes on.

Just look at Amazon. Their personalization algorithm is trained to a level where it guesses what are the complementary and/or alternative products that you are the most likely to buy. By constantly showing highly relevant products they are able to make you add extra products which will increase the Average Order Value (AOV).

Of course, as useful personalization can be, it won’t solve your problems if your website isn’t converting and you will need to have a strong and planned segmentation strategy before doing anything.

Instead, you should see personalization as a last final touch to add to your website. You first need to make sure your pages are optimized, that everything loads fast, that your website copy is big enough to be read (sounds obvious, yet we see it happening all the time), that you have great products and great offers, that your categories are well-organized, you get the point. 

When a visitor lands on your homepage, try to display highly relevant information: their preferred categories, recently-viewed products, recently-viewed brands, suggested items…

What you can start doing now:

You think your eCommerce website has what it takes? We recommend you to have a look at Justuno and Nosto, which are two of the most popular personalization platforms out there. 

Unsure your website is optimized enough to even consider the tools above? Get a (friendly :D) reality check with our Helumium Free Kit and see precisely where your eCommerce business could be improved and how to improve it.

ASOS’ homepage uses at least 2 personalization elements: it automatically redirected me on the ‘Men’ section and also has a seasonal promotion “50% off warm-weather”

Conclusion

Building a high-performing homepage is difficult as there are many moving parts involved. Visitors will use your homepage in many different ways to start exploring products: from the navigation menu, from a static section, maybe from a bundle or a sale promotion.

However, never lose sight that the main goal is to get your visitors to explore your product categories. The homepage is the main doorway to your products and the more relevant the products and categories highlighted are the more likely visitors will go down your funnel and consider buying your products.

Use these 10 guidelines from the list as “homepage essentials” and see how you perform against them. Of course, there isn’t a single source of truth. But from our extensive experience and research, we have seen these guidelines move the needle for many clients.

Want something even better?

At Helumium we compiled years of research and experience on how to build the best eCommerce website possible into a Free Kit. There are 120+ Desktop and Mobile screens that are annotated with 300+ guidelines, all based on data (not opinion or gut-feeling).

Top eCommerce brands have seen great improvements in conversions from following this free Kit.

If you feel like giving it a try you can get it here: helumium.com/balloon

You May Also Like