How to Reduce Checkout Abandonment with an Optimized One Page Checkout

November 25, 2019

The Bolt Team

Female shopper utilizing a one page checkout

A onepage checkout can make it simpler and more convenient for your customers to purchase on your ecommerce platform. Learn what a true one page checkout is, the benefits of utilizing this checkout style, the different types of single page checkouts, and how to optimize your single page checkout for success.

Each year, more business shifts to ecommerce stores as customers shop digitally. Instead of stocking shelves and designing aisles, ecommerce stores need to create an online experience that customers find enjoyable, convenient, and efficient, from browsing to checkout.

Bolt One-Click Checkout

Start treating millions of shoppers like returning customers and make their checkout easier than ever.

Try Bolt Today

To optimize the ecommerce checkout experience, many stores have shifted to a one-page checkout model, reducing the number of steps and clicks throughout checkout to save customers time. But there is still more you can do to improve your checkout, even if it’s already down to a single page.

Keep reading to learn more about optimizing your one-page checkout, including:

Before we get into the different types of one-page checkouts, how to optimize a single-page checkout, and examples and templates to build your own, let’s look at the main advantages of using a one-page checkout.

Benefits of a one-page checkout

Graphic of customer reviewing an oversized phone with single page checkout

When deciding if a one-page checkout is best for your ecommerce platform, consider what you want out of the checkout experience for your customers. Listen to feedback and tailor it to suit what the majority of your users want.

That being said, there are a number of clear benefits for utilizing a one-page checkout. Here are a few of the main reasons to use a single page checkout for your customers:

  • Less steps and fewer clicks: Customers want the path of least resistance; reducing steps – and clicks – will keep the checkout process short, simple, and frictionless, making it more appealing to customers.
  • Speed and efficiency: A single checkout page saves time on load screens between payment pages, reduces navigation time, and removes the need to go back and forth between screens to correct or update information.
  • Ease of use: By their nature and design, one-page checkouts are easier to use for customers, with limited steps being required of the customer. All form fields are in one place so you can enter information at your own pace and in your own order.
  • Clear navigation: Single-page checkouts feature clear navigation as you don’t need to navigate through multiple pages and steps. Whether you’re using a traditional one-page checkout or an accordion style checkout design, navigating the payment process is fluid and guided.
  • Lower abandonment rate: Optimizing checkout isn’t just about pleasing your customers, it’s also about increasing conversions and revenue. Improving the checkout experience will lead to more conversions and greater revenue, as customers abandon checkout less and finish their checkout more frequently.

While there are many benefits of a one-page checkout, it’s important to remember that there are some downsides. Here are three of the main potential flaws with containing checkout to a single page:

  • Overwhelm customers: Requiring all user information – billing, shipping, payment, etc. – in one page can be overwhelming to the customer. This can intimidate a user right at the time of purchase, scaring them off.
  • Slow checkout page: The more that needs to be displayed, the slower the page will load. Depending on how slow the performance and load times get, customers will abandon your ecommerce store for a better user experience.
  • Analytics limitations: Having the entire checkout contained in a single page limits the ability to track a variety of checkout analytics. With less steps, it is harder to identify reasons and motivations for abandonment and make meaningful improvements.

3 types of one-page checkout

Before we get into templates and strategies for optimizing your own single-page checkout, let’s define the different types of one-page checkouts. Knowing how each functions will help you choose the right option for you and better understand how your checkout operates.

1. One-page checkout

Example of one-page checkout screen

A one-page checkout contains all elements of a standard checkout process on a single page, including cart contents, payment details, billing and shipping addresses, and shipping options. This reduces the number of pages and clicks to complete payment, resulting in a faster checkout process. 

Typically, a one page checkout allows users to fill out information in any order, as all form fields are on one page. If a user fails to enter data in any field, error messages will prompt them to complete those fields.

