Too many eCommerce business owners are guilty of spending most of their time optimising their product pages, category pages and checkout process - but fail to optimise their homepage.

Why is this an issue? As one of the first touchpoints for potential customers, your homepage can either make or break your conversion rate.

So it’s crucial to find the right features and design for your audience. Figuring this out is a lot of trial and error, but if you don’t investigate, you can lose out on a lot of revenue and customers.

We want to take the guesswork out of it. That’s why we’ve been testing features, designs and strategies on both our clients’ sites and our own eCommerce sites for years.

In this article, we’ll go through exactly what we’ve learnt from our research in homepage conversion optimisation best practices, including:

Why your eCommerce homepage is so important
9 recommended eCommerce homepage best practices (plus examples)
Why it’s important to always test what’s right for you

Your eCommerce homepage = your online shop window

It’s obvious, we know, but it’s worth reiterating. Your eCommerce homepage is your gateway to showing (and telling) shoppers about your site, your brand and your products.

And first impressions count.

It needs to be engaging, easy to navigate and clearly display what your customers are looking for. Aka: really good UX.

We’ve seen lots of eCommerce businesses focus on optimising their category and product pages, but we believe you should spend just as much time optimising and designing your homepage.

But this doesn’t mean a complete redesign or hiring a developer to create a bespoke site. A few simple, yet effective, changes can be all it takes to improve your conversion rate.

Here’s some of our recommendations.

9 best practices for your eCommerce homepage

1. Show categories outside of the menu, particularly on mobile

Maybe you have your product categories listed in your mobile menu or header area. Great. But it could be better. Display selected categories on your mobile homepage as well.

Let’s look at a few examples. Both Sofa.com and Monica Vinader present their product categories on their main mobile homepage, so shoppers don’t have to use the hamburger to navigate.

You’ve only got so much real estate on your mobile homepage, so to prevent shoppers from becoming frustrated (and potentially bouncing), make your categories easy to access outside of your menus.

Pro tip: many of the best eCommerce homepages have made these category or product elements swipeable on mobile (like Monica Vinader).

2. Switch your hero image carousel to a static image

While a carousel of your images (which automatically slides through them) on your homepage might seem like a great way to show multiple product images, its effectiveness on mobile and desktop varies significantly.

In our research, we found that most eCommerce homepages no longer show these carousels on mobile. From conducting A/B testing, the static image wins about 70% of the time. They’re simpler, uncomplicated and help maintain the user’s focus.

Why say something in four images when you can say it in one?

So if you’ve still got a carousel rotating on your mobile homepage, consider swapping it to one single, equally engaging image.

You might even look into ditching your carousel on desktop too. Look at Sweaty Betty. Both their mobile homepage and desktop homepage use static images, even though the appearance is slightly different.

Our take: the success of a slideshow/carousel depends on the quality and effectiveness of the slides. If you can communicate your value proposition in one image, then it’ll often work better than a slideshow.

3. Present individual products on a device-wide standard

While it might be obvious, displaying examples of your products on your homepage can be a big best practice in eCommerce homepage design.

However, we recommend looking at different display options - mobile and desktop - when choosing whether to carry out this standard. And, if you do display individual products, be sure to use the feature across all of your eCommerce site homepages.

On mobile homepages:

We usually recommend clients test showing individual products before rolling it out on their mobile homepages. A great place to start is with product widgets like ‘best sellers’.

For example, here’s Internet Gardener’s product feature on mobile:

On desktop homepages:

Whatever you do to your mobile homepage, do the same to your desktop homepage. Because of Google’s mobile-first indexing and the necessity of mobile/desktop parity (to offer a singular experience), having different content on your mobile and desktop sites is a big no.

Mobile-first indexing: it just means that the mobile version of your website becomes the starting point for what Google includes in their index, and the baseline for how they determine rankings.

Here’s Internet Gardener’s product feature on their desktop homepage:

4. Choose a responsive site

A responsive site is a single site that adapts to any screen size - so your content looks good on mobile, desktop and other devices. Unlike m-dot sites and adaptive sites that hide certain content on mobile.

Basically, a responsive site is your golden ticket to Google’s mobile-first indexing. It means you can have mobile parity in a more efficient way than an m-dot site or other types of adaptive sites.

