Skip to main content

10 Ways to Increase your Ecommerce Conversion Rate

CRO Report

There are hundreds of ways you can increase your ecommerce conversion rate, and these can range from something as simple as making your ‘Add to Cart’ button more prominent to completely redesigning your homepage. 

In this article, we use real-life examples to explore 10 proven strategies that will increase the likelihood of your website visitors completing a purchase.

1. Homepage – Type of Website

Users will typically rely on your homepage content to understand which type of website they are on and what they can expect to find. One of the most common issues we find on homepages is that they only focus on specific product groups, such as featured products, the latest deals, or seasonal trends. While it makes sense to push your products that are on sale, or heavily promote products that are in-season, it is important to also clearly show users a broader range of products available.

When websites only display a limited product range on the homepage, users will often underestimate the full product range and assume that the website doesn’t offer what they are searching for. For example, if the homepage only displays your coats and jackets collection, then the user won’t easily see that you also sell dresses, shoes, and t-shirts and assume that you don’t offer these products.

This can have a long-term negative impact if that same user is looking for a similar item in the future and they might not even consider your website because they already assume that you don't sell it.

Bad example: White Stuff

On the White Stuff homepage, users are only shown the new in collection and the Christmas shop collection. There are actually over 100 product categories available on the website but this isn’t reflected on the homepage. While we wouldn’t suggest displaying all 100 categories, we would recommend displaying several of the best-selling categories.

White Stuff Homepage
 

Good example: Wayfair

On the Wayfair homepage you can immediately see their Black Friday sale, along with several of their categories, such as rugs, pet, and kitchenware. They feature multiple product categories, allowing the user to get a more in-depth understanding of their broad product range.

 Wayfair Homepage

 

What can you do?

In addition to displaying any current deals and featured products, your homepage should always prominently feature several of your top product categories.

2. Product Listings – Distinct Hit Areas

On product listing or category pages, users are often confused about what they can click on to find out more about a product – can they click the thumbnail? The title? The price?

Websites will often have unclear and limited hit areas on product listings and users get confused and frustrated because they can’t figure out how to click on your product listing and view the product page. 

Bad example: Staples

On the Staples product listings, the only clickable element to view the full product pages is the product title. The image, price, and white space are all not clickable, which offers the user an extremely limited hit area.

Staples Distinct Hit Area

Good example: River Island

On the River Island website, the entire product listing is clickable. The user is able to click on the title, product image, price, and white space to view the full product page.

River Island Distinct Hit Area

What can you do?

Ideally, you should make the entire product listing clickable, including the whitespace that separates the thumbnail, price, and product title. If you aren’t able to do this, then you should at least make the thumbnail, price, and product titles clickable.

3. Product Listings – Pagination & Infinite Scroll

Ecommerce websites often have thousands and thousands of products, and users can end up scrolling through hundreds of products on the listing pages. There are three common ways to display and load lots of products on listing pages:

  • Pagination
  • Infinite scroll
  • ‘Load More’ button

Both pagination and infinite scroll have usability drawbacks. Pagination is a particular problem on mobile devices as the page numbers and navigation elements are often placed too close together, which can make it difficult for the user to click on the correct page link and potentially not view your full product range. Pagination also causes an issue on both mobile and desktop as it typically results in a new page load and this can lead to users getting impatient waiting for a new page to load and leaving your website.

Infinite scroll removes the issue of waiting for a new page load and often leads to users scrolling through more products than they normally would with pagination, but it still has usability drawbacks. With infinite scroll, users aren’t able to reach the footer of your website; each time they reach the bottom of the product list, more products are loaded, and on websites that have hundreds or thousands of products, it can make it extremely difficult to reach the footer. 

But why is this a problem? There are usually navigational links in the footer that link to vital information, such as delivery details, returns policy, and contact information, and users also typically expect to find this information in the footer. If the user can’t easily find this information, particularly if they are a first-time customer, it removes an element of trust and can cause them to abandon their purchase because they can’t find the information they need.

Bad example: Cotswold Outdoor

The Cotswold Outdoor website uses pagination to navigate through 100’s of products. In this particular example, there are over 100 pages that a user is able to click through, and the additional 3rd digit makes it even more difficult for the user to click on the correct page link as they are placed extremely close together.

Cotswold Pagination

Good example: B&Q

