How to Design a Winning Ecommerce Home Page

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. 

Consider Your Business Objectives

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…

• Understand your value proposition
• Explore your newest products
• Subscribe to your email list

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:

• Top row (below header) - Latest collection or product
• Second row - Featured products that people love
• Third row - Featured collections that are popular
• Fourth row - A bit about your business (your story)
• Fifth row - Another featured thing, possibly something that’s coming soon
• Sixth row - Email capture / opt-in form

Keep Things Simple

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?

• Stick to basic rows and columns. Don’t get fancy with layout.
• Use a consistent color palette. Too many colors creates complexity. 
• Use easy to read typography
• Use traditional header and footer elements. 
• Put your logo and navigation links where users expect them to be. 
• Avoid too many moving graphics and bright colors. 
• Don’t be afraid to use white space in your design. You don’t need to cram content into every pixel.

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. 

Make Your Transactional Menu Stand Out

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?

• Make it larger in size than the content menu.
• Give it a background color, border, and bold type.
• Leave whitespace around it so it has some breathing room.
• Position it across the top of your home page, but below (or to the right of) the logo. 

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.

Establish Your Value Proposition

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: 

• Casper: “No More Sleepless Nights”
• Bean Box: “Give Your Mornings a Fresh Start”
• Death Wish Coffee: “The World’s Strongest Coffee”
• Man Crates: “Unique Gifts Guys Love”
• Tuft & Needle: “An Exceptional Mattress at a Fair Price”

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. 

Make Content Blocks Distinct

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. 

Use Pictures and Thumbnails for Collections

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. 

You see, humans are visual creatures. We are drawn to images. Images on a page receive 94% more views than text. Users can find items in a list 37% faster when those items come with images or icons. 

Casper does a great job of using simple but descriptive images for their category links. No one is confused about what they’ll find. 

Optimize Your CTAs

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!

Going Forward

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.

Also in News