Want to test how easily a visitor can use your page on mobile? Check out Google’s Mobile-Friendly Test. Simply enter a URL and see how your page scores. If it’s not mobile-friendly, it’ll highlight the issues that are holding it back, like: ‘Text too small to read’ or ‘Clickable elements too close together’.

Take a look at how Ted Baker’s homepage reacts to the device being used to show a unified but identical (at least content-wise) experience to the user.

5. Use global header elements

Ever seen things like ‘Free returns’ or ‘Next day delivery from £X’ permanently at the top of a site? It’s usually a global header element.

Global header elements appear on every page of the site and are usually a header, footer or floater element - making them a great place to promote your latest sales or USPs.

Entry and exit offers can also appear on every page (obviously only when certain targeting is triggered by the user).

Turns out both of these elements improve conversion 90% of the time, so if you’re not using global header elements, you’re losing out.

Gymshark goes as far as making their global header element sticky, ensuring it always stays at the top of the page, even when scrolling.

6. Consider a live chat function

Adding a live chat function to your site is a highly recommended eCommerce homepage best practice - but only if it proves its worth.

We say ‘consider’ rather than ‘definitely get’ because live chat costs money. And the ROI of adding another customer service member to your team - purely for live chat - isn’t proven. Instead, it’s best to A/B test a live chat function before you do anything else. Record any increase in conversions against the cost of hiring someone to run it.

What about a chat bot? While chat bots are a budget-friendly alternative, in our testing we found that removing them helps increase conversion rates. They don’t provide a good enough user experience and usually frustrate visitors more than help them.

After all, how many times have you heard (or said yourself): ‘I just want to talk to an actual person’?

7. Implement a hamburger menu

Those three little lines stacked on top of each other is an almost universally recognised icon, just like the shopping cart icon. And using it is a no-brainer. It improves conversion by propelling people through the buying process, which is what both you and your customers want.

When it comes to icons, don’t try to be creative. Random, less recognised icons on your eCommerce homepage have been shown to slow users down. The time they spend figuring out what it means could be used to move to the next step of purchasing. The other thing is that labelling your icons can be valuable.

Oak Furnitureland labels its top navigation icons, as well as the icons within its hamburger menu. Now imagine if they didn’t. How frustrating would it be to figure each one out? You could make some pretty good guesses, but you shouldn’t have to.

Simply put: if your icons aren’t clear, you might find shoppers bouncing to a competitor.

8. Display your search icon/field outside of your menu

Shoppers who use the search function on your site should convert at least 2.5x as well as those who don’t. And if they don’t convert, then you may have a problem with your search function.

So don’t turn your search icon into a game of hide and seek. Take it out of your homepage menu and make it as prominent as possible.

Below you can see how Dunelm shows the search function completely. While Aquaproofs displays their search icon which can be expanded for ease.

It’s also worth checking your desktop search stats. If your searcher revenue is significant, you’re more than likely to benefit from exposing the search function on your mobile site too.

9. Improve your site speed

It’s just good UX: the faster your site, the better it’ll convert. Mobile sites are slower than desktop sites for a number of reasons (mainly hardware and bandwidth), so it’s important to optimise your eCommerce site and homepage for mobile.

While Google keeps changing what’s deemed ‘good’ page speed, in Google PageSpeed we usually aim for a score above 60, an FCP above 2 seconds and a cumulative layout shift in the green.

It’s crucial to stay on top of your page speed, as Google updates its algorithm every year or so - making it harder to score above 60. But because it’s difficult to improve your site speed (particularly on mobile), we recommend pausing every other effort on your site and to focus purely on site speed to try and get over 60.

Think back to painfully slow-loading sites. What do you do? You bounce. So will your visitors, which means a significant drop in your conversion rate.

Finally, test everything

While these eCommerce homepage best practices have generally proved to produce a positive impact for both our clients’ sites and our own, every site is different.

We recommend you test each one before rolling them out across your site. Take them as a starting point, but be mindful that what works for some might not work for your business and shoppers.

As a rule: test one conversion optimisation at a time and be patient to get accurate and actionable results.

Want someone to guide you through the testing? We can help carry out these eCommerce homepage best practices to your site, highlight what works and increase your conversion rate. Simply get in touch to talk things through.

Alternatively, download our free eCommerce CRO Checklist to cover both your home and sitewide pages.

9 eCommerce homepage best practices to improve CRO and drive sales