15 Best Tips & Practices for Optimising Checkout Pages for Improved Conversion Rates

Check out your checkout! (see what I did there? ;).

Recently started your store and failing to seal your transactions? 

Trying to scale growth but seeing poor conversion rates?

Your checkout process might be the problem. Store owners focus heavily on a unique storefront design, branding, and offers to try convert more customers, but forget to give proper attention to the checkout. This may lead to customer frustration or worse, abandonment of the transaction altogether.

Causes of checkout abandonment

We will dive into the checkout page best practices shortly, but before we do, it’s important to understand the key causes for abandonment. 

Why? Because you need to understand potential reasons why cart abandonment may be happening to ensure you make good decisions around checkout store design. More importantly, what to prioritise when it comes to design.

These are the leading causes of checkout abandonment you need to consider.

1. Additional costs that are too high is one of the primary causes of abandonment. Businesses need to mitigate the effect of high costs can have on the users.

2. A complicated checkout process can make anyone frustrated and confused. Just imagine buying something off from a store, and you’re redirected to different pages with lengthy forms. Oh, the horror!

3. Security issues may scare away your potential buyer. This may happen by payment methods that users are unfamiliar with or failing to give your users assurances.

4. Lack of payment options that your buyers use is another reason they may not complete the transaction. It's not an expectation to have multiple options for accepting payments, whether it be the likes of Apple Pay, Amazon Pay, Paypal, Google Pay or even BNPL (Buy Now, Pay Later) options such as Afterpay.

Let's get into the best practices

Addressing these best practices can help reduce abandonment. 

It’s easier said than done, and can take time to see its impact.

What I will be sharing are tips I know have improved results with eCommerce companies I’ve worked with. Let's get into them.

1. Be upfront with additional costs 

As you can imagine no one likes hidden costs. This is a big barrier I see when it comes to conversions if customers get to the final stage of adding in their credit card details and see the actual final price. 

It’s happened to me personally multiple times and I can tell you it’s not the best feeling.

How to fix: Indicate, even before checkout, that the transaction may or will involve additional costs. Adding the costs only at checkout will just negatively portray the pricing. Avoid giving your users the feeling of being misled about the prices at all costs.

2. Make use of a progress bar 

Avoid long, complicated checkouts.

I don't think anyone likes lengthy forms or not knowing how far they have to go to complete details so they can complete the transaction - nobody has time for that! Not to mention, it’s a bad experience on mobile. Avoid a long process in the first place, keep it simple and make sure the visitor knows there's not much that needs to be done to complete the purchase.

What's the best way to communicate this visually for all devices? Progress bars - and they serve two primary purposes. First, it informs you what part of the checkout you are currently in. Second, it shows how short the actual process is and how close you are to finishing the required steps.

The second one is quite important because it has a persuasive effect on the user. You feel less inclined to abandon the process if you can see for yourself how close you are to completing. On mobile, ensure that the progress bar is clear, but doesn't take too much real estate.

Here are a couple of examples I really like.

#1 - Kravebeauty is using Shopify for their checkout.

This is what the desktop view looks like.

Then, this is what the mobile looks like.

Whilst most of us know about the Shopify experience already, it's good to remember why it's important for the user.

This is even more important to learn for those who have built custom CMS stores. Without a doubt, this UX has been tested by millions of transactions daily across so many stores.

The progress bar (or breadcrumb look) makes it really easy for the user to understand what stage they're at.

#2 - Here's a good custom design layout (SAP Commerce Cloud as the CMS) by Nespresso.

The mobile response design is really clean too and takes up a good amount of space before the form.

What about stores that need a longer checkout process?

There aren't many stores that require a long process, but a popular example here are flower or gift stores.

#3 - Easy Flowers have done a good job here with their layout.

With flower/gift companies like this, they have to take into account the 'buyer' and the 'recipient'. Hence, it makes sense that they have a longer process to complete the sales.

They use the right icons as well for each of the stages to help the user know what details they need to fill out still.

What about the mobile view for a long progress bars?

On the other hand, I checked their mobile view and they don't have the progress bar. It's a good observation and learning why this may be the case. It could be that they have tested it before and showing 8 steps is too many, or perhaps it's difficult to design without taking up too much real estate.

There's no right or wrong answer in this case, but just comes down to testing.

A key thing to remember with mobile is that you only have limited space available, so need to keep the steps to around five.‍

3. Use a clean and minimal checkout page design 

Every successful online store keeps its checkout page minimal. Why? Because it helps keep the user focused on finishing the stage. Don’t distract your buyer. No flashy design needed.

