To get traction with an online store, you need to have a great checkout page design. It can often be difficult to know where to start or what features are most important. With so many competing recommendations around building an ecommerce experience, it can become challenging to identify trends and best practices for checkout page design and implementation.
This article will help you get a checkout page that has the functionality your ecommerce store needs, and a style and design that properly reflects your brand. To help you do this, we’re going to cover the following topics:
- What is a checkout page and why should you optimize it?
- Checkout page best practices and strategies for optimization
- 6 checkout page examples to learn from
- 8 Checkout page templates to develop your own designs
If you are ready to download a template, head straight to the bottom and explore the resources there to help you find a template that can easily be installed. Keep reading to learn about checkout best practices so you can more efficiently choose the right checkout design for your online store.
What is a checkout page and why should you optimize it?
By definition, a checkout page is the page(s) related to payment and shipping/billing details on an ecommerce store. The checkout page gives customers the opportunity to enter payment details and complete their order. The checkout process will collect a customer’s shipping details, billing details, shipping method and payment method, and give an option to submit the order.
You should continuously improve your checkout, optimizing to make it faster, more efficient, and as frictionless as possible. Creating a convenient, easily accessible, and high-performing checkout will improve the buying experience for customers, reducing checkout abandonment and improving conversions.
What is checkout abandonment and why does it occur?
Checkout abandonment is when a customer leaves the payment process after initiating checkout. This accounts for lost conversions, and you should work towards optimizing checkout to capture this otherwise lost revenue. Use analytics to understand why customers are abandoning your checkout and optimize to create a better user experience and capture sales.
On average, 70% of checkouts are abandoned, based on a collection of 41 separate studies. Before you can improve your checkout to limit abandonment, you first need to understand why customers are leaving. There are a number of reasons customers abandon checkout, but these are some of the main causes:
- Unexpected additional charges and fees: Unexpected costs or fees that are only added to the order summary at the time of purchase causes customers to reassess the value of the purchase they are making. In some cases, these added fees will cause the customer to change their mind.
- Forced account creation or registration: Forcing users to register in order to proceed creates an obstacle for customers that are ready to buy. Never hinder checkout, instead offer guest checkout options.
- Overly complicated checkout process: Customers are looking for a fast checkout experience when purchasing online. A complex checkout process that takes too much time, requires too much information to be input, and is hard to follow along will slow customers down and lead to abandonment.
- Performance issues, errors, and crashes: Minor performance issues are acceptable, but consistent performance problems, errors, and crashes fail to provide an optimized user experience and instill a lack of trust in the payment process.
- Lack of payment methods and shipping options: Retailers that aren’t able to offer unique shipping options and a variety of payment methods fail to provide the convenience customers are looking for. Customers that can’t ship the item via their preferred courier or pay using their preferred method are less likely to complete purchase.
While many of these will impact your checkout, some will have a greater impact than others. First, use analytics to identify the weaknesses in your checkout so you can find areas for the most meaningful improvement. Then take action, adjust, and steadily improve conversions.
Checkout page best practices and strategies for optimization
Checkout page best practices are a set of strategies and guidelines to follow for creating efficient, effective, successful checkout pages. These best practices are a collection of top tips and strategies for optimizing your checkout page to reduce checkout abandonment and improve conversions.
There is no one-size-fits-all answer, as your ecommerce store and experience are unique to your brand and audience. These best practices will help give you tips to follow when designing your own ecommerce checkout page, and help you identify the elements that are most important when choosing a pre-existing template.
Here are some key payment checkout page best practices to follow for best results:
1. Allow guest checkout
We cannot stress this enough: never force customers to create an account or register prior to completing checkout. This creates an added step (or steps) for customers, slows them down, and ultimately causes them to reconsider whether they want to proceed. Always offer guest checkout options so that customers are not slowed down, and have the option to proceed by just providing their email address.
2. Provide many payment options
Offer customers a variety of payment options, prioritizing the major payment methods first. The more payment options customers have, the more customers will follow through to complete purchase. Start with major providers to enable most customers to use a payment method, expanding as its feasible for your business.
3. Prioritize mobile-friendly design
Since 2018, over half of all ecommerce payments are made using a mobile device, forcing ecommerce retailers to focus on mobile-friendly UX and designs. When creating, designing, and optimizing your checkout, you need to prioritize mobile-friendly design to make the checkout seamless for these users as well as uniform across all device types.
4. Display trust signals and badges
Prominently display trust signals, badges, and seals to give customers peace of mind during checkout. Showing these throughout checkout gives customers confidence in the platform they are using and the security it provides. If customers do not feel their financial and personal details will be kept safe, they are unlikely to complete purchase in your store.
5. Refine and simplify
The simpler you can make the checkout process for your customers, the more appealing it will be. Always remember that providing a convenient, clear, and accessible process is your main objective. Continuously refine the process, removing any unneeded steps, removing any unnecessary form fields, and streamlining the process to be as fast and efficient as can be.
6. Use a progress indicator
A progress indicator identifies the stage of the checkout process you are on, while also outlining the entire step process. This helps customers know where they are in the process, how many more steps are left, and get a general idea of how much longer the process will take.
This is especially true of multi-step and more complex checkout processes, but in some single-page checkouts as well. This structures the process for customers and makes it simple to follow along.
7. Limit distractions
There are exceptions to any rule, but in general, a checkout process should be clean, clear, and have limited distractions. Remove any added distractions throughout the process that might pull the customer away from checkout. Consider removing the header and footer, the menu options, and any other unneeded buttons to keep customers on track and focused on following through to the end of your conversion funnel.
8. Use data validation and input error notification
Add data validation and notifications for input errors to the checkout process to reduce errors during checkout and get more accurate customer details. This feature ensures that customers enter data accurately so that you have validated details. For the customer, it guides and simplifies the data entry process.
9. Offer a one-page checkout
If simplicity is the aim of the game, reducing to a single page checkout is an ideal method to make the payment process easier and frictionless; a one-page checkout makes it easier to isolate the checkout process. In general, one-page checkouts reduce checkout abandonment by having less steps, being easier to follow through, and taking less time to complete.
10. Don’t surprise customers with additional costs
Adding unexpected costs at the time of purchase makes customers second guess the value of the purchase and whether they want to proceed. Instead, provide as much information — including shipping fees, taxes, and any other costs — upfront so customers are aware of the full cost prior to entering checkout.
11. Connect users to customer support
Once you’ve identified common areas where assistance is required during the checkout process, add customer support options. Find the resource that best helps customers — whether that’s a knowledge base, a call center, or a live chat — and connect customers with support where they commonly experience issues. This lets you remedy these issues as they arise, and keep your customers on track to buy. A great way to handle this is to trigger a chatbot on user inactivity to assist the customer.
12. Assess exit-intent
Collect feedback from customers that abandon checkout to get an idea of why they leave, and to develop strategies for improvement. Use exit-intent popups, follow-up emails, and other methods to get feedback from customers on why they abandoned checkout. From this, you can learn where to add customer support, what design changes to make, and how to adjust form fields to optimize checkout.
13. Reference customer reviews
Marketing copy only goes so far. Some customers want to hear directly from other users to get an idea of how they felt about the final product and the overall service experience. Displaying customer reviews during checkout can help give users confidence in not only the product they are looking to buy, but also the quality of service that comes along with it.
14. Use emotion to connect and inspire
Create a sense of urgency and FOMO to motivate customers to complete purchase. By connecting customers emotionally to a product or creating a sense of exclusivity, you can convince customers of added value and better drive conversions. Indicate when a deal is close to finishing, when a product will no longer be available, and when inventory is low to incentivize customers to buy.
15. Use checkout buttons to make paying ultra-fast
Enabling checkout buttons for nearly instant or express checkouts is a great way to optimize checkout and make it easy, fast, and efficient for customers. This requires customers to be members with existing customer info, but this can save recurring customers time and effort on each purchase they make.
17. Enable the checkout progress or cart contents to be saved
Give customers an option to save the progress of their checkout or their item list for future purchase if they abandon checkout. When possible, set up an auto-save feature so that cart contents are automatically saved when customers abandon checkout. This helps recover abandoned payments, as customers are able to easily resume where they left off.
18. Follow up with recovery efforts
Some checkout page best practices extend beyond the checkout itself. Recovering abandoned checkouts after customers have left will help you recapture lost revenue and reduce the impact your checkout abandonment rate has on your bottom line. Send recovery emails that remind customers of the value they are missing, allow customers to easily continue from where they left off, and enticing them to come back and complete their purchase.
19. Test, measure, adjust, repeat
Your checkout is not a one-and-done setup, and will require consistent work to adjust and improve it. Your checkout needs to stay up-to-date, and you’ll want to regularly check best practices and use those strategies to make the best checkout for your customers. Test changes and campaigns, measure results, make adjustments, and repeat the process. Continue doing this regularly, creating a cycle of review and advancement, steadily making your checkout better for your customers.
6 checkout page examples to learn from
Checkout page best practices will guide the creation, development, and optimization of your checkout page. To get better at perfecting the format, UX, and style of your checkout, you’ll want to learn from those doing it well. Below are 6 examples of checkout pages to learn strategies and tips from:
Nike does checkout extremely well. They hit most of the best practices, nailing a simple, sleek design that gives customers information in a clear, concise, digestible way. However, they rely on their name recognition to give customers a sense of security and peace of mind when using their service, as no trust seals are displayed.
- Accordion-style checkout that clearly guides the user through to complete payment
- Order summary prominently displayed throughout checkout
- All additional costs (shipping/taxes/etc.) included
- Self-contained checkout with few distractions (removed header buttons)
- Live chat button lets you connect with customer support instantly
- Guest checkout enabled
- No trust signals, seals, or badges displayed
- No exit intent popups
- No customer reviews readily available
Bellroy has arguably one of the best designed checkouts, isolated to a single page but structured as multiple steps to guide the user. Information is clearly displayed upfront so there are no surprises at the end. They also have form validation and error notifications to ensure customers enter accurate personal details.
- Order summary displayed prominently
- Additional costs (taxes/shipping fees/etc.) included
- Isolated checkout with limited distractions (header removed)
- Guest checkout available
- Form validation and error notification
- No trust signals, seals, or badges displayed during checkout
- No exit intent popups
- No customer reviews available in checkout
Asos uses a sleek, clean layout that is easy to follow. Their checkout hits many best practices, but makes one fatal error, they make guest checkout difficult rather than easy.
They first filter you into an “already registered” page, which functions as a login page. If you want to checkout as a guest, you have to click on “New to Asos?” and then “Continue to Checkout,” adding unnecessary steps and making it challenging to find. While Asos does save cart items, it does not automatically add them to your bag when you go back to the checkout, instead recommending you add items to your bag that you recently had in your cart.
- Security signal displayed throughout checkout
- Order summary clearly displayed
- Isolated checkout with distractions removed (no header or footer)
- Clear, guided accordion-style checkout
- Attempts to force account creation; you must hit continue to proceed to guest checkout, which may cause some people to abandon
- Promo code made a prominent part of checkout; which may cause some customers to leave checkout to search for a discount code
Unlike some other checkouts that are so large they take up more than the user’s screen — forcing them to scroll — Threadless has a compressed checkout so you can see everything displayed clearly. Their accordion-style checkout guides users, breaking down the process into parts.
- Order summary displayed clearly throughout checkout
- Total costs including taxes, shipping, etc. are displayed
- Login and sign-up options are easy to access but not burdensome for guests
- Accordion-style checkout guides the process
- No trust signals shown
- No customer reviews or testimonials
Crate&Barrel follows many checkout best practices, showing the order summary, indicating the number of items in cart along with product details, displaying shipping method information, and connecting customers to support via live chat. They miss the mark with some common things to avoid, leaving the checkout overcrowded, cross-selling in a way that could cause customers to leave checkout, and leaving a header with a full menu.
- Order details prominently displayed
- Interaction options allow customers to easily remove items from their cart during checkout
- Ability to save checkout contents for later
- Easily connect to live chat with the click of a button
- Discount available to all customers
- Distractions, such as header menu and upsell could lead customers away from checkout
- No trust seals or badges displayed
- Difficult to change shipping method
With 20+ years experience in ecommerce, Zappos has refined their checkout to be seamless and smooth. It gives users the basics without overcomplicating the process, guiding them along through each step. Their main error is forcing account creation, which adds steps for the customer and slows them down. Some potential customers may not want to sign up, and could abandon checkout altogether.
- Isolated, contained checkout with few distractions (no header menu)
- Easily connects you to your preferred customer service method
- Order summary clearly displayed and scrolls when users scroll on page (always visible)
- Call to action button that completes purchase is not clickable until all details and form fields have been filled out
- Total cost, including additional fees and shipping are clearly shown
- Forced account creation!
- No trust seals or badges displayed
8 Checkout page templates to develop your own designs
Designing a checkout page from scratch can be time-consuming and costly. Purchasing a downloadable template that can easily customized, installed, and running is a great alternative. Choose a template with the features and functionality you need, an appealing format, and enough flexibility to match your brand’s style.
To help you find templates that you can have running quickly, we’ve collected 8 helpful resources below.
Featuring a list of 25 creative checkout designs that can be downloaded and applied to your checkout. These templates are easy to download and integrate, requiring little to no coding. If you don’t want to download them, you can also use these designs as inspiration for your own creation.
This resource is a zip file of 30 free checkout templates that can be applied to your ecommerce store. Download them all in one go and use them as needed, choosing from a variety of styles, formats, and layouts.
EnvatoMarket is a virtual store for website themes, templates, code, and more. They have a variety of checkout page website themes and templates, designed for unique applications. Find a template that is pre-designed with your purpose in mind or tailor it to your needs and style.
First, they cover 42 examples of shopping cart and checkout designs to help teach you what you should and shouldn’t do. They then feature a selection of ecommerce templates for some of the most prominent ecommerce platforms, such as WooCommerce, Magento, Shopify, Digita, Tennisa, Volta, Prestashop, Prestige, Opencart and more. Explore which templates are great for your online store, and then download and apply the theme that works for you.
This collection of open source checkouts from CodePen are all free templates that can easily be customized to suit your ecommerce stores style. Many of these feature unique performance and functionality, intuitively designed to create a special checkout experience. You can download these directly and get them up and running on your own store after customizing to fit your store’s style.
Bootstrapnipp has a range of checkout templates designed specifically for Bootstrap. Download full checkout templates, ready to be customized for your site or download specific elements such as a checkout button. These designs can easily be personalized for the use you require, with a variety of layouts to choose from.
This is a catalogue of checkout templates that make for easy reference. Not all are downloadable, but all will provide inspiration for developing your own intuitive checkout process. Some can be quickly downloaded and added to your checkout, customized to fit your brand.
These two checkout forms are made for Bootstrap 4. They are free to download and use, requiring no attribution and providing a responsive design. They are extremely easy to add, as you can simply copy and paste the template code and have your checkout up and running smoothly.
You shouldn’t have to balance optimizing for the best customer experience and providing high-quality security and fraud protection. Bolt’s checkout experience platform is designed with best practices in mind, offering customers a frictionless UX, an ultra-fast process, and unparalleled security.
Bolt helps retailers with fraud too, providing high-quality fraud detection that approves more good orders and provides 100% coverage of fraudulent chargebacks. This allows you to offer customers the security they deserve, improve your conversions, and ultimately, capture more revenue.