How to Design an eCommerce Header for Better SEO, CRO, & UX
Your website header is one of the first things people will see when they land on your site, regardless of which page they land on or what medium drove them to your site.
Since it impacts every user who lands on your site, getting the header and main navigation menu right are absolutely imperative for eCommerce sites.
Some of the common design elements we’ll see in eCommerce website headers are:
- Search bar
- Main navigation menu
- A ribbon / announcement bar
- Unique selling points
Dick’s is taking an interesting approach here. They’re checking a lot of the boxes. They’ve got a big search bar that dominates the design and they’re advertising their shipping policy in an announcement bar. One thing they’re doing differently than most of the other sites being studied is that they’re using a hamburger menu regardless of the device type. This isn’t totally uncommon, but it’s not something that we love either. Hiding your main category links behind a click seems like it might hinder a users ability to browse and be inspired.
REI is doing a lot here with their header. They’ve got lots of top level nav links, and they’re not expanding any of them with sub nav menus on hover. They’ve also got far more non-shopping links in their header than we’d expect to see with most sites. And overall, we don’t love the white text on black background aesthetic. That said, it’s certainly not the worst header we’ve seen.
So much to love about the Etsy website. It just feels so intuitive and well designed. Clean, simple, minimalist. So refreshing. Of all the sites studied, this might be our favorite header. Etsy does use an announcement bar / ribbon above their header sometimes, but because of the nature of the business, they can’t use it to display shipping rates (it’s a marketplace in which sellers determine shipping details).
Sears’ header checks a lot of the boxes we’re looking for in an eCommerce header. It’s got a search bar, account sign in, shipping charges, and dropdown nav menu. In the interest of offering a sliver of constructive criticism, we don’t like the soft green-ish blue logo and it seems like it’s off brand with the rest of the site’s color palette. From what we can see, it’s the only place on the site that they use that color, and the more we think about it, the more it irks us.
Walmart’s header is somewhat disappointing from an SEO/CRO/UX standpoint. The Walmart team is attempting to use a fully responsive design here instead of designing for both desktop and mobile. A few things jump out at us about this header. First, this is by far the thinnest header we’ve seen in terms of the pixel height of the header. Secondly, even though Walmart is a highly recognizable brand, it still seems like a strange decision to omit the name of the website where the logo is placed. And further, it’s not uncommon for eCommerce sites to limit the width of their headers, but the background color should continue all the way across the screen. For a company as big as Walmart, this sure seems like something worth fixing. We could go on about what’s missing from this header… like labels on their icons, or how it’s almost universal in eCommerce to display shipping charges in the header, but we’re going to move on instead.
The Wayfair header adheres to a lot of best practices. They’re promoting sale items, they’ve got a big search bar, their nav menu is well structured and aesthetically pleasing, they make shipping details clear, and they link out to an important content silo (Room Ideas). The “search with photo” functionality is obviously above and beyond what is expected on a site like this. Overall, this is a great eCommerce website header.
Best-Practices for eCommerce Header Designs
Ok, we’ve looked at some examples of header designs from popular eCommerce sites. What can we take away from all this? Here are some of my takeaways:
- Definitely have a search bar, and make it a prominent feature of your header design.
- Some of these sites have a top level nav item dedicated to promoting discounted products or ongoing sales. It’s less obvious in the REI example, but Wayfair does this really well.
- Walmart is the only brand to use a full width header, meaning they’re not limiting the width of their nav like the other sites. Most sites will constrain their header elements within an 8 or 10 column div
- There doesn’t seem to be a clear consensus on the use of hamburger menus on desktop just yet. Personally, we prefer a more desktop-tailored UX on the main nav, especially if there are places to promote things like sales and clearance items. Hiding those promos behind the click of a hamburger icon seems unwise to us.