This is also a good time to distinguish a one-page checkout from multi-step, single-step, and single-click checkouts. A one-page checkout is contained to a single page, and all information is processed on that one page.

  • Multi-step checkouts: Use multiple steps, and often pages, to complete the checkout process.
  • Single-step checkouts: Use one step to complete the process, such as a single webpage, a single email, etc. While they may require multiple fields to be filled, they are often on a single page or done with only one ‘action’ being required by the customer.
  • Single-click checkouts: Use a single click to complete checkout. Billing, shipping, and other payment information will typically need to have been previously entered for this to work.

2. Accordion checkout

Example of Nike’s accordion style checkout with section headers highlighted

An accordion checkout involves a series of checkout steps that exist on a single checkout page, but which prompt the user one section at a time. Once information is properly entered into one section, the user proceeds to the next section, guiding the user along the process of data entry.

If a user fails to enter information, they are prompted to complete the section before proceeding. Users are unable to proceed to the next step until the preceding step is complete, making it difficult to miss a necessary field of information.

3. False single-page checkout

Bellroy’s false single-page checkout

A false single-page checkout displays all required data fields at one time, but requires them to be completed separately. Despite all data fields being available, some must be completed and submitted prior to advancing to the next section.

A false-single page checkout functions much like a cross between an accordion and single-page checkout, showing all required fields but guiding you through sections in a structured manner. Having all of the information on a single page creates the illusion that this is a true single-page checkout, but users are unable to enter information in any order they want.

How to optimize a single page checkout

Switching to a one page checkout isn’t enough; from there, you’ll want to optimize and improve the design, layout, style, and functionality. Remember that there are multiple variables impacting conversions, and you should come back and repeat these steps in cycles, steadily improving over time and getting better with each iteration.

Simplify, simplify, simplify!

Simple mobile checkout design with different sections of checkout in sections

Keep your page simple and clean, as you want the design to be stylish but still accessible to new and veteran customers alike. CTAs should be conveniently displayed, prominently featured, and easy to navigate. Make the information you are requesting clear by leaving a label visible rather than an empty form field.

Overcrowding the customers’ screen can distract and confuse potential buyers. Instead, keep a minimalistic design and make sure navigating the page is easy and convenient. Display products along with detailed information so that customers can compare and make an informed decision.

Actively update order summary and pricing during checkout

Updating the order summary and pricing details throughout the checkout process provides the user with the most relevant, up-to-date information about payment. Giving users the most current information about the payment will help keep them in the checkout process and funnel them through to complete the purchase.

Include final price in last CTA

Your final – and most prominent – CTA should be to complete payment and checkout. When including this call to action, make sure that there is nothing else distracting the user or directing them elsewhere. At this point, focus efforts on finalizing the sale.

Be sure to include the final price (which should include all taxes and any additional fees) when prompting users to click their final CTA and complete their payment. Also make sure that you disable duplicate submissions once they click the CTA, to ensure multiple orders are not mistakenly submitted.

Feature security and trust seals

Displaying security and trust seals in a prominent location of the checkout page instills confidence in the customers. Having any relevant security badges, including credit card processors, payment processor, fraud protection, and more build trust with the customer and confidence in your payment platform.

You want to avoid cluttering up the payment pages, but displaying security and trust badges in a clean, non-intrusive way will give customers peace of mind and lead them to purchase. Normal practice is to display the security badges in the footer.

Reduce form fields and simplify lengths

Limiting the quantity of checkout form fields required keeps checkout speeds up and ensures that users do not get slowed down during payment. Every field you remove from checkout saves paying customers time and brings you revenue faster.

On top of reducing the number of form fields, you also want form fields to be sized according to the information you are requesting. Your postal code entry field does not need to be as long as an address field. Manage the sizes and quantity of the form fields to keep the checkout seamless and efficient. In general, keep the labels directly above the form field where information is being requested, making scanning and entering data in the form easy.

Mobile-friendly first

Graphic of device with checkout designed on screen

As ecommerce has gained traction with customers, more shopping has shifted to mobile devices. In today’s market, any ecommerce checkout experience should be mobile-friendly, operating seamlessly and smoothly on a mobile device.

Whether your primary audience is on desktop or mobile, providing a responsive design is essential for keeping your platform accessible to all users.