The Shopify layout is a good example of keeping the design simple.

Another good layout that doesn't use Shopify is Nike.

Nike as we know is a huge store which would be processing millions of transactions per year, so they would have tested this layout many times. Keep that in mind.

4. Avoid unnecessary navigation, links to other pages, and limit the amount of pages

Something I have seen some stores do is 'keep' the menu bar that they have across their store when users start the checkout process. I can't emphasise the recommendation of not doing this. It can be distracting for the user, and get them to leave. The experience should be seamless and making sure the user is focused on what needs to be done - completing the transaction.

In relation to avoiding distractions and navigation, ensure that your checkout is not cluttered with unnecessary links to other pages. You already have the user’s attention to finish the transaction, so why distract them with links out to other pages? Believe it or not, I have come across stores that do this.

My third key point to remember is to limit the number of pages during checkout. More loading of pages may cause the user to abandon, so avoid splitting up the checkout to too many pages. If you require multiple pages, keep in mind the points and examples I mentioned in relation to progress bars.

What happens if you want to provide more information?

If you want to add more 'links' to provide extra information, a great example of a brand who's done this well is Koala.

This is a great UI CRO addition, reassuring and reminding the customer what the key USP's are. Except, when you click 'Learn more', it actually pops up as a modal view, rather than opening up a separate tab. An elegant and awesome experience. This is the way to do it if you want to provide more information to assist with conversions.

‍

5. Make use of pre-populated forms and fields

Get customers to check out faster by making use of auto-fill forms and fields. It's a great experience for first-time customers, and it means less time spent filling the same form for repeat customers. There's nothing worse than repeatedly filling up the same form over and over again with the same information.

Here are some use cases to keep in mind.

First-time customers

One of the best things to do here for auto-fill, especially for delivery and billing address requirements, is having Google Address Validation auto-complete. Most sites use the Google Places API to achieve this. You need to make sure you have this installed, as it's such a good experience when you select it and the form is already filled out halfway. For those who use Woocommerce, you can read more about how to install. For those who use Shopify, you already have this.

Existing customers

This is where prompting users to "create an account" is more justified.

Too many brands ask or even require this as mandatory for first-time customers, which as a requirement seems crazy in my eyes.

For a better user experience, you need to make sure they make a purchase first, love the product and have an overall good first-time experience. Then, you can email users through automation to create an account to checkout faster the next time they purchase.

If you do require customers creating an account prior to purchase, a good idea is to add an incentive for doing so.

6. Use form validation to reduce input errors

This feature is a technical process where your form validates if the information provided by the user is acceptable. A common use case is to check if the email provided by the user is in a valid format.

There are two types of form validation - in-line validation and post-submit validation.

The latter is the most common, and you’ve probably encountered it too. 

It typically goes like this: You complete the form, click the submit button, and if there is a wrong input, you’ll have an error text on top and a red asterisk at the wrong section. 

Depending on the form script, you’ll have to input all the details again or fix a certain portion of the form. Either way, it’s annoying and frustrating! 

So, ditch the post-submit validation and apply an in-line validation. This validation type is the complete opposite; it instantly tells the user that the data is valid as soon as the input is completed, resulting in a faster fill-up and checkout experience.

7. Add guest checkout 

Asking a first-time visitor to create an account when they want to make a transaction may seem logical so you can market to them and collect more details, but it creates an unnecessary bottleneck. Remember, this is even worse of an experience when people use mobile, which I can rest assure a good segment of your customers would be.

We touched on this earlier as part of form validations - you can easily remarket to new and existing customers to create an account via email automation or even paid ads.

So, what's the most streamline way for new customers to make a transaction?

The simple answer is guest checkouts.

Guest checkouts allow users to have a frictionless first experience with the brand.  The less steps, and faster they can complete the transaction process, the better. Remember, the last thing we want to do is create a barrier to someone making a purchase. 

What are some good design examples of guest checkouts?

I like this layout by Interflora. It gives the customer 3 options which are all easily to digest - either you can login, continue as a guest, or register.

What they have done here really well is highlight the USP's of registering as a member, but yet doesn't force them needing to become a member at first.

Another design layout inspiration is Boohoo. When you proceed after adding an item to cart, you come to this page. Simple and straight-forward.

Once you continue as a guest here, you then go to a nicely designed final page below to complete the rest of your details. Smart way to collect an email in case of abandonment.

By the way, this layout has some of the key elements of what I believe is an awesome CRO-focused checkout page. I've pointed some of the key elements in the red squares.

