In this post, we will break down what a best-in-class eCommerce homepage looks like, according to our conversion optimization best practices research.
We compared the conversion optimization features and tactics used on over 20 of the top eCommerce sites out there, and put them into a matrix so marketers can easily identify best practices, emerging trends and fading tactics. Here’s what we found out about their homepages:
Shop by Category on Mobile (not within the menu)
In 2017 14 merchants do it, 6 don’t = Best Practice
In 2019 21 merchants do it, 4 don’t = Must Have
What it is: Categories offered on the homepage in addition to what may be in the menu or header area.
What we say: Category navigation from the homepage is becoming convention and has consistently tested well, particularly on mobile. It is ok for this experience on mobile to differ from the standard desktop experience.
This trend has become standard, having selected product categories on the homepage is a must in 2019.
Additionally, we have begun tracking best in class mobile interface approaches as well. In our last update, we see that 15 out of 17 BinC companies are making these category or product elements swipeable on a mobile device, so that’s a must do as well.
Hero Image Auto Slide (aka Carousel)
2017: 4 do it, 16 don’t = Not Conventional (on mobile)
2019: 4 do it, 21 don’t = Don’t Do (on mobile)
What it is: Hero image automatically slides through images.
What we say: Most BinC sites no longer do a slideshow on mobile, but a couple do. On desktop, however, more do. In our extensive A/B Testing of this element we see a static image win about 70% of the time. So while the BinC evidence is strong, if you have a slideshow on mobile, it’s a good idea to test replacing it with a static image.
2017: 6 do it, 14 don’t = Don’t Do This (on desktop)
2019: split! = Test This On Desktop
There is a major difference between desktop and mobile slideshows in 2019 with half the list using them on desktop but not on mobile. My opinion is that a slideshow’s efficacy is entirely dependent on the quality and effectiveness of the slides – i.e. if you can communicate your value proposition in 1 image and/or have a great promotional calendar, the single static image will work better than a slideshow.
Patagonia shows a slideshow on desktop but not on mobile:
2017: 8 do it, 10 don’t = Emerging Trend (on mobile)
2019: 17 do it, 8 don’t = Approaching Best Practice (on mobile)
What it is: Products are shown on the homepage so users can see examples.
Product widgets as in a ‘best sellers’ widget have gained in usage. This year 2/3 of our BinC sites are showing individual products on the homepage. At this level of usage, we’d suggest testing this as opposed to just implementing it.
eBags product recommendations on mobile:
2017: 20 do it, 0 don’t = No Brainer (on desktop)
2019: all 25 do it = You need to match mobile on desktop here (see below)
This one is a head scratcher in terms of how all sites are doing it on desktop but not on mobile. With Google’s mobile first indexing and the necessity of mobile/desktop parity, it’s hard to understand the division. Basically, having different content on desktop vs mobile is a very bad idea, and though slideshows may get a pass on this, product content does not.
eBags product level links from homepage:
2019: 16 do it, 7 don’t = Best Practice
What it is: A responsive site is one that displays the same content on mobile, desktop and devices in between. It differs from a discreet m. site and from adaptive sites that hide certain content on mobile.
With google’s mobile first indexing, I’d say this is a requirement. Mobile parity (having the same content on mobile as on desktop) is now imperative, and the way to achieve this is a fully responsive site (as opposed to a m. site or other types of adaptive sites we’ve seen in the past).
Global Header Elements: Promo Area & Entry & Exit Offer
Entry Offer Mobile 2019: 10 Do, 15 Don’t
Header Promotional Area 2019: 15 Do, 10 Don’t
What it is: A global element is one that appears on all pages of the site and is usually a header, footer or floater element. Entry and exit offers, however fit this category as they can also be on every page of the site.
I like these 2 elements because there is mixed data from our BinC sites. What I can say, however, is that at Inflow we’ve extensively tested both these elements and found both to improve conversion 90% of the time. In this respect, I believe many of our BinC sites are behind the curve here.
Backcountry does a glocal promotional area and slide down entry offer:
2019: 20 Do It, 5 Don’t = Best Practice
This is definitely a best practice. In our testing, adding live chat has never lost, however, it has tied the control quite a bit. Since manning live chat costs money, unless you have customer service agents already available, the ROI of adding one just for live chat is not a given. Instead, you should A/B test this and measure any lift against the cost of an agent or service.
2019: 22 Do, 3 Don’t
I like this one as well because it seems so minor. The fact is, the hamburger icon is one of only a few icons (along with shopping cart) that has near universal recognition. Using this icon makes sense and does improve conversion a tiny bit because it speeds people through their buying process. On the other hand, using random icons on mobile or desktop is guaranteed to slow down a user – it’s a major pet peeve of mine – why would you force a user to learn your unique icons? The solution of course, is to use an icon with a label, which only 3 of our BinC sites do. Every time I’ve tested adding a label the results have been at least neutral and 30% of the time a tiny bit positive.
JCPenny uses a hamburger with label, and labels their other icons as well (imagine if they didn’t use labels, how irritating would that be?)
Search Outside Menu
2019: 21 Do It, 3 Don’t = Best Practice
What it is: Having either a search icon or search field outside of the menu (ie: exposed).
We know that users who search should convert at least 2.5x as well as users who don’t search (if they don’t, something is wrong with your search). Because of this, we want search to be as prominent as possible within reason, so making sure its not buried in the menu is key. If you aren’t doing this right now, check your search stats and if searcher revenue is significant, then expose it on mobile.
LuLuLemon exposing search completely, and ModCloth exposing search icon:
2019: 1 Does, 24 Don’t
What it is: There is only 1 absolute rule in conversion optimization: the faster your site, the better it will convert. Mobile sites are slower than desktop sites for a variety of reasons (bandwidth and hardware primarily), so it’s crucial you optimize your site for mobile display.
One measure of site speed is google pagespeed. Here we are looking for a score above 85. Recently we’ve adjusted this to add that we need a FCP above 2 seconds as well.
What we say: Yikes! Google did recently update their page speed tool to factor in computing delays as well, making it *very* hard to score a 85+ score, but our BinC list is behind the curve here. So while improving site speed (especially on mobile) is hard, my recommendation is to stop *every single other effort* on your site and focus exclusively on site speed to try and achieve a score above 70 and a FCP above 2.5 or so.
Fun fact, amazon can’t even hit these metrics…
Access Our eCommerce Best Practices Data Set and Report
Fill out our form below to get access to Inflow’s eCommerce Conversion Optimization Best Practices Data Set and Report.