How to Optimize Your Ecommerce Checkout Flow [+ Best Practices Checklist]

Imagine this: You’re interested in purchasing from a new brand, and you head to their website for the first time. After finding that product you’ve seen so many ads about on TikTok, you decide you’re ready to finally buy it. 

The price seems reasonable, after all! 

You add it to your cart… And BAM! Suddenly, you’re hit with

1. A checkout flow that’s five steps too long
2. Surprise shipping costs that are more expensive than the item itself
3. No security, making you worried to share your credit card information

Disappointed, you exit the website and never look back.

This, dear reader, is the experience you’re leaving your website visitors with by not optimizing your ecommerce checkout flow.

Don’t worry, though, because we spoke to two CRO experts—along with our own professional knowledge—to write you this article, so you can turn those browsers into buyers. 

We’ll share how you can improve your checkout flow and examples of brands doing it well.

Why you should optimize your ecommerce checkout flow

We spend so much time thinking about how to make our ecommerce sites user-friendly—our homepage, product description pages, and landing pages. Unfortunately, we often forget about one of the most important pages in the journey: the checkout page. 

Did you know that nearly 70% of users abandon their cart before completing checkout? The top reasons are 

• Surprise costs (shipping and taxes)
• Unclear pricing
• A process that’s too long

According to Erin DeCesaris, Head of Strategy at Fuel Made (a website design and CRO agency), “As acquisition costs continue to rise, it’s more important than ever to convert customers on their first visit. So make sure your checkout is just as optimized and user-friendly as the rest of your site, leaving customers on a positive note.”

Overall, your checkout flow impacts your bottom line because it’s the last stage in the buying journey. So how can you improve it? Let’s look at what you need to do next.

What do you need for an optimized checkout flow?

We spoke with Erin and Brenda Godinez (Head of Retention at the non-alcoholic wine brand, Surely) about how they approach a strategy for improving a brand’s checkout flow. 

First, make sure you’re tackling all the “low-hanging fruit” and applying modern best practices. 

Set up basic best practices 

Before you add noise to your checkout, some basic best practices are table stakes in ecommerce. That includes

• Removing any obvious friction points, such as unclear messaging, unnecessary call-to-actions, complicated steps, and repeated steps 
• Making sure shoppers are clear on where to enter their information and what their payment options are
• Adding clear shipping and return information

Once you tackle these low-hanging fruits, you can test other elements. 

“I’ll test additional elements like brand value information, cross-sell and upsell sections, and email and text sign-up prompts,” said Erin.

Understand your KPIs

A few core metrics to watch are your conversion rate, cart abandonment rate, and customer lifetime value. 

You can keep your cart KPIs fairly simple. That’s why Brenda also suggests using heatmap tools to qualitatively understand how users are interacting with your checkout.

“I watch sessions in HotJar to see if it's subjectively an effective checkout experience. It's very powerful to see how users behave, not just look at metrics on spreadsheets,” said Brenda.

Add standard payment methods

Every shopper has preferred payment methods. Some want to check out with their visa, others prefer Apple Pay, and others want a buy now pay later option. It’s important for your store to offer a variety.

Why? People want to check out using the payment method they’re most comfortable with, and if that’s not available then it’s a friction point in their journey. In fact, around 10% of shoppers abandon checkout due to a lack of payment options. 

It’s a simple solution: accept all standard payment methods, along with quick-pay (and buy now pay later if you sell big ticket items).

Allow guest checkout and express checkout 

Think about the first purchase like a first date—the customer may not be ready to share all their personal information with you. 

That’s why a common point of friction for shoppers is when they’re forced to create an account in order to complete their order. Many first-time purchasers want to try your products first before committing to your brand.

Considering 34% of cart abandonments are due to shoppers being required to make an account, allowing them to checkout as a guest is an easy solution. You can follow up during the post-purchase stage to encourage them to create an account after.

Tip: To speed up the checkout experience more, add express checkout options, using validation and auto-complete to help shoppers fill out the form quickly.

Switch to a single-page checkout

Adding too many steps to your checkout means a higher chance of cart abandonment. This is something Baymard Institute reported, finding out that 17% of shoppers will abandon their cart if the process feels too long and complicated. 

Here’s what you can do to avoid this: switch to a one-page checkout—a checkout page that simplifies the process by placing all the fields on one page.

Erin says this is best for stores with a straightforward checkout process. But if you need to use multiple pages, “Include a progress bar that shows users where they’re at in the process and make sure you’re not asking users to enter the same information multiple times.”

Test value-add widgets 

Just because someone makes it to the checkout page doesn’t automatically mean they trust your brand—use this opportunity to provide value and build credibility to guide them through the funnel.

You can do this by adding

• Testimonials and review widgets
• Cross-sell and upsell widgets
• Referral program widgets
• Trust badges (like payment security or money-back guarantee)
• Iconography about your value propositions 

