If you’ve been running an online store for any time at all, you would know there are so many moving parts in an ecommerce business. There is no ‘one thing’ that guarantees success.

However, when it comes to your website, the way you design your navigation and your homepage goes a LONG way to increasing conversions

Basically – having an awesome product is not enough. If your website is slow or difficult to navigate or the checkout process is clunky, then customers won’t buy. 

After 20+ years working in Ecommerce design and marketing, I’ve learned a thing or two about how to design a high converting Ecommerce homepage!

Here are 13 ways to design a high converting Ecommerce homepage

Follow these 13 steps to create your own high converting Ecommerce homepage

  1. How visitors read your site
  2. Establish your point of difference
  3. Make sure your navigation is intuitive
  4. Keep design simple (not cluttered or busy)
  5. Use beautiful styled images
  6. Show your most popular categories
  7. Include key information customers want to know
  8. Allow customers to shop your most popular products
  9. Show social proof!
  10. Clearly display shipping costs
  11. Display further information in the footer
  12. Design for mobile first
  13. Make sure your homepage loads fast!

1. How visitors read your site

This may seem like an odd point to start with, but it’s necessary to consider. 

In the western world, we obviously read left to right and top to bottom. 

But with that said, what information should you display top left and in the middle and down to the bottom right of your home page? Most people get it wrong. 

Follow your buyer journey

The buyer journey begins with awareness – a potential customer is aware that they need to solve a problem (or desire – hello hot new pair of jeans!). 

Then they start looking at options and begin the consideration process – comparing different products and thinking about what they want to buy.

Then they make a decision and complete their purchase (hopefully with you). 

What this means for your home page

Begin with your logo (and tagline if you have one) in the top left corner. This will display centre top on mobile. 

Communicate your most important product value statement (more of that next) and invite people into your store if they’re ready to buy.

If they’re not ready to buy yet, clearly they need a bit more information during their ‘consideration’ stage. 

What do your customers typically need to know, understand and believe in order to want to buy? 

Do they want more detail about ingredients or how it works? 

Or, perhaps customers need help figuring out what to buy, so show them your most popular products. 

Make sure you have some social proof in the form of customer testimonials and, if possible, show a star rating on the most popular products. 

2. Establish your point of difference

Some online stores really nail this because their product is so unique that it is obvious to the customer how it is better than other options on the market. 

For example, my client Wendy from Up On The Rooftop sells this fantastic product called an ‘Olla’ (pronounced ‘Oy-yah’). It’s a clay pot that you fill with water and bury in your garden and it keeps your plants watered without wasting too much water (or forgetting to water, if you’re a black thumb like me). SO much better than using a hose or an automatic sprinkler system! 

But if your online store is in a more competitive or mainstream product category, like fashion, or my client Babiators who sell kids’ sunglasses for example, then you need to find a way to communicate how your store is different or better than your competition. 

This could be a combination of the products you curate in your range, or the service you offer along with the products you sell.

3. Make sure your navigation is intuitive

I have seen online stores without a ‘Shop’ link in their top menu. 

I’ve seen stores with a gazillion links in their menu (try looking at that on a mobile!). 

I’ve seen stores with too little in their menu (like, they only have ‘SHOP’ in their menu, and then you have to sort through absolutely everything in the store to find what you want). And probably everything in between.

Bottom line is: don’t make it difficult for customers to find what they’re looking for!

Help customers find things quickly

Your goal as an Ecommerce website is to help customers to buy from you as fast as possible. For that reason, you want to keep your top menu product-focused. 

Other links, like Blog and Wholesale and About Us, can go in the footer menu with your contact and shipping details, privacy policy and other terms and conditions. 

Break your shop menu into logical categories. Don’t include every single product in the top menu – that’s too overwhelming. 

If you have a very large range, use a ‘mega menu’ that expands to show the categories and options within each category, like my client Milkbar Breastpumps. Also have a Search bar and filter (these are not necessary if you’re a brand with a small range.)

4. Keep design simple (not cluttered or busy)

Have you ever sat down with some printed magazines or in-store catalogues? If you’ve never done this before, it’s a useful exercise.

Catalogues that are really cluttered and completely covered with colour, text, BUY NOW messages and images all over the place are overwhelming. It’s difficult to focus or figure out what you want.

Whereas, catalogues that have a clean, simple design, with a lot of white space and a simple layout of text and images, are very easy to understand. 

It’s the same with websites. 

In fact, studies have shown that the #1 factor that influences conversions is clarity. 

Your high converting Ecommerce homepage will immediately make obvious: what do you sell, who is it for, and how do they get it.

Follow the KISS principle (Keep It Simple Stupid!) with your design. White space, beautiful images, headings and text that are clear and simple.

Also, use common design and layout principles so that people don’t have to use too many brain cells just trying to figure out how to navigate your site!

5. Use beautiful styled images

That old phrase, “an image speaks 1000 words” is so true. 

Truly – Google might read, but humans often don’t anymore!

Use beautifully styled images that showcase your products, particularly if you can show them in use on actual human beings that resemble your ideal customers.

Your website visitors will grasp what your product is, how it works and that it’s for people like them MUCH more quickly if you show it to them visually.

Showing styled images like these from my client MadMia also helps spark an emotional connection with your website visitor. 

Trust me when I tell you – customers almost always buy from emotion, not from logic! Using the right images is essential when designing your high converting Ecommerce homepage.

