The Ultimate Guide to Creating the Best eCommerce Checkout

The checkout is the most important part of your website. If you’ve managed to get them this far, you’re on the right track but if your checkout isn’t 10/10, they’re going to abandon you. We’ve got the ultimate guide to creating your eCommerce checkout so you never lose another customer at the last stage again. (Well, maybe not ever again but it’s pretty good).

Why Are People Abandoning Carts?


As we discussed in our eCommerce Abandoned Cart White Paper, there are 8 main reasons people abandon their carts:


  • – Shipping costs
  • – High purchase costs
  • – Lack of payment options
  • – Lack of credibility
  • – Estimated shipping time
  • – Complicated checkout process
  • – Lack of discount codes
  • – Shopping cart used for research rather than purchase


Keeping this reasoning in mind, we can use this to craft the perfect eCommerce checkout.

eCommerce Checkout Solutions

Avoid Compulsory Registration

ecommerce checkout register


So many eCommerce companies ask you to sign up before you purchase, or even worse – they make it mandatory. 1 in 4 customers abandon online purchases due to forced registration. It’s easy to understand why marketers want you to do it, but it’s only really benefitting them.


You should avoid compulsory registration for your customers at the check out. It might only take two minutes, but that’s still too much effort and it slows down the conversion process. By offering a prominently placed guest check out option you avoid the risk of them getting irritated and leaving. Don’t even use the word ‘register’, say ‘new customer’ or something else instead. Once they fill in their details offer a ‘create an account’ button at the end, and the only additional info they need to enter is their password. It’s a much more user friendly approach. An easier alternative to this is to offer them the option to sign up with social media which only involves a couple of clicks.


If you need more convincing, then take usability guru Jared Spool’s word. He worked with a major eCommerce site and conducted usability tests with people who needed to buy from the website. He asked the customers to make a shopping list and buy from the website and they were even given the money to do so – all they needed to do was complete the purchase. But that didn’t work out.


By removing this forced registration, they increased sales by $300 million. Eliminating the forced registration means you also get rid of that annoying multiple accounts scenario. Let’s face it, we’ve all forgotten our password and made a new account instead. So just avoid all the cons altogether!

Form Filling

Remove Form Boxes

Don’t bother adding in fields to your checkout you think will be important for back end marketing needs. You need to minimise the amount of form boxes as much as possible. Keep the boxes you do use absolutely essential to the checkout process. Every unjustified field you add lowers your chance of a conversion. Add a small checkbox asking if their billing address is the same as the shipping address so they don’t need to fill the information in twice.

Provide Inline Validation or Real Time Error Notifications

Instead of showing the errors after they’ve submitted the form, make sure error notifications come up in real time. This saves them time and it makes sure you never lose accurate information again.

Field Arrangement and Autofill

A good example of this would be placing the postcode field first so that the city and state field can be autofilled if possible. Peep Laja actually tested this on TrafficSafetyStore.com and found it gave them a conversion boost of 38.74%.

Keep On Track

Remove Distractions

Any elements of the checkout that don’t move the customer towards purchase should be removed. nameOn tested their checkout page without any distractions and found that their conversions increased by 11.40% and their sales increased by an estimated $8,500 per month.

Remove All Navigation

Allow your customer to focus on the task at hand. Navigation options distract them, so remove them all except for the click to “Home” and the button to proceed to the next step in the checkout process.

Use Copy Relevant CTAs

The CTA colour should be directly contrasting to the background colour of your page. It has to stand out, that’s the basic rule of calls to action. The text should clearly illustrate what customers should expect once they’ve clicked it.

Purchase Anxiety

Address Customer Concerns

Customers can become hesitant when they’re unsure of the privacy policy, returns policy or perhaps product-specific concerns. Restore confidence in your customer by addressing their concerns with small badges reminding them of money back guarantees or other policies. You should understand your customers conscious and subconscious concerns about purchasing from you.

Fix Page Load Times

There is data to suggest that every single second of delay on a page loading reduces your conversion by 7%, and we mentioned in one of our weekly roundups recently that the average page load on eCommerce sites is 4 seconds. Waiting for a page to load stresses customers out and causes a significant increase in heart rate, similar to what they experience when watching a horror film. Fix this issue at your back-end. If you do end up with inevitable waiting times, then show the loading time on the page so they don’t think the page has simply frozen and go back. Keep them constantly informed of what’s happening.

Add Recognised Trust Signs

In recent years people have learnt to be cautious, what with the presence of so many identity thieves or in the event of credit card fraud and spam. They don’t want to share their personal or payment information with just anyone, so help them trust you. Using recognised security seals such as Norton, McAfee and BBB have the best sense of trust and using these can increase sales from 4-6% according to Get Elastic.

Use Coupons Appropriately

The stagnant blank discount code box at the checkout is overused these days and customers don’t feel special anymore.


coupon code box


It’s distracting at best but customers will wonder why they don’t have a discount code and will leave your site to go find one, perhaps never to return. They might find a better deal on their search for your discount code, or just forget about their cart and before you know it you’ve lost a sale. It’s better to instead put a link there saying “Got a coupon?” and when they click it, it then reveals the box. Text links aren’t visually prominent but if a customer does have a code, they’re going to be looking for that link.

