Editor’s note: This article was originally published in 2019. It has been updated for accuracy and to reflect modern practices.
Attracting a customer to your site and convincing them to purchase your product is critical for eCommerce businesses — but these steps alone don’t guarantee a sale.
For most websites, it’s the shopping cart and checkout page design and functionality that ultimately make or break a customer’s purchase.
So, how can you optimize your guest checkout flow to make that sale and simultaneously increase your average order value (AOV)?
Every year, our conversion optimization teams analyze leading eCommerce sites across dozens of categories to identify the best practices for customer conversions. Using that data (and our decades of experience optimizing clients’ sites), we’ve created this guide to eCommerce checkout design, complete with real-life examples of the best practices in action.
Read through them below and start testing your favorites on your website today. Or, if you’d like a custom conversion strategy for your online business, we’re always happy to chat.
10 Best Practices for Checkout Page Design
Before we get into our recommendations, keep this in mind: Conversion optimization isn’t an exact science — that is, what works for one site is not guaranteed to work for another.
Before you start implementing all of these best practices to your site, create a testing plan. Choose one strategy to begin with, try it out on your site, and come to a conclusion before throwing more changes into your eCommerce checkout process.
That way, you can better identify exactly what does (and what doesn’t) move the needle for your customers.
- Keep users on the product page.
- Show product attributes in the cart.
- Add a virtual “candy rack.”
- Show final pricing in the cart.
- Display order summary throughout checkout.
- Auto-fill shipping and billing addresses.
- Provide estimated shipping and arrival date.
- Segment your customers.
- Set expectations upfront.
- Allow customers to save for later.
1. Keep users on the product page after an “add to cart.”
Keeping a customer on a product page (instead of taking them to a separate cart page) has been a dominant trend among eCommerce sites since we first identified it in our 2018 research.
Preemptively sending customers to a shopping cart page can cut short their browsing experience, which can be particularly harmful to your AOV. Our rule of thumb: If your eCommerce website averages more than 1.6 products an order, keep customers on their initial product page — to encourage them to keep shopping and adding to their cart.
There are two standard styles for doing this:
1. A drop-down bag, as shown in this example from Sorel:
2. A lightbox-style pop-in layer, as shown in this example from Williams Sonoma:
2. Show product attributes in the cart.
When you have similar products that differ on one or more attributes, we recommend showing those attributes (fabric, finish, size, etc.) with the product name and picture in the customer’s shopping cart.
This assures users that they’ve selected the right product, eliminating a potential barrier to purchase and reducing the “wrong items” returns for your customer service department.
3. Add a virtual “candy rack.”
Just as brick-and-mortar stores take advantage of checkout lines to display last-minute purchases like candy and magazines, you can use your shopping cart page design to upsell additional items to your online shoppers.
It’s not just about showing any old products to your customers. You’ll have a higher likelihood of increasing AOV when you provide relevant, attractive products in this upsell area.
Big-box stores that sell lots of products (like REI or Walmart) need a higher level of intelligence to get the right products in front of their shoppers. Similarly, if you’re shopping at Nixon or GlassesUSA, you’ll be unlikely to add another watch or pair of glasses to your cart after you’ve already selected one.
Use your customer data to identify products typically bought together, and offer those up to shoppers when it makes sense to do so.
4. Show final pricing in cart.
No customer likes sticker stock, so make sure your shoppers are continually aware of their final cost (or at least an estimate) from the moment they add their first product to their cart.
Make sure this number changes (and, if possible, incorporates any coupon codes, promos, or shipping costs) as customers add more products throughout their buying experience.
Bonus tip: Display your credit card and payment options early on to avoid any disappointed shoppers. We recommend incorporating “buy now, pay later” payment methods, especially if your store sells higher-priced products.
5. Display the order summary throughout the checkout process.
Today, it’s standard practice to keep your customer informed of their order summary throughout every step of the eCommerce checkout flow.
Shoppers want to be sure they are buying the right items. By reminding them of their items through every step, you prevent them from getting sidetracked and leaving the checkout page to double-check their cart.
Displaying an order summary also encourages customers to maintain an emotional connection to their chosen item through the checkout process.
Additionally, doing this allows you to bypass a review page. Unless there are important shopping details to confirm (such as prescription information for glasses orders), we recommend skipping a final review page to eliminate this extra step in the checkout process.
6. Auto-fill shipping and billing addresses.
There’s a reason why so many eCommerce businesses auto-select customers’ shipping and billing addresses to be the same: It makes the checkout process much easier for users. (We’ve verified it with our own testing, too).
The majority of customers will have the same billing and shipping addresses, so we encourage auto-populating or auto-selecting the second address form field on your checkout page design. However, keep this checkbox highly visible for the percentage of customers who will use two separate addresses.
7. Provide estimated shipping or arrival date.
Customers want to know when their orders will arrive, especially with COVID-related shipping and supply line disruptions. So, we recommend displaying an order’s estimated shipping or arrival date within your checkout page design.
“Estimated” is the key word here. Emphasize that dates are subject to change to prevent disappointed customers from bombarding your customer service teams.
Make sure to always follow up orders with detailed shipping and tracking emails to keep your customers in the loop.
8. Segment your customers.
Studies consistently show that a top reason customers leave abandoned carts is because of a “create account” prompt. This can be a difficult balance for online retailers, which have much to gain by gathering customer information through the account creation process.
As a compromise, we recommend “segmenting” your customer upfront by giving them three different options:
- Check out as a guest
- Create a new account
- Sign in to an existing account
You can see these options in action on H&M’s checkout page. Not only do they prompt users to create a new account, but they also highlight the benefits of doing so (“10% off your first purchase”).
Other eCommerce sites choose to save the “create an account” step until the end of the checkout process. This can remove a barrier for new customers’ conversions, while still giving them the option to create their account after the purchase is complete.
9. Set expectations up front.
Whether you choose to use a one-page checkout process or guide customers through several separate pages, make sure your shoppers know what to expect. Be very clear about how many steps there are in the checkout process, and keep the user informed about how far they have left to go.
If you have a multi-page checkout design, add numbers or steps to the headers of each page as progress indicators. Or, as Vitrazza does in the example below, include those details and a quick checkout option like Amazon, Google, or Apple Pay.
If you use a single-page checkout design, we recommend using the accordion style for a clean look. Leaving all data fields open to edit and view on one page can be overwhelming for customers who want a quick checkout process.
10. Allow customers to save for later.
Depending on who you’re talking to, the online shopping cart abandonment rate is anywhere between 60–80%. So, your eCommerce checkout page design can’t just focus on conversions; it should also offer opportunities to re-engage those users who won’t complete their purchases.
We suggest giving your customers the ability to save products for later. This is often accomplished with a wishlist function, which associates products with a customer’s personal account. (If they don’t have an account, adding an item to their wishlist will prompt them to make one.)
You can then use that data to retarget your customers with personalized email marketing, reminding them of the products they’ve saved and/or sending alerts when stock is low.
Test These eCommerce Checkout Best Practices Today
The 10 eCommerce checkout page designs above are modern standards we recommend to streamline your checkout process and maximize your online sales. But remember: Not all of these practices provide similar results for businesses.
As always when it comes to conversion rate optimization, make sure to test a few strategies individually to determine their effectiveness and what will work best for your eCommerce store.
Want help making it happen? Our CRO team can create a personalized proposal for your cart and checkout design, crafted to optimize your results. Contact us today for a free site audit and customized strategy for your online business.
In the meantime, check out our other conversion best practices for eCommerce sites:
- eCommerce Upselling Strategies: The Complete Guide
- eCommerce Homepage Best Practices for CRO
- Code Freeze Best Practices for eCommerce Site Optimization
Just brillant examples indeed! Coming from Sujan Patel’s recent tweet. It just awesome learning buddy. Gonna send a ptosal soon. Keep it up!
Have you checked out the new Amazon checkout process? I would say that would be the new norm.
They merged all three steps (previously on three pages) all into one page with dropdowns for each step.
It has both the flexibility of a full checkout process and the simplicity of a one-page checkout.
Great spot Stan! Amazon has the benefit of lots of repeat shoppers so they have some flexibility that smaller stores with fewer loyal customers do not, but it’s always good to know what to strive for. We have had success with a very similar accordion style checkout, which has tested well in the past. Keeping users on one page, particularly on mobile, generally is a win and this is a great way to do it.