How to Build the Perfect E-Commerce Checkout Experience

Dec 4, 2019 | eCommerce

Reading Time: 7 minutes
Kevin Fouche

How to Build the Perfect E-Commerce Checkout Experience

Posted by Kevin Fouche, Pixel Fish Director

Kevin handles the planning, design, launch and training of every website that Pixel Fish creates. He ensures that every website is highly engaging and aligned with our client’s goals. With over 20 years of design and web industry experience to draw upon, Kevin aims to pass on his knowledge to our clients and like-minded businesses wanting to grow their online presence.

In the world of e-commerce web design and full-funnel marketing, there is an immense amount of focus on getting customers to the buying stage but remarkably little focus on the checkout process itself. After all your hard work cultivating leads and guiding them toward that checkout button, a rough checkout process can turn customers away at the very last minute. Let’s look at How to Build the Perfect E-Commerce Checkout Experience.

This is one of the most frustrating and prominent causes of abandoned carts and almost-converted customers who never quite make it past the finish line. Many more customers make it through a challenging checkout but aren’t motivated to come back as return shoppers to repeat the experience. Undoubtedly, a smooth and even delightful checkout experience is the key to completing conversions and winning the loyalty of customers who return again and again.

That smooth checkout process can only come from excellent web design. Let’s dive into the essential features of a perfected e-commerce checkout experience.

1. Floating Cart

One of the best checkout features we have seen implemented to date is the floating cart. This makes closing the sale a part of the user experience when customers begin to shop. They can check their collection of items, their total and choose to check out at any moment.

Available on Every Page

The initial appeal of the floating cart UI is that it is available on every page on the site. This means that your shoppers can easily manage both their active search for new items and keep tabs on what they have already put in the cart. They can use the floating cart to compare items side-by-side or quickly open a new tab with an already carted item for a more detailed comparison. They can look for complimentary items to match what they already have, remind themselves of what they’ve carted, and confidently decide when they are ready to check out.

All without loading a new page or constantly switching tabs and refreshing to track their cart while shopping.

Quick-Manage Buttons

In addition to the visual access of the floating cart, quick cart control buttons are also incredibly handy. The ability to link to items, delete items, and increase the number of items in the cart are all incredibly useful for clients as they shop and customise their order.

Undo Feature

Rounding out the floating cart is a quick-undo button. Most importantly, it can allow customers to retrieve an item they have just deleted, making it easier to change their minds without looking the item up repeatedly.

2. Transparent Shipping & Service Fees

No one likes surprise costs, which is exactly why a lack of transparency in final fees can lead to cart abandonment. No one wants to carefully calculate their spending only to see additional shipping or service fees when they finalise the order. At the very least, shipping and service fees must be fully calculated on the official cart page before the customer completes their order and decides to submit it. Even better if you can calculate these costs on the fly in the floating cart.


Shipping fees are a necessary evil. After all, items don’t ship themselves across the country. Customers can handle that shipping fees exist, but the higher your fee, the faster and more high-quality of shipping they expect. Many customers would honestly prefer to pay a little extra for items and get “free shipping” to avoid this extra calculation.

Service Fees

Many customers are not so happy about service fees, and brands that charge service fees are obliged to A) Display those fees up-front and B) Explain why the fees are necessary. They want to see that the fee is to pay your hard-working box-stuffers or to support the company charity. So include a tooltip or paragraph explaining your service fee when it is listed.

3. Two-Click Checkout Completion for Return Customers

Customers do not want to click through three to five pages every time they check out. Not even when they’re checking out for the first time. Do your best to compress every pre-order action onto a single page with sections or drop-down page segments. At most, return customers with all their information already punched in should only have to click twice to confirm and finalise their order.

One Click to Preview Order

The first click is for previewing the order. Customers will want to look over all the items, details, and counts per item. They will want to confirm the right address and card are selected and that the final cost matches their expectations. This page should hold no surprises, so be sure any fees were listed in the cart one step earlier.

One Click to Confirm Order

When customers have seen that every detail of the order is correct, the second click confirms and completes the order. This should take them to a receipt and order confirmation page to confirm that their order is in correctly. It should also trigger an email receipt and confirmation.

4. Automatic Account Creation for New Customers

For new customers who need to enter all their payment and shipping information, do not ask them to make an account simultaneously. Now is the time to automatically make customers into members by slipping a request for email and first password into the order preparation page. This allows their first order to be included in their membership records and possibly even to provide any member benefits at the very beginning.

Preparing An Order Creates an Account – No Extra Steps

The key is not to add a single click-through page for making an account. Instead of the traditional route, simply slip an email and password form into the top of the order-completion list. Include quick-account buttons from platforms like Google and Facebook for even faster progress through the initial order steps.

Quick Address and Payment Entry – Immediately Stored

Make entering an address and choosing a form of payment as quick and easy as possible. Then store the information immediately in the new membership account. This way, if and when customers return, they will find their checkout streamlined because your website made an effort to remember them and their details.

5. Add-Ons that Promote Return-Shopping