Add a Chat Widget

If there’s any time you should solve queries, it’s during the buying process. For this reason you should add a chat widget. Technical issues or confusion about what fields mean or certain terms should be solved immediately, and this is the best time to save a sale.


When They Add Items to the Cart

Make sure that when your customer adds items to their cart it’s obvious. So many sites mess this up by not showing proper confirmation or only showing small confirmation text that’s hard to notice. If they don’t know they’ve added it, they might add items twice and have to go back in and edit- a total pain. An animation is a good idea as the eye is attracted to movement. ASOS shows a small animated notification also:


added item confirmation


Having the “Pay Now” button in bright green is a good idea too. You could have the notification on the side of the existing page and keep them on the one they’re on, or you can direct them straight to their cart.


Advantages of keeping them on the same page include that they didn’t ask to move to another page, so there’s no irritating surprises when they have to go back. The other option is that you do direct them to the cart page, which is good because you’re directing them a step further to closing the deal, but that does mean you might be losing out on “items per cart”.


The option you should pick depends on your strategy and your industry, but keep in mind these two metrics: average transaction value and average quantity per transaction. If in doubt: test, test and test.

Utilise Persistent Carts



Persistent carts are one of the most valuable tools you can implement right now. 56% of consumers use the shopping cart to save products for later according to eMarketer. Persistent carts allow this to happen by letting customers return to their shopping experience without having to search for all their items again.


They follow the user across devices and provides continuity. Research from the University of Glasgow showed that 74% of online customers use shopping carts as their own personal “wish lists” so you can bet they’re counting on your site to carry the feature. And not just that, the National Mail Order Association found that 35% of shoppers take more than 12 hours to complete their purchase and 21% over three days. If your customer is going to take a while, then you definitely need this feature. You’ll be thankful you did.


Two providers of persistent cart features are Magneto and Shopify and at reasonable rates. Check them out.

Displaying Cart Contents Well

The key principles of displaying the items in their cart are clarity and control. Make sure that it’s easy to understand what they have in there and the final cost with any taxes. Control is important because they want to be able to make changes easily – quantity, removing or changing sizes etc. Coming back to ASOS, they pretty much nail it on their product image display, clear calls to action, showing the payments they accept, showing the total price and ability to remove and save for later.

Check Your Visual Hierarchy

Visual hierarchy is a deeply important aspect of good web design. It’s the order of which the human eye sees things, and you don’t want things standing out that don’t need to at your check out. When setting up your visual hierarchy you should consider the CTA most relevant to your page’s objective, the number one thing on your list should be the “continue to checkout” button and you should have one above and below the cart. You’ll notice our ASOS example earlier had this. Hierarchy does not just come in the form of size, but also colour. If you need inspiration, surf the web and rank web pages that you find as practice.


Confirm Estimated Shipping and Times

No one likes to play the waiting game. You can give your customers peace of mind by letting them know when they can expect their delivery. And what if they need their item by a certain date? Make sure your communication is clear, you don’t want to leave them on bad terms.

Free Shipping

Are you able to offer free shipping? If not, then offer it with a clause. Alternatives to free shipping completely are:


  • – Offer free shipping day/week during peak season (for example a 5 day shipping week between 17th Dec and the 21st)
  • – Offer shipping benefits to members only – Amazon Prime for example
  • – Offer free shipping with a minimum order threshold


If you can offer free shipping, is it really working? A poll by Practical eCommerce has revealed that offering free shipping in some form is beneficial for over 40% of respondents, and the average sale amount from these was more than $20. You can calculate yourself if it’s working for you by perhaps using Shopify and Marketbrain. They have a cool free app to check if it’s a good option for you.


If you choose to avoid free shipping altogether then you should be completely transparent with your charges and reveal them on the product pages. Consider putting a shipping cost calculator on the page like Ozscopes:


shipping cost calculator

Your Checkout

Credit Card Info Last

Put Cialdini’s principles of commitment and consistency into action by having people complete their billing information last. What does that mean? When people start doing something, they feel like they should finish it. They’ve already been asked for their name, address, email, billing and more, so they may as well seal the deal. Start the easier fields first and ease them down the funnel and before they know it they’re almost done.

Credit Card Style Payment Form

Adding a real life touch and designing the payment form like this is a far more user friendly payment method:


credit card style payment


It just looks better, and no one likes to fill in unnecessary information (start date for example). If you want this, then head on over to Skeuocard by Kenkeiter and get this payment layout on your website for free! You’re welcome.

Store Credit Cards In Your System

Dealing with PCI compliance and living with the possibility of being hacked isn’t too good, but you will make so much more money off of returning visitors if you implement this. When you don’t need to enter your payment information anymore, purchasing becomes a one click job. Think Amazon. Returning visitors are more likely to buy than first-timers, you know that. So why not make it even easier for them to buy?

Rumour has it, only the best marketers sign up to our blog subscription…


Alice Page

Digital Project Manager

Digital project manager, Alice smashes PPC campaigns and getting the developers into gear...