8. Add Trust Marks / Logos

Would you purchase an item(s) through an online store that has a loophole in its payment system? Of course not! Your customers feel the same way. So, make sure you test and strengthen your checkout system to ensure there are no security vulnerabilities. This is particular important for any custom CMS.

How can you reassure customers that your site is safe?

Ecommerce as we know may have made the way we buy and sell things more accessible, but it has also given ground for some to defraud others. Users are naturally wary of stores they haven't made a purchase from before, so you can ease anxiety by highlighting that you have the right security software and processes in place.

A reliable way to boost credibility is to add security logos. They are badges provided by third party security tools to show that your store is trustworthy.

Some badges you could include are the likes of an SSL Badge, and other security badges such as McAfee Secure or Norton Secured.

Important: Only include security logos if you’re actually using the security application.

Additionally, Boohoo in the above screen also includes a "Secure Globalsign by GMO" logo.

What are some other important logos to include for trust?

The other primary logos to include are logos from different payment acceptance options - for example, Shop Pay, Paypal Verified, Visa, Mastercard, BNPL (Buy now, Pay Later), etc.

Whilst these logos highlight what payment methods you accept, which I talk more about below, it's also another credibility and trust signal for consumers.

9. USP & Social proof elements

You’re probably using social proof and highlighting USP's across your website including the homepage, product pages and other important landing pages, but what about using both within the checkout process?

As we know, when new customers are unsure about the purchase of your product (or they may be weighing up a competitor’s product), it’s our job to help make their decision easier. 

In addition, it's a great way to reduce abandonment.

How to add social proof elements

I found an amazing example by Nectar, which sells mattresses, bed frames and other products.

How impressive does this this if you're a brand new customer? I mean, I would be impressed. Seeing this from my point of view certainly increases confidence and reinforces that thousands of others love Nectar's products. Consider embedding your top review profiles.

Adding USPs

I'm not sure why it is mattress companies do such as a great job with their CRO game.

I love what Purple mattress has done here by reinforcing their primary USP's to help alleviate any customer doubt. It looks awesome.

What can you take away from this? See if you can find a way to add a small section that highlights your main USP's. Sure, you've got them across your site, but there's nothing wrong with illuminating them again.

‍

10. Add fear of missing out

This is a tactic that you can test and should use sparingly. It's also dependent on the CMS you use.

FOMO (Fear of Missing Out) is another psychological trigger that many stores add to their experiences. It’s a great way to better position your product offering. 

Adding FOMO in eCommerce means the user feels a sense of trust that other people are buying products from the store. It helps reduce the anxiety of customers and making their decision easier.

How can you implement this? Also, how would the UX work?

There are a few social proof pop-up tools available, but Trustpulse does a great job and offers a good amount of features, and customisation options. You can show available quantities left in stock, add a limited-time offer for a discount or free shipping notifications.

Note: This won't work in the "checkout" section of Shopify (although it can definitely work on the cart page beforehand). Hence, this can be something to test for custom CMS sites.

This tactic only works if you have a multi-page process, before you go into the payment page. Also, the URL structure will need to be the same. So there's a UX consideration here.

11. Respect user privacy – ask only for the minimum 

Asking your users for their personal information is obviously part required as part of eCommerce. We know that building your marketing list is crucial. We also know that it's required to get information as part of the transaction process. However, only ask for the minimum.

Don't make mandatory fields required when it comes to opt-in marketing initiatives, such as subscribing to the newsletter.

First, you risk scaring your users away. Consumers are getting smarter around data collection. Ask for data that is only absolutely necessary for the completion of the transaction.

Second, the more you ask, the more fields your user has to fill. Do not over-extend information collection. Asking for things unrelated to checkout may result in the cart being abandoned.

12. Subtle marketing opt-ins & promotions

Related to the above around taking into account user privacy, it's important to respect privacy, but is there a way to collect information for marketing purposes that users choose opt into?

The answer is yes. However, it needs to be executed well from a messaging point of view, as well as design.

Here are some marketing opt-in types and brands and who do a good job keeping it subtly and ensure they get permission.

SMS

Then I Met You is a skincare brand that asks customers in checkout if they want to be part of the 'Glow Deeper' community.

‍

Promotion reinforcement

This is smart promotion placement from Vegamour, which at the time as I write this is reminding visitors to use the coupon code as part of the summer sale. This reminds customers to take advantage of potentially adding more items to cart so they can save. In turn, it helps increase AOV.

Loyalty / rewards program