B&Q uses the preferred option of the load more button to allow users to easily navigate through their product listing pages, and this allows the user to be able to access their footer.

B&Q Load More Button

 

What can you do?

Having a ‘Load More’ button combines the benefits of pagination and infinite scroll. The ‘Load More’ button allows users to view more products without a page load, and allows users to easily reach the site footer.

4. Product Page – Compatible Products

Many products on ecommerce sites will often have a compatible product available that a user might be looking to buy in addition to the primary product, e.g. if a user is buying a mobile phone, they may also be looking to buy a phone case.

By suggesting relevant, compatible products, you can easily encourage users to buy more items from your site and you can also enhance the user’s overall experience.

In cases where compatible products are not shown on the product page, we have found users will search a site to try and find it. As compatible products are often in a different category, it can be difficult for the user to find what they’re looking for, and we have seen customers abandon their purchase because they could not find the compatible product, even when it was available to buy.

Some of the most common issues we see on product pages are that no additional products are provided at all, only alternative products are shown, or completely irrelevant products are shown. If a user cannot find the compatible product and if they believe it is vital to the purchase of the primary product, they will likely abandon their purchase.

Bad example: Topshop

Topshop is only showing alternative products on this product page, and there is a compatible product available to buy on their site. In addition to displaying the recently viewed products, Topshop should ideally be displaying the matching bikini bottom on this page too.

Topshop Compatible Products

Good example: Argos

Argos show multiple products that are compatible with the primary product. 

Argos Compatible Products

What can you do?

If your ecommerce store sells products that also have compatible products available to buy on your site, you should include a cross-sell section on your product pages to display these products, e.g. you could have a ‘Wear It With’ section or a ‘Often Bought Together’ section.

5. Product Page – Alternative Products

In addition to displaying compatible products on your product pages, it is also beneficial to display alternative products; products that are similar to the primary product but are in a different style, colour, price range, etc. 

On websites where alternative products are not displayed, we have found that users will either leave the site or start their search again and navigate around the site to try and find a more suitable product. This forces the user to explore generic product listing pages that can contain hundreds, or even thousands, of products, and they will often become impatient having to do this repeatedly.

Bad example: Oasis

Oasis don’t show any secondary products at all on their product pages.

Oasis Alternative Products

Good example: River Island

River Island provides both compatible and alternative products.

River Island Alternative Products

What can you do?

You can enhance user experience by displaying an alternative products section on your product pages so that users can quickly see several alternative products without having to start their search again. One way you can do this is by including a ‘You May Also Like’ or ‘Similar Items’ section.

Please note that the compatible and alternative products should always be displayed as secondary products on the product pages, their images should be smaller than the primary product and should not distract the user from the primary product.

6. Cart Page – Order Total

The cart page on many ecommerce stores will often only display the cost of the products a user is buying, and it will not include the delivery cost or indicate that delivery is an additional cost.

Users want to know what the order total is before they start filling out any of the checkout form fields, they do not want to have to fill out multiple form fields to then find that the cost of delivery is too expensive. By not displaying the total cost on the cart page, users are more reluctant to proceed to checkout and may abandon their cart if they aren’t able to see how much they are actually going to be charged.
 

Bad example: Animal

Animal don’t display the delivery cost on their cart page. They also list the price of one product twice, which may lead to the user assuming that they will be paying both amounts rather than the actual amount.

Animal Cart Page

Good example: Apple

Apple includes the delivery cost on their cart page, even though it is free. This makes it clear to the user that there will be no surprise delivery costs that may be added later on in the checkout process.

Apple Cart Page

What can you do?

You should always include the cost of delivery on your cart page, even if it’s free. If your website has tiered pricing for delivery, you should display the lowest cost available on the cart page and label it clearly.

7. Cart Page – Checkout Button

The checkout button on the cart page should be clearly visible and easily accessible to the user at all times. However, the checkout button on the cart page is often placed at the bottom of the page, usually at the end of the list of products and below the order total details.

When the checkout button is only shown at the bottom of the page, it can cause it to not be viewable above the fold, particularly when there are multiple products in the cart that will end up pushing the checkout button even further down the page. 

The checkout button can also appear at the top of the cart page, but as a user scrolls down through the cart page, the button disappears out of view.

Both of these scenarios can lead the user to accidentally miss the checkout button and therefore not proceed to checkout.

Bad example: Disney

