Some of the links on this page are affiliate links, which means that if you choose to make a purchase, I will earn a commission. This commission comes at no additional cost to you. Please understand that I have experience with all of these apps, and I recommend them because they are helpful and useful, not because of the small commissions I make if you decide to buy one. Please do not spend any money on these apps unless you feel you need them or that they will help you achieve your goals.
November 15, 2021
Your ecommerce home page represents a critical point in the customer experience. As it’s often the most visited page on your site, it’s a key opportunity to build trust and drive sales.
But creating a home page can be challenging, especially if you have hundreds of products and dozens of collections. Which ones should you promote? How do you lay out the page? Many stores ruin the experience by adding too much to the page or failing to add the right elements. Users develop an opinion of your site in about 50 milliseconds, so you have to get this page right from the get-go.
In this article, we’re going to teach you how to design a winning ecommerce home page. We’ll go over some best practices to help you choose the right elements and give it a professional, high-converting design.
Before you start slapping elements on a page, the first step is to consider your objectives. What do you want your home page to accomplish? For instance, you might want page visitors to…
Or you might have other objectives. It all depends on your business and needs.
Naturally, some objectives are more important than others, so your next step is to rank your objectives according to their importance. Identify what’s most important to your business, second most important, third most, etc. The most important elements on the page (the ones that deserve the most attention) should be the largest and highest.
For instance, your menu bar that helps customers find products is obviously one of the most important elements on your page, so it should be high, just below the logo. If you’re trying to push the latest promotion, it deserves the spot just below your header.
Your results may vary, but many successful ecommerce stores lay out their home page like this:
It’s tempting to pack everything you want to say into your home page, but this is rarely helpful. You create a painful experience for your users if you force them to wade through complexity.
In a study by Google, researchers found that users judge websites in less than 1/20th of a second and often rate “visually complex” sites as less beautiful than simpler ones. This is because simple websites don’t require users’ eyes and brain to work hard to process information.
What does simple mean?
This also means you’ll need to be careful about what you display on the page. You can’t show off everything. Some stores like to promote best-selling products because they’re most likely to convert. Other stores like to promote the newest products or a selection of high-margin products.
Unfortunately, there’s no right answer here. You’ll need to experiment with the products and collections you display to find the combinations that generate the most revenue.
That said, we can say definitively that home page sliders/carousels - while once popular - are almost always a bad idea. Research shows they do more harm than good.
Your transactional menu refers to the menu that helps your customers explore your website. It has links to your collection pages or specific products. It’s important that this menu has more visual hierarchy (meaning it’s seen first) before other elements.
You don’t need to draw much attention to your content menus (with links to shipping pages, FAQ pages, account pages, etc.). Customers will look for these pages when they need them, so don’t distract them from your transactional pages that generate revenue.
How do you make a transactional menu stand out?
Notice how this menu uses a dark background to make it stand out. The less important links - Marketplace and Help & FAQs - are smaller and less noticeable.
Your value proposition is a statement that explains why a customer should choose your products. It expresses a clear benefit (or benefits) and speaks to the customer’s challenges.
Generally, shorter value propositions are better. You want it to be something your customers understand quickly and remember. Here are some examples:
Place your value proposition somewhere above the fold. That is, your value proposition should be something your customers see right away without having to scroll. After all, this is the most important statement you want your customers to read.
The different content areas of your site should be visually separate from one another. This helps the shop visitor understand what's related and what's not. Cluttering your elements together is a surefire way to overwhelm your customers.
For instance, if a shopper sees some promotional copy (like “10% off new arrivals”) and a row of products close by, they might assume the promotion applies to those products. You could make these blocks distinct by putting space between them, using lines to create dividers, or giving one a background or border and not the other.
Check out Man Crate’s simple and easy-to-follow layout. The columns and rows are easy to understand. You know right away, for instance, that the “The Best Gifts for Men” call-to-action relates to the image on its left.
Like a lot of stores, you probably want to create links to your collection pages. It’s important that each of these links comes with a picture or thumbnail to give shoppers more information.
Casper does a great job of using simple but descriptive images for their category links. No one is confused about what they’ll find.
It's important to make your site as intuitive as possible. Shoppers should not have to think about how your site works to navigate it. This is why buttons are almost always preferable to links for calls-to-action (CTAs). Buttons are designed to be clicked. They look like they should be clicked.
Ideally, your CTAs should be the most obvious elements on the page. Use visual cues to make your CTAs stand out. A colored background, generous whitespace, a subtle drop shadow, or a simple icon can go a long way toward making your shoppers understand that they are supposed to interact with the CTA. You can also highlight CTAs by pointing arrows at them or having people in images look at them.
Most importantly, limit your CTA usage. Secondary CTAs are fine, but they should be smaller and less noticeable (remember to respect your hierarchy).
Here’s a bad example of CTA usage. Notice how there are five CTAs above the fold. Those big and bold green buttons lose their effect when there are so many of them. Users won’t perceive it as a cue to take action. Instead, it’s just clutter.
Bliss, on the other hand, uses a clear CTA in their top row. It’s the first thing you notice on the page!
Even though your home page doesn't directly sell any products, it's still a critical point in your customers' ecommerce experience. As a window to the rest of your site, a poorly developed home page could prevent your shoppers from fully exploring your online store. Use the best practices we explained above to create a high performing home page that gives your customers a positive experience.
January 24, 2022
January 10, 2022
December 11, 2021