6. Show your most popular categories

By ‘show’ your most popular categories – I literally mean, show gorgeous styled images with a title and SHOP button overlaid on them. 

Yes, you might feature your product categories in your top menu (see point 2). 

But, as mentioned above, lots of people don’t read. Show it to them visually instead, like this example from No Nasties

7. Include key information customers want to know

When designing your high converting Ecommerce homepage, don’t force people to go hunting all around your website to find what they need to know. Lay it out for them right from the home page.

Do you sell something that is new or different and requires some level of education before customers are willing to buy? 

For example, reusable nappies is gaining popularity but there is still a good portion of the market who have no idea what this product is or how it works.

Another example is natural skincare, body products or makeup. Customers in these sorts of categories often have allergies or belief systems that mean they are looking for detailed information and transparency around ingredients. This was the case for my client Beetanicals.

What about product categories that are a bit tricky to sell online, like footwear, sunglasses or swimwear? Customers often need help figuring out what to buy, and will have concerns about the impact of making the wrong choice. 

Make sure you address all your customers’ key information requirements. You can do this with images and text and links to further information pages elsewhere on your site, or with video like Babiators, or a mix of both.

8. Allow customers to shop your most popular products 

You’ll often see online stores with a section called ‘Shop Our Most Popular’, or ‘Shop Customer Favourites’ like my client Happy Tummies, and this is a really good idea.

If customers are ready to buy now, you want to help them add products to their cart right from the home page. 

Don’t force them to have to go into your store and find them that way. Instead, keep the distance from homepage to checkout as short as possible!

9. Show social proof!

By this point on your home page, you’ve hopefully got people pretty close to wanting to buy. 

If they’re still not entirely convinced, you need to take away some of their perceived feelings of risk.

Showing social proof has been shown to be very effective at this stage, so you want to include it when designing your high converting Ecommerce homepage. 

If other customers love your stuff, their opinions will alleviate any concerns around ‘will I like this?’ and will also reinforce a new customers’ decision to buy.

You can show social proof in two ways – No Nasties does both:

Display a series of real customer testimonials (bonus points if it includes a photo of the customer with your product!).

And show star ratings on the products displayed in your ‘Shop Our Most Popular’ section. 

10. Clearly display shipping costs

Statistically, the biggest reason customers will abandon their shopping cart is due to unexpected shipping fees. 

You can avoid this by clearly displaying your shipping costs, and I would recommend having a flat rate fee (even if there are conditions on that flat rate). 

Also display any shipping incentive, such as ‘free shipping for orders over $100’. 

Most online stores display this information in a small header right at the very top of the home page, as Babiators does. (Make sure you check what this looks like on mobile as well as desktop!)

11. Display further information in the footer

It’s common practice to find further information in your footer menu. Because it’s common practice, customers expect to look there for this information. Make life easy for them by doing what they expect.

Information to link to in your footer menu includes: 

  • About us
  • FAQ’s 
  • Contact details (FYI – put this under your FAQ’s – you’ll prevent a whole lot of common customer service enquiries coming through!) 
  • Wholesale information 
  • Blog 
  • Shipping and returns
  • Privacy policy
  • Site terms and conditions

Happy Tummies is a great example of this.

12. Design for mobile first

These days, the clear majority of website visitors are browsing your site from a mobile device. 

The proportion of customers purchasing from their mobile is also increasing dramatically each year.

Even more interesting is that more customers will buy instantly from their mobile device, whereas they can take up to a month to come back and complete a purchase on a desktop.

In the near future, it is expected that more and more customers will be browsing and shopping from their mobile.

Yet the vast majority of us are designing or working on our websites on a desktop computer. 

So, when designing your high converting Ecommerce home page, it is absolutely essential that you review your website design, navigation and functionality on your mobile phone!

MaterniTea‘s website works beautifully on mobile:

13. Make sure your homepage loads fast!

Statistically speaking, there is a direct correlation between page load speeds and conversion rate

If your home page takes 2.4 seconds to load, you can expect a 1.9% conversion rate.

If your home page takes a little longer to load at 3.3 seconds, you can expect your conversion rate to drop to 1.5%.

At a page load speed of over 5.7 seconds (still not that long really!), your conversion rate will drop to under 0.6%. 

Dismal! 

You need to test your page load speed on both desktop and mobile, for reasons that should be obvious after reading point 12 above. 

There are various ways to speed up your page load time. The most obvious is to reduce the size of your images on the home page by compressing them. 

On Shopify, we also recommend using a premium theme that is built for speed, such as Turbo or Flex by Out Of The Sandbox

Need help designing a high converting website?

Not all websites are created equal and this is especially true when it comes to eCommerce.

The whole purpose of having an eCommerce website is to convert as many browsers into buyers as possible, as quickly as possible, right?

We work with clients on the Shopify platform to design an eCommerce shopping experience that’s intuitive and delightful for your customers.

We take your customer’s buyer journey into consideration, and we employ best practices around user experience, conversion optimisation, and search engine optimization.

My experienced Shopify website design team has the experience and know-how to ensure your website’s conversion potential.

In fact, the majority of our clients enjoy eCommerce conversion rates of 2% or higher, with many converting at 3-5% or more!

Click the button below to schedule a time to speak with us about your website design requirements.

Click here to find out about working with Catherine Langman

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.