Here’s an upsell example from Peepers, using an “add it now!” CTA right above the discount code field. 

And if you don’t want to add noise to your checkout page, you can include some of these widgets on the confirmation page to still provide value. This is what Baronfig did to promote its referral program.‍

P.S. If you want to embed your referral program on your checkout page or promote it as a post-purchase pop-up, you can try ReferralCandy for free here.

Deep dive into the checkout flows of 3 brands

We’ve all gone through hundreds of online checkout experiences, but do you know exactly what makes it a good experience? 

Well, we reviewed three brands' checkout pages, comparing what they look like and how they’re using the best practices we shared in the previous section. 

Let’s dive into why these brands have successful checkouts, starting with Live Bearded. 

Live Bearded

Live Bearded is on a mission to help beardsmen look, feel, and be their best. The products are A+—and so is the brand’s checkout experience. That’s because the team often runs tests to improve conversions from their cart. 

For example, Live Bearded used to have a traditional cart page (Where you click a cart icon and get redirected to a specific cart page). However, they were interested in seeing if a slide-out cart would show better results. 

The team worked with Fuel Made (a design and CRO agency) to run this A/B test. In it, they compared three versions of a checkout experience: 

• The original dedicated cart page
• A slideout cart with trust-building badges and value-add information
• A simplified version of the slideout cart (less content)

Which one do you think had the best results…? 

The second cart with additional information had a modeled improvement over the baseline of up to 18%.

In the winning version, you can see how Live Bearded added

• Information about how shipping is calculated
• Icons for all the ways a customer can pay for their order
• Where shoppers can get help from the team
• And benefits of the products (made in USA, all-natural, etc)

Live Bearded’s A/B test is a good example of why it’s important to always be testing your checkout experience—and how impactful value-add information can be.

Surely Wines

As you know, Brenda spends a lot of time on Surely Wine’s checkout. She’s always finding ways to improve conversions by making the experience easier. 

Of course, we had to review Surely’s checkout as well. 

One part that stood out to us is how easy it is to access the cart website-wide. Similar to Live Bearded’s cart, Surely uses a slide-out cart that opens up when you click the cart icon on the top right corner of the navigation menu.

However, instead of the cart sliding out from the slide, it slides out from the bottom of the screen, opening a larger cart widget with a ton of value-adds.

Here’s what’s working for Surely’s cart: 

• They use gamification to upsell products and show shoppers how close they are to getting free shipping (and other perks) with a progress bar. As shoppers add more items to their cart, they can unlock rewards like 10%, 15%, and 20% off their order.
• They also offer a free gift to shoppers who spend a certain amount, and they show this off as their own line in the cart—underneath the products the customer added. 
• On the right side, they recommend items customers can add to their cart in a single click, driving up AOV through upsells.

Once customers click “Proceed to checkout,” they’re sent to a standard checkout page. Here, Surely does not require shoppers to make an account to checkout (nor do they push creating an account during the process).  

At this stage, Surely shows off its express checkout options and optional shipping insurance to help customers feel more secure about their order (if they choose to opt-in). 

“The checkout experience is incredibly important because it can have a major impact on overall conversion. Sessions and add-to carts don't matter if your checkout flow isn't great,” explains Brenda. “It's at this step that people often make the final call of whether or not to buy, and you want to make that call a no-brainer. Don't give customers a reason to drop off.”

In the future, Brenda plans to test adding more social proof and a reminder of Surely’s money-back guarantee: “I think these should be table stakes.”

Final tip from Brenda: Make test orders as if you’re a customer of your brand, and see what parts of the process seem subjectively suboptimal. Ask yourself if there’s any friction. If you feel like you may be biased, have a friend do it for you.

InspiredGo

One downside to not using Shopify Plus is the inability to customize your checkout page—essentially, you can’t add certain messaging or iconography. 

But this doesn’t have to stop you from showing your value at the checkout stage.

InspiredGo is a great example to look at because the team discovered a way to build social proof in their checkout page—despite not being on Shopify Plus. 

How? They created a banner image and added their rating directly to the banner, along with key messaging on the number of orders they’ve delivered.

This is a good way to build trust without being able to completely customize what your checkout looks like. 

Before making any changes, audit your checkout flow

We know it’s easy to keep adding more segments and messaging to your checkout page but remember it’s important to start with the basics. And even before that, you should audit your current checkout process. 

Our final tip on how to improve your checkout flow is from Erin, where she explains why you need to start with an audit: 

“Heatmap software like Microsoft Clarity or LuckyOrange can be especially helpful here. Watch user recordings and see if there are any points in checkout where users seem to experience friction. Also, take a look at KPIs like cart abandonment rate—is it higher on certain devices? These type of data can point you in the direction of where the low-hanging fruit opportunities for optimization are. And, as with anything on your site, continue to A/B test and optimize to continuously improve your checkout experience!”