Remove checkout page distractions

Reduce buttons, images, advertisements, and more to the essentials, as payment is not when you should be prompting customers with these requests. When customers are along the path to purchase, your efforts are better utilized making the payment process smooth and efficient for the customer.

Connect customers with support

Connecting potential buyers with customer support when they need it most can be the difference between an abandoned and closed sale. While you don’t want to add too much to a single-page checkout, linking customers to support options (including email, phone, and chat) when they need it can help keep them along the path to purchase. It’s good practice to have your chat box trigger to open when a customer remains idle for a minute or two.

Prioritize and highlight your main CTA, the payment button

Your main objective is to finalize the sale, and you should draw most attention to your main call to action, which is your payment button. While you may be tempted to remarket, gain customer information, and more, you should stick to the main goal and highlight your payment button.

5 essential checkout page visuals to include

Optimizing a checkout involves not only best practices and principles, but means tailoring it to your ecommerce store and the needs of your customers. There are five main features any checkout needs.

In general, less is more; keep it clean, minimal, while still beautiful and intuitive. You want to reflect your brand’s style and make the experience appealing.

Here are five essential visuals to include in a one-page checkout:

1. Items count

Screenshot of Nike checkout with item count highlighted

Always display an item counter, indicating the current number of items in a customer’s shopping cart. This is especially important for ecommerce stores that feature small items where customs often purchase a high number of items.

This not only helps customers keep track of their items, but it may even motivate them to make the delivery worthwhile by adding more items to cart.

2. Product information

Screenshot of Nike checkout with product information section highlighted

Display as much information about the product as possible while still retaining style and appeal. We process visual information faster than text, so include the product title, size and quantity details, customization such as colour and more, price per unit, and total price, in a way that a customer can survey quickly and efficiently.

Provide as much information as you can without overwhelming users, including interaction buttons that will allow customers to remove items and edit their cart details.

3. Save items, email cart, or make a wishlist

Add buttons and other interactive options to edit the cart. Giving customers the ability to save the contents of their cart or email themselves the list is a great way of recovering customers abandoning checkout.

4. Checkout summary

Screenshot of Nike checkout with checkout summary section highlighted

The time of payment is the time to lay everything out on the table, if not earlier. Make sure that all of the payment information is made available – and is displayed clearly – to your users. Include a subtotal, the value saved from any discounts or offers, shipping costs, taxes, and a final total price.

If there is anything else important at this point that is specific to your market or industry, be sure to include that as well.

5. Note or special request

When possible, providing a customer the option to leave a comment, note, or make a special request regarding the purchase can be helpful. This can help you customize the order or payment, as well as give you detailed information about customer feedback and needs, helping you better serve customers in the future.

16 one-page checkout examples and templates to model after

Designing a checkout page from scratch can be a complicated, harrowing experience, requiring a lot of time and effort. All the tips, tricks, and strategies only go so far. Sometimes, you just need to see these principles in practice to get a grip on how to do it best in your own checkout.

To make things easier, there are a variety of design and layout providers that sell pre-made, customizable checkouts. Whether you’re just looking for inspiration or want a pre-made, customizable one page checkout template to build on, see the one-page checkout templates below:

1. Nine single-page ecommerce checkouts of varying quality

Resource type: Example

This collection of single-page ecommerce checkouts from Econsultancy ranges in quality to give you an idea of not just what to do, but what practices are currently being deployed and how effective they are. Learn what is and isn’t effective with a variety of one-page checkout examples from Wamli, the Olympic Association, Honey Badger, Sephora, and more!

2. E-commerce One Page Templates

Resource type: Template

A library of high-quality e-commerce one page templates; explore this curated list for a review of the template, a live demo of the template, and a link to the download so you can get it for yourself. Check out these responsive, high-quality single-page templates to get the best performing checkout for your ecommerce platform.

3. One Page E-commerce Websites

Resource type: Template

If you plan on developing your own site out, check out this collection of one-page ecommerce websites for examples of landing pages to draw inspiration and innovation from. Each checkout example has an image of the webpage along with the best features of the checkout page to help you learn from.