The checkout complete button is not visible in the viewport. As there is no sticky or secondary checkout button, the user is also able to scroll past the checkout button so that it is not visible when the user reaches the bottom of the checkout page.

Disney Cart Page

Good example: GAP

GAP’s checkout button is immediately visible on the checkout page. They also implement a sticky checkout button once the user scrolls past the initial button, so that it is always visible.

Gap Cart Page

What can you do?

Ensure that the checkout button is immediately visible in the viewport by displaying it at the top of the cart page. If there are multiple products in the cart, or if the cart page is long enough so that the user is able to scroll out of view of the button, then you should also add a second checkout button at the bottom of the cart page.

Or, you can use a sticky header or footer that displays a checkout button and will constantly be visible as the user scrolls up and down the cart page.

Please note that you shouldn’t display more than one visible checkout button on the cart page. This can lead to confusion as users aren’t sure what the difference is between the two buttons and which one they should click on. 
 

8. Checkout Process – Guest Checkout

Websites where users cannot checkout as a guest and are forced to setup an account to proceed with their purchase will often have a much higher checkout abandonment rate than website’s that offer a guest checkout.

Forcing a user to create an account before they are able to make a purchase on your website can lead to abandonment because they:

  • Don’t see the benefits of opening an account
  • Simply don’t want another account and password to remember
  • Assume they will receive marketing spam if they sign up to an account
  • Perceive the account setup to be significantly slower than a guest checkout

Bad example: Topshop

Topshop requires users set up an account in order to complete the checkout process, and they also don’t list any benefits of creasing an account.

Topshop Account

Good example: New Look

New Look allows users to checkout as a guest and offers the option to create an account at a later stage.

New Look Guest Checkout

What can you do?

Always offer a guest checkout!

It is also advisable to offer a guest checkout even if a user already has an account on your website, and they either don’t want to login or can’t remember their login credentials. Forcing a user to login when they have forgotten their credentials causes unnecessary friction in the checkout process, and forces users to leave the site to access their password recovery email. 

If it important to your business that users open an account, you should delay this step until the order confirmation page and always lists several benefits of opening an account, e.g. being able to track an order.
 

9. Checkout Process – Coupon Fields

While the coupon field is important and should be easy for users to find, you should also make sure that it does not interrupt the checkout flow for the majority of shoppers. The most common issues we see with the coupon field are displaying the form field for the user to fill out or drawing too much attention to the coupon field, for example, by using a contrasting colour. 

When a user sees a coupon field during the checkout process, they will often leave the website to search for a coupon code, which might not even exist, and end up abandoning their purchase because they can’t find a coupon code. 
 

Bad example: River Island

River Island display the full coupon field to users. They also style the coupon button differently to their primary buttons, which draws even more attention to it.

River Island Coupon Field

Good example: ASOS

ASOS hide the coupon code field behind a link.

ASOS Coupon Field

10. Checkout Process – Review & Confirm Order

During the checkout process, the review order page is often misinterpreted by users as the order confirmation page – two very different pages. This can lead to users thinking that they have already placed their order, when they are actually only reviewing the order, and unintentionally abandoning their purchase. 

This mistake can happen due to several factors, and one of the most common issues we see is that the ‘Complete Order button is placed at the bottom of the review order page. Placing the ‘Complete Order’ button at the bottom of the review page can often mean that the button is below the fold, meaning it is not immediately visible, which leads to users accidentally missing this vital step and not completing their order – although they will think that they have!

Bad example: GAP

On GAP’s checkout review page, the checkout button is placed below the fold.

Gap Review Order Page

Good example: Marks & Spencer

Marks and Spencer place the complete purchase button at the top of the checkout review page, and it is also styled in a way that attracts the users attention.

Marks & Spencer Review Order

What can you do?

Make sure that the ‘Complete Purchase’ button is immediately visible on the order review page by placing it at the top of the page. This makes it clear to shoppers that the checkout is not yet completed.

Summary

By implementing the above changes on your website, you will hopefully see an increase in conversion rate and sales. As with all conversion rate optimisation, we would always recommend that you consider testing any changes to your website before fully implementing them.

There are hundreds of ways that you can improve your ecommerce conversion rate, and these are just 10 of them. When we perform a CRO audit, we look at over 600 elements that can impact your conversion rate, from the homepage all the way through to the checkout completion step, and even post-order elements, such as the email confirmation and order tracking.

Leave a comment...