On the same page by Vegamour, they also have at the end of their form an opt-in for customers to join their "GRO" rewards program and earn points from that transaction. Another great way to collect user information, without a hard sell. I'd say they would convert well from this.

12. Add several payment options – Have the Users Pay Their Way

There’s nothing more frustrating than wanting a specific product, only to find out that you can’t follow through with the transaction because your credit card or payment of choice is not available. 

How to fix: Have the most commonly used payment options available at all times and indicate which payment method you accept even before checkout (i.e. include on product pages). Limiting yourself to just one way to pay will only limit your sales.  

In fact, it’s becoming a universal expectation that customers can use whatever payment gateway that suits them. 

In addition, make not and make it obvious that you also accept BNPL (Buy Now, Pay Later) options - e.g. Afterpay, Klarna, Splitpay, etc.

During checkout, have the payment methods concisely presented so the users can choose however they prefer, just like these examples here.

This is a good example from ASOS.

From what I also showed earlier with Boohoo, they highlight the options of payment plans with BNPL.

Accept cash? This is something to consider for local-based businesses. If your system can process cash on delivery terms, include it as well.

13. Ensure your contact details are clear for customers to get in contact

Sometimes an abandoned transaction may mean something else. A user may be looking for a similar item not currently on display in your store. Providing an easy way to communicate with you may mean a sale on a different day. Your users may also request an item you currently do not have.

Clearly provide your contact details on the checkout page itself so your users can get in touch with you for any reason. Personal communication may give you an idea of what can lead to more conversions overall.

14. Turn on Express Checkout options

A really important implementation that you should turn on is express payment options.

What do I mean exactly? You would have seen them before, and probably have used them. I'm talking about these.

Why include these?

• Gives users the power to choose their preferred method
• If they use a specific payment method, it means they normally have their details saved, which means they can move faster.

To learn more about accelerated checkouts with Shopify, check out the documentation. There are also links for payment gateways for subscriptions and dynamic buttons.

15. Add carbon neutral shipping

As people are aware of their impact on the planet, this is a great initiative to incorporate. It doesn't necessarily improve conversion rates per se, plus many people may choose not to opt-in, but it does help affiliate your brand with supporting the planet and builds rapport with segments of customers. It can play a role with encouraging repeat sales with customers.

What apps make it easy for you to implement?

Shopify has their own version named Offset, but I recommend looking into these two options which have lots of positive reviews:

• Carbonclick for Ecommerce - over 80+ 5-star reviews.

• Cloverly - over 40+ 5-star reviews.

It all comes down to continue refinement.

Users can abandon transactions for any number of reasons. It's just the nature of the beast. However, you want to make sure you've done your best with optimisations.

You should be testing and measuring through analytics your cart abandonment process often. Is it easy to use & understand? Is it accommodating to different types of customers? Did it take too long? Does it work well on mobile? You get the point.

As one final quick tip, I recommend asking your friends or potentially even some top customers who have made repeat purchases. Ask for their feedback. This will help you accelerate key changes.

‍

⚡ Frequently Asked Questions ⚡

Is having guest checkout a good idea?

The simple answer is yes. It's a better user experience, especially for first-time customers, and those who are time poor. If you don't have one, you're most likely hurting your conversion rates. Once you get the customer's email, you can easily prompt them to create an account through email automation nurturing post-purchase.

What should be on a checkout page?

I've shared some important practices you should incorporate, but at the absolute minimum, you should include: Security logos, a progress bar, add payment logos (including buy now, pay later), and ask for minimal contact details.

Which CMS has the best checkout page experience?

For me personally, it has to be Shopify. Both from a growth marketer's perspective, but also as a customer. It's a good UX and also has a 'universal look' that many customers are used to.

What are the pros and cons of either one-page or multi-page checkouts?

There are naturally pros and cons to both. With one-page checkout experiences, they require less clicks from the customer which is great, but usually means you need to cram all the required information onto one page - including what's in the cart, shipping form, payment details, and coupon discount section. Then with multi-page checkouts, it requires extra steps, but with the right optimisations, this can be done really well. The benefits include collecting emails for cart abandonments, have guest checkout capabilities, good retargeting options (paid and emails), and overall better analytics. I recommend multi-page as the preferred process.

What sites have good examples of guest checkout best practices?

There are many awesome examples I recommend other brands to use as inspiration. My favourites are Nike, Bellroy, Adore Beauty, Tommy Hilfiger, Etsy, and Walmart (there are many others too). These are all large brands who have high sales volumes and would have done rigorous UX testing over time, so normally it's a good sign if they have set up their guest checkout experiences in a certain way.