4. 12 e-Commerce Sites with the Most Inspirational Checkouts

Resource type: Example

Drawing on some of the most innovative and successful checkouts on the web, Ecommerce Platforms covers 12 examples of highly effective checkouts. Taking strategies employed by Apple, Bellroy, Nixon, Amazon, eBags, Crocs, and more, learn what to include to create an ideal checkout for customers.

5. One Page Templates

Resource type: Template

Featuring over 450 unique one page ecommerce template designs, there is a checkout page there that can suit your ecommerce platform needs. Sort through trending, best selling, newest products, and low price offers. Get a visual of what the checkout page looks like, and consider how it could work for your page.

6. 5 Examples of Ecommerce Checkout Done Right (And wrong)

Resource type: Example

See the visual layout of checkouts used by leading ecommerce platforms (Apple, Nike, Crocs, and more) and gain meaningful insights through the breakdown of the checkout design. With pros, cons, and actionable steps for each checkout design, you get an idea of the thought process behind why the checkout is designed that way and the advantages and disadvantages to each method.

7. 48 Free Professional ECommerce Website Templates for You To Try

Resource type: Template

Centered on professional and business applications, this post features the 10 best free ecommerce web templates for 2019, with quick summaries so you can compare at a glance. Beyond that, scroll through a range of thumbnails that feature examples of templates available as well. Even if you aren’t looking to buy, this collection being available on one screen allows you to quickly compare different designs, layouts, and structures for your one-page checkout.

8. 10 Examples Show What Top Sites Are Doing with eCommerce Cart and Checkout Design

Resource type: Example

See 10 concrete examples of popular and useful checkout features that help improve the checkout process of a single page checkout. Rather than focusing on a company specifically, this article focuses on 10 must-have features for any checkout, and provides real-life examples of how companies achieve this in their own checkout. 

By centering their strategies around the features as opposed to companies, they provide clear examples of what to do on your own ecommerce site and explain the methodology behind each tactic.

9. One Page eCommerce Websites and Templates from ThemeForest

Resource type: Template

As a marketplace for various website themes, templates, code, and more, there is a wide selection of one page checkouts to choose from for any ecommerce platform. Explore their comprehensive list of available templates to buy, or simply review to gain inspiration for your own designs and layouts.

10. microStore – OnePage E-Commerce Template

Resource type: Template

One-page checkouts are not just for large ecommerce stores with many products. Even if you only sell a handful of products, having a single-page checkout can greatly improve sales and revenue. This microStore template can get you started, providing the core features and outlines which you can customize to suit the style of your ecommerce platform.

11. Top 44 Free eCommerce Website Templates Built With Bootstrap 2019

Resource type: Template

This article features 44 of the most popular, free ecommerce website templates that were built using Bootstrap in 2019. Each template has a screenshot to show you the design, as well as a description listing compatibility and design features. Use these examples for inspiration or purchase the bare template and suit it to your unique brand style.

12. 5 Examples of Inspired Checkout Processes That Bring Results

Resource type: Example

Featuring successful one-page checkout implementations, this article highlights strategies and provides examples of each to learn from. With explanations of the reasoning behind each strategy as well as how to employ it effectively on your own checkout page, this collection of tips for a single-page checkout will have something to help improve your own ecommerce platform.

13. Top 28 Free One-Page Website Templates Built With Bootstrap 2019

Resource type: Template

Highlighting free one-page templates developed by Bootstrap in 2019. Not only are these some of the best website templates, but there are collections from some of these designers so you can select the perfect fit. With links to buy, you can get set up instantly, customizing to your brand and style depending on your needs.

14. Mart – Onepage E-commerce HTML Responsive Template

Resource type: Template

This features the Mart design, a responsive ecommerce HTML5 template with a clean, customizable design meant for Bootstrap integration. No matter what ecommerce market you have, this design can work for you. If nothing else, get an idea of how to combine sleek, stylish design with a simple, clear process for an intuitive checkout page.

