logo-blue lock_outline

BOLT BLOG

How to Reduce Checkout Abandonment with an Optimized One-Page Checkout


 

Icons showing a bank, money sign, and shopping cart

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 payment checkout.

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 perfect the checkout process. But there is still more you can do to improve your checkout.

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 one-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

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 using a one-page checkout. Here are a few of the main reasons to use a one-page checkout for your customers:

  • Fewer steps and 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 one-page checkout 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.
  • Clear navigation: one-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

Graphic of woman, credit card, and shopping cart

3 types of one-page checkout

Before we get into templates and strategies for optimizing your own one-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

Honey badger one page checkout example

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

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 the one-page checkout form fields.

This is also a good time to distinguish a one-page checkout from multi-step, single-step, and one-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. Customers will have previously entered shipping, billing, and other payment information.
  • 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.
  • One-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. While accordion checkouts still use a single checkout page, they provide information and prompt users in a guided way, leading the customer along the process of filling out payment information. 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 with stage being required highlighted

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 one-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 one-page checkout, but users are unable to enter information in any order they want.

How to optimize a one-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 website design on Mac desktop

Keep your page simple and clean, as you want the design to be stylish but still accessible to new and returning 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 fill 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 payment 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 check out. 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.

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 customer purchasing online with mobile phone

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 mobile options is essential for keeping your platform accessible to all users. Ensure that your ecommerce platform has a responsive, accessible mobile design for best results.

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 served 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.

Prioritize and highlight your main CTA, the payment button

Graphic of man pushing shopping cart at online store

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 customer needs. In general, 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, but you don’t want to bog down and crowd users.

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

1. Items count

Example of item count highlighted on Nike’s checkout page

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, but it’s a no brainer to include in any checkout.

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

2. Product information

Example of product information highlighted on Nike’s checkout page

Display as much information about the product as possible. We process visual information faster than text, so include the product title, size and quantity details, customization such as color 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 you to remove items, edit your order details, and the option to save directly to your wishlist.

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

Zappos checkout with move to wishlist button highlighted

As you are adding buttons and other interactive options, remember to add interactive options to save the cart and email your cart contents. 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

Example of checkout summary highlighted on Nike’s checkout page

The time of payment is the time to lay everything out on the table. 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 inspiration for 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, try these:

1.9 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 ecommerce one-page checkout 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 one-page checkout templates to get the best performing checkout for your ecommerce platform.

3. One Page Ecommerce 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 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 Ecommerce 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 Checkout Templates

Resource type: Template

Featuring over 450 unique one page ecommece template designs, there is a checkout page 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 sites (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 one-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 : One-Page Ecommerce 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 one-page checkout can greatly improve sales and revenue. This microStore template can get you started, providing the core features and outlines that you can customize to suit your needs.

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 Ecommerce 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 one-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 was 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 number of clicks involved in typing in 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 ensuring accurate addresses are entered.

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

Crutchfield checkout with shipping address same as box highlighted

You’ve probably heard that it’s bad to ‘double dip’; this is especially true when it comes to asking for shopper information. Never request that shoppers enter the same information twice during checkout, especially when it comes to addresses.

Never force a customer to type the same address twice for the shipping and billing address. Most people use the same address for both, so ask them only for shipping address, with a check-box for “Same as shipping address” for the billing address. The check-box should be filled 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 is a style of checkout that 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, and decreasing the likelihood of customers skipping required fields.

To get a one-page checkout that functions seamlessly, Bolt offers an easy integration for major ecommerce platforms like Magento, Bigcommerce, and WooCommerce, as well as for custom-built sites. Bolt’s checkout uses minimum form fields to keep the checkout easy to access and simple to use. Employing best practices in the industry, Bolt not only makes the customer experience better, but helps capture potentially lost revenue due to false positives: good customers that were falsely rejected and could have been approved.

Bolt is on a mission to perfect the checkout experience for online retailers and make sure nothing gets in the way when shoppers decide to buy, and 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.

Bolt Team September 13

If you enjoyed this post, share it.

Want to see a 5-minute demo?