Optimizing your Footer & Header: Best Practices and Functionality

When visitors arrive at your site, they expect to see a header that allows them to navigate from page to page. As they scroll towards the bottom, they also expect a footer at the end of each page, which also contains important information.

Posted 5 years ago by Tatiana Dudin

But what does each contain and why are they so important to an e-commerce site? In this week’s article, we answer that question by exploring the optimization and custom possibilities of both headers and footers. Get ready to explore headers and footers from top to bottom.

Optimizing Headers

A header can include a number of relevant elements. In addition to the obvious menu links to other parts of the site, a header may include a logo, search boxes, and cart or promotional information. Fitting all those in might make your header a little crowded, so it’s up to you, as the store owner, to decide which ones are most important. But whichever elements you decide are best for your header, one thing must be the same across all sites – easy to read fonts and colors.

Hover or selected effects are another part of well-designed headers. They act as a guide and allow users to know exactly where they are on your site. These effects should be easily visible but not distracting.

Sticky vs Static

A sticky header remains at the top of the page as the user scrolls. The theory behind it is that it creates a sense of trust between the site and the user by giving them control to navigate to other parts of the site no matter where they are. Thus, they feel safe exploring your whole site while knowing they don’t need to scroll back up to navigate to other links. Sticky navigation like this is now a design standard and works best on actionable sites, such as e-commerce stores.

A static header, on the other hand, forces customers to scroll all the way back to the top if they want to explore another section of the site, leaving them frustrated.

“A sticky header creates a sense of trust between the site and the user by giving them control.”

Promo Bar

The header is the ideal place to make announcements, promote sales or free shipping and share any other important information with your visitors. A promo bar can be completely customizable and have more than one announcement! They will simply seamlessly transition from one to the other and the movement will draw the visitor’s attention to the promotions.

Shopping Cart

A shopping cart that shows your visitors what’s in it without taking them to the cart page is a must. Whether it’s an Ajax Mini Cart or a Slide Out Cart, these features allow users to feel in control. You can even go a step further and add a Cart Total Price, so your visitors can see exactly how much their order will be wherever they are on your site.

Footer Optimization

If your site visitor has scrolled to the bottom of a page, he or she will arrive at the footer. Less intrusive than the header, it is nonetheless an important part of any e-commerce website.

A footer can contain elements such as a sitemap, social media icons, a newsletter signup box, or graphics of accepted payment methods, partners or awards.

Social Media Icons

Social media icons are standard web-design practice and visitors will intuitively know that if they want to check out your store’s social media, they must navigate to your footer. Include these icons and make sure the link opens in a new page, so the visitor doesn’t navigate away from your store.

Newsletter Sign Up

If you don’t already have a newsletter to send to your customers, you should. It builds brand identity and is an excellent way to let visitors know about new products and announcements. To entice customers to sign up, consider placing a sign-up box in the footer to collect customer emails you can later use for marketing and communication purposes.

Back to Top Button

Just like a sticky header gives users full control of where they want to go, a back-to-top button allows them to smoothly go back to where they started scrolling. These days, the UX of an e-commerce site could make a difference between making that sale or not. If your customers are having a smooth experience while browsing your site, they may be more likely to buy your product.

Security Badges

Let your customers know that their information is secure when they shop with you. Consider adding a security badge to create trust and show that they are protected.

In Conclusion

Think of the header and footer as a frame that plays an important part in the overall design of your website. They give you a chance to communicate and connect with your visitors, whether it’s through email collection, announcements or promotions. They are also a tool visitors will use to get around your site, so consider including a sitemap in your footer as well.

Check out all the ways to customize your headers and footers in the links below and happy customizing!