15. Ministore one page ecommerce HTML/PHP template with Paypal and Stripe

Resource type: Template

If you’re starting out with a small product list or have a niche business with a limited inventory, this Ministore template is ideal. With accessible, flexible coding options, you can design this to fit your ecommerce needs in a single page, easily integrating up to six products.

16. 5 Examples of Great eCommerce Checkout

Resource type: Example

Review visual one-page checkout examples on Trellis, seeing exactly what the checkout looks like for B&H Photo Video Pro Audio, Bonobos, The Home Depot, Nordstrom, and Myntra. With explanations of the tactics they are using, get tips on what these companies did to make a great single-page checkout experience.

5 changes more important than one-page checkout

Usually the motivation behind moving from multi-page to one-page checkout is to improve the checkout experience on mobile, decrease your cart abandonment rates, or make more revenue.

Assuming that’s the case, here’s a reminder that these 5 changes will have a greater impact on your bottom line than a one-page checkout will.

1. Free shipping – the real #1 cause of cart abandonment

No matter what you change about your checkout layout, nothing will have as much impact as adding free shipping options. On the Baymard chart, extra costs were cited as the reason for cart abandonment in 55% of cases. A large portion of this is due to additional shipping charges alone.

Refrain from adding any additional costs at the time of payment, and provide free shipping whenever possible. This will greatly reduce the abandoned checkouts and keep customers along the path to purchase.

2. Google Maps API (auto-fill address)

People think about the number of clicks in multi-page checkout, but they forget about the massive amount of input involved in entering addresses! Typing your address is repetitive, and gets tedious the more you do it.

Do yourself a favor and integrate with the Google Maps API. It will auto-complete an address as soon as a shopper starts typing it in. This auto-fill feature is ideal for speeding up checkout, ensuring addresses are completed in full, and accurate data entry.

3. Opt-in by default – customers should never repeat information

Crutchfield checkout with shipping address same as box highlighted

Never request users enter the same information twice during checkout, especially when it comes to addresses.

Most people use the same address for both shipping and billing, so ask them only for the shipping address, with a check-box for “Same as shipping address” for the billing address. The check-box should be checked by default, giving customers the option to update if needed while saving most users time and effort on their checkout.

4. Inline form validation

Example of inline form validation with form fields with auto-validation highlighted

Inline form validation enables user inputs to be verified as the form is being filled out. This allows the status of their data to be immediately updated in real-time. When invalid data is entered, the inline form notifies the user of inadequate or inaccurate information, and prompts them to correct the mistake.

Unbelievably, 40% of retailers don’t use this (and 20% who do apply it improperly). Common mistakes involve outdated error messages and prematurely invalidating incomplete responses, causing users to think they’ve made a mistake filling out the form when they haven’t completed the form.

Inline form validation has a number of core benefits, including increasing customer confidence in the process, making context about each line clear, decreasing the likelihood of customers skipping required fields, and ensuring accurate customer data is being collected.

5. Authentication retries

Not all checkout abandonment is due to design flaws. Some abandonment is actually due to failure on the customer’s end, such as failed transactions due to payment authentication failure. This accounts for about 4% of all checkout abandonment according to Baymard Institute’s 2018 study.

In some cases, retrying payment authentication immediately after a decline will result in an approval. On average, retrying a payment authentication failure can result in a completed sale 7% of the time. While this seems small, having an authentication retry can recover a significant number of lost sales (and revenue!) over time.

To get a checkout that functions seamlessly, Bolt offers a one-page, modal checkout that simplifies the buying experience. Bolt improves the customer experience of an online retailer’s site, helping capture potentially lost revenue due to abandoned checkouts and preventing “false positive” order rejections for good customers.

Bolt’s checkout uses minimum form fields and manages their size to keep the checkout easy to access and simple to use. Using over 200 different data points to identify fraud, Bolt’s checkout process offers the peace of mind and protection that your customers – and you – want for your checkout, without compromising on user experience design and performance.

ThinkShop by Bolt does not constitute professional tax or financial advice. Contact your own tax or financial professional to discuss your situation.