Let’s talk a bit about special features that have impressed e-commerce customers in the past and can boost your return-shopper rate. When checkout is not just smooth but surprisingly convenient, customers will return for the delightful convenience of your process. When switching addresses, payment types, or adding new information is fast and responsive, customers will start to find reasons to shop with you rather than other online stores.

6. Quick-Manage Address Book

When it’s easy to manage multiple shipping addresses, customers will be eager to use your e-commerce store to buy things sent to their home, work, or family’s homes for gifts or even to hotels while they vacation. The easier you make address management, the better.

Easy Switching Between Stored Addresses

Make sure your platform allows for a quick perusal of a customer’s saved addresses and easy switching between. This should work both during the checkout process and within an account manager while customers shop for alternate locations.

Automatic Address Finding

One of the most convenient features an online address book can have is automatic address finding. When customers type in the beginning of their address, an engine offers them a drop-down of potentially matching addresses to choose from. This shortens the time to type addresses and assures customers that your map can get to their locations.

Manual Addresses for Un-Registered Locations

However, not all home or business addresses are in online databases. Be sure to allow customers to manually enter an address and confirm that they are certain, even if it cannot generate in the automated drop-down. Otherwise, you might accidentally turn customers away if their address hasn’t propagated through the internet yet.

7. Payment Account Manager

Likewise, you want to make adding new cards and accounts and then switching between those payment types as easy as possible. Anything you can do to offer payment flexibility and reduce the need to punch in long numbers is helpful to customers. They will appreciate the convenience of a traditionally tedious task.

Easy Switching Between Default Payment Method

Once again, make it easy to pick and switch payment methods both while shopping and in the final order confirmation page. This way, customers can easily balance weight on their credit cards and bank accounts.

Variety of Options, Including Online Accounts

Accept as many types of payment as possible. In addition to credit and debit cards, go out of your way to accept online accounts like PayPal as well. An increasing number of online shoppers are freelancers and startup employees who actually get paid through PayPal and live out of online accounts instead of traditional cards and bank accounts.

Photo Card Scanner Catches Numbers

Add card scanning to your mobile app for a cherry on top of payment ease. This is when the phone camera can take a picture of a card and pick up the card number. Saving customers a few tedious minutes typing that number is, unsurprisingly, a powerful incentive to come back. Especially if they switch between cards often.

8. Phenomenal Customer Service

Finally, to round out your perfected checkout process, be sure to offer phenomenal customer service after an order is placed.

Order Cancellation and Adjustments

When an order has been entered, but no human is working on it yet, create a ‘grace period’ where customers can go back and cancel or adjust the order. The incredible relief the few people who need this feature will generate intense brand loyalty. Customers love this rare and coveted feature, from rescuing a card balance to fixing an order mistake.

Rock-Solid Return Policy with Shipping Labels

Whatever your return policy is, make it easy to understand and rock-solid reliable. This way, customers know when they can count on returns if they try something new. Then, when you accept returns, send prepaid shipping labels. This shows that you don’t blame the customer (or charge them) if something was wrong with the item.

Friendly Associates with the Power to Help

Finally, make sure you have a phone and live chat support for customers who need complex help. The right friendly support at the right time can save conversion and win loyal customers. Especially if your agents have the power to really take action like arrange for returns, offer discounts, and change orders after they have been entered.

The checkout process is an underestimated and incredibly important part of the customer conversion process. Even more, important than being the final step in conversion, a great checkout process is often the key to earning repeat customers for your brand after all that hard work converting them and completing that first order. Contact us today if your checkout process could use some work or if you’re planning to build an e-commerce site with every feature that spells perfection. Our team would be honoured to ensure your customers get the perfect checkout experience.

Take your online store business to the next level with a Pixel Fish Ecommerce Website.

Check out some of our latest Ecommerce Website Design projects.

Further Reading:
Tips For Creating A Sitemap For Your Business Website

Further Reading
More bang for your buck: How to maximise profit from your online store
Social Media Monitoring: 10 reasons your business can benefit from it
Customer Acquisition: How much does it cost to acquire a new customer?
8 Plugins That Can Boost Your WooCommerce Website
17 awesome WooCommerce website extensions

Stand out from your competition with a Pixel Fish website!

Contact us today on 02 9114 9813 or email

Small Business Website Packages   | Custom Website Design   |   Ecommerce Websites

Related Blogs

Understanding WooCommerce Website Development for Ecommerce Success

Understanding WooCommerce Website Development for Ecommerce Success

Are you struggling to make the most of your online store and generate sales? You may find a solution in an optimised design for your WooCommerce website. In today’s competitive ecommerce landscape, having a well-crafted and highly efficient WooCommerce platform is essential for any business aspiring to success.

Comprehensive Guide to Ecommerce Web Design

Comprehensive Guide to Ecommerce Web Design

Are you set to start your venture into making a prosperous ecommerce website? Web design for online stores can be daunting, but with the right technique, it’s possible for them to boom.

Contact Pixel Fish - Website Design Agency

Get Started with a new Pixel Fish Website

We would love to hear about your upcoming website project

Kevin Fouché, Pixel Fish Director