The checkout page is where the magic happens. It’s the last step towards completing a purchase.
As a developer, you do not want to distract them, make them doubt their decisions, or succumb to last-minute resistance.
You want their experience to be smooth as possible, without obstacles, distractions, and unnecessary hoops. The easier the checkout process, the more conversions you’ll have.
After all, customers hate it when you try to complicate things.
Most developers swear by a single-page checkout, while others prefer a multi-page checkout.
Today, we plan to compare the two and help you decide which one fits your business best.
Choosing Between a One-page Checkout and Multistep Checkout?
What’s a One-page Checkout?
A one-page is exactly as the name suggests –a checkout page with all the checkout steps on the same page, allowing the user to complete a purchase without leaving the page.
Here’s an example:
The idea is to accelerate the checkout process. Once they fill out the form and click “order now,” that’s it. There are no other pages ahead.
The Pros and Cons of the Single-page Checkout
The Pros
Reduced Checkout Time
Speed is of the essence when a customer is checking out. Instead of being made to open a new page to enter more information, a single page checkout means they only have one page to worry about.
On average, it takes about 53 seconds to complete a purchase on a single-page checkout, while a multi-page checkout takes about 1 minute and 40 seconds. That’s a lot of time, enough to discourage some of your customers to abandon their carts.
So, the fewer the pages, the faster the checkout process, hence more conversion.
Few Clicks
Having multiple checkout pages translates to a lot of unnecessary clicks.
A one-page checkout will significantly reduce the time needed to complete a purchase.
It does this by eliminating unnecessary clicks.
It also takes the uncertainty out of the whole process, making the user understand right off the bat what’s expected of them.
It’s Highly Intuitive
The customer doesn’t have to think through anything or try to figure out what you want from them.
They can see all the checkout steps on a single page. They know where they’re headed, what’s expected of them, and what information to fill out.
Minimised Cases of Cart Abandonment
Customers already know what information is expected of them. They know when they order something online, they have to provide their names, addresses, and shipping and payment details.
A single page means you’re not trying to play smart with your customers. You provide them with a complete form, and they’ll fill out all the details – after all, they’re only doing it once.
The Cons
Some Customers May Find It Overwhelming
A single checkout page is meant to simplify the checkout process. But it can also be counterintuitive in that it presents a lot of information all at once instead of in small chunks.
So, before you squeeze all your information into a single page, you want to ask yourself, will your customers find it overwhelming?
You also want to test out the page. See how many users abandon it upon viewing it or if they fill it up to a certain point and call it quits.
If the view of it threatens them, then going the multi-page way makes more sense.
But if they’re filling it up to a certain point before abandoning it, that might mean you’re collecting too much information.
Not Ideal for Analysis
How do you identify the snag in your form?
Where exactly do a majority of your customers abandon the checkout form?
It’s hard to tell at which step your customers abandon the process.
But with multi-page checkout, you can quickly check which page the customer opted out of the buying process. If it’s the payment section, you can conclude they didn’t find a payment gateway they’re comfortable using.
If it’s shipping, it could mean they were discouraged by the available shipping options or delivery time.
Brands Using the Single Page Checkout
Just to prove single-page checkouts aren’t a miscalculation on your part, let’s show you a few examples of eCommerce giants using them:
#1. Amazon
One of the biggest proponents of the single-page checkout is none other than the world’s leading ecommerce marketplace, Amazon. And they do it in style.
First, they have progress bars that tell users how far they have gone and how long they are from completing the process.
Instead of showing all the information at once, they have broken them down into four sections, with each section opening up after you’ve completed the previous one.
#2. Bellroy
Bellroy squeezes its lengthy checkout form on a single page. Their checkout process is as intuitive as they come, allowing the user to provide all the information they require from them in one place.
To simplify the checkout steps, they have divided everything into three columns.
The user reviews their order in the first column. In the second column, they enter their delivery details and complete payments in the third column.
The neat layout makes the whole experience straightforward.
#3. Sephora
Sephora killed it with their design. Their checkout process appears easy and fun, from how they have structured the form to the styling and everything else.
It’s a smooth experience, fast and snappy. Users move from one step to the next without experiencing any hitch.
The steps are also numbered to show progress and what the remaining steps.
#4. Nike
Nike must have put a lot of thought into designing their checkout page. Their form ticks many of the best practice elements for creating a checkout page.
First, their page is simple and sleek, with nothing to distract the user. They also offer guest checkout, summarising all the information you’ve entered.
Users receive a green tick with every piece of information they input into the data field. They’re also notified straight away if they have made an error.
Customers are also presented with multiple payment options, allowing them to choose the one they’re most comfortable with.
What’s a Multi-page Checkout?
A multi-page checkout breaks the entire checkout process into simple steps and pages. Customers have to complete one step and click on a series of other pages to complete the process.
The Pros and Cons of a Multi-page Checkout
The Customer is in Charge
With a multi-page checkout, the customer is in charge of each step. They can verify the detail of each step and correct them before they proceed to the next one.
It helps them avoid human error by giving them a sense of certainty. They can also review their order before swiping their credit card details.
Easy for Google Analytics
Having multiple pages means you can analyse each page and determine which one of them is problematic.
You just have to check on which page most customers abandon their carts.
Once you’ve identified the page, you can go ahead and optimise it for conversion.
Remind them Later
Usually, the first page of the multi-page checkout collects a customer’s primary information.
If they decide not to complete the process, you can still use their contact details to follow them up.
The Cons
It’s Slow and Time-consuming
You want the checkout process to be fast. The more time customers spend interacting with the process, the more likely they will abandon the cart.
The reason ecommerce giants avoid multi-page checkouts is because the process is exhausting.
User-friendliness
A multi-page checkout isn’t the friendliest of designs.
That’s because the customer has to go back and forth to make even the slightest of changes.
For example, if the customer wants to change their address when they’re in the last stage of the process, they’ll have to make several clicks to make it to the first page where they can make the changes.
Brands Using the Multi-page Checkout
#1. ZARA
ZARA’s checkout is divided into three, with a progress bar at the top of each page.
The progress bar allows the user to see the entire journey so they know which stage of the checkout process they are at.
The overall design of the checkout page is minimalist and stylish. It also doesn’t distract the user by displaying unnecessary information.
Everything is instead in black and whole, with lots of free spaces and no pushy banners.
If there’s anything that ZARA has perfected to the core is minimalism, and their checkout page is a reflection of that.
#2. JYSK
JYSK uses many long fields that take up a lot of screen space. They might look a little old-fashioned, but they make form-filling appear easy.
JYSK uses a four-step checkout process. They even provide a static motivator under their summary bloc.
Using a multi-page checkout makes a lot of sense because they sell long-term-use products. The pages give their customers the extra time to confirm their information so they don’t enter anything incorrectly.
#3. iHerb
iHerb uses a different approach. The user must first sign up for an account to purchase anything on the platform.
That’s why it makes a lot of sense for them to use a multi-page checkout system.
They don’t need to ask the user to enter their email address as they already would have. Their checkout page also has a lot of free spaces that could have been better used to display some motivators or show order details.
Instead, the user has to go back to the cart to check which items they have ordered.
How to Set Up a One-page Checkout on BigCommerce
BigCommerce agrees with the many benefits of having a one-page checkout.
- First, they made their already optimised one-page checkout the default setting for anyone setting up a BigCommerce store.
- The optimised one-page checkout allows customers to fill out their contact, shipping, billing, and payment information all on the same page.
- They even have the edit cart button that customers can use to edit their carts. The pages are also responsive. Meaning they can adjust to just about any kind of mobile device (that’s especially important in the modern days where smartphones, tablets, and laptops have become the most popular way to browse the internet).
- Even better, some shipping details, like the country, will already be filled out based on the customer’s IP address.
- Also, when a customer enters their card details, the card type will be detected automatically. You don’t have to enter it manually.
- Returning visitors can skip shipping and billing and head straight to payment.
- The optimized on-page checkout has security icons that make your customers more confident they can trust you with their financial information.
These are small conveniences, but they significantly add to the time the user saves on the checkout.
How the Checkout Page is Optimized for Payment
BigCommerce supports almost all the major payment methods, including:
- Ayden
- Affirm
- Authorize.Net
- eWay rapid
- Google Pay
- Masterpass
- Paymetric
- SecureNet
- Stripe
- USAePay
- Worldpay Ecomm
Among others…
If you choose multiple payment methods, BigCommerce will list them alphabetically. Unfortunately, there’s no way around this option.
If your payment method isn’t among those listed, then the only way around that would be to use the legacy single page on BigCommerce instead of the optimized one-page checkout.
How to Customize BigCommerce’s One-page Checkout
You can customize any of BigCommerce’s stencil themes.
Note that all the themes in BigCommerce’s marketplace are stencilled.
So, how do you customize them?
#1. You can start by clicking “Advanced Settings” and proceed to “Checkout.”
#2. Scroll down to “Checkout Styling” and select “Custimize Checkout.”
This is where the magic happens.
#3. Next, go the left sidebar and select “Checkout Page.”
You want to edit the following:
- Header: You can upload an image and change the background, border, and text colours.
- Logo: You can position your logo at the right/left/centre. You can type the logo or upload it as an image.
- Discount banner: You can change the background colour, icon colour, and text colour
- Order Summary Box: You can change the background colour and the border colour
- Checkout Steps: You can change the text colour, background colour, border colour
- Heading #1: You can change the text colour and font family
- Heading #2: You can change the text colour and font family
- Body Page: You can change the focus colour and background colour
- Body Text: You can change the text colour and font family
- Secondary Text: You can change the text colour and font family
- Link: You can change the text colour, hover text colour, and font family
Generally, you want to match your checkout page colour scheme to the colour of your logo. Be sure to use the same colour for all the other marketing elements to improve your overall brand recognition.
#4. Save Your Changes
Next, select “save” to finalize the changes.
Editing the Optimized Singe-page Checkout SCSS File
Can you code?
BigCommerce allows you to optimize the checkout form by editing the SCSS file. This file is the repository for the Cornerstone theme. But don’t worry — all stencil themes share the same stylesheet.
Note: while you can change your class content, you cannot edit the class name or nest elements.
That’s because BigCommerce maps each class to multiple elements. So, changing the class structure and name might mess up future updates.
Here are some of the classes you can customize:
- The page header: .optimizedCheckout-header
- Top-level Heading: .optimizedCheckout-headingPrimary
- The item description and other low-level elements: .optimizedCheckout-headingSecondary
- The Shipping Method Box: .optimizedCheckout-overlay
- The text in the “Order Confirmation” and “Order Summary”: .optimizedCheckout-contentPrimary
- Form Fields’ Background Colour and Border Colour: .optimizedCheckout-form-input
- Form Field Text and Label Colour: optimizedCheckout-form-label
- The Numbered Steps on the Left Side of the Checkout Page: .optimizedCheckout-step
How to Configure Your Checkout Settings
BigCommerce allows you to not only customize your checkout but also configure it to match your business needs.
You can do this in the “Advanced Settings” => “Checkout.”
Let’s go through some of these configuration options:
Enable Guest Checkout
This option allows customers to place orders without signing up for an account. It automatically creates an account that your customers can use to checkout.
Customers can use their emails as their usernames and track their orders via that email.
When this option is disabled, customers will have to create an account first before they can place an order. Disabling this option will make some payment options (such as Amazon Pay, PayPal, and Apple Pay) unavailable outside the checkout page.
Enable Order Comments
With this option, customers can leave their comments on every order they place. They can add some instructions to their order.
We recommend enabling this option as it shows you’re willing to go the extra mile to satisfy the customer.
Enable Terms & Conditions
This option requires the customer to accept your terms and conditions before they can make a purchase. If enabled, you can either add your terms and conditions as text or link it to your terms & conditions page.
Multiple Shipping Addresses
With this option, the customer can include multiple shipping addresses.
It allows the customer to send the order to multiple addresses, not just one. They could be buying the product for their friends or someone other than them.
Coupon Code Collapse
This option hides your gift certificate or coupon code behind a link. Customers will have to click this link to view the field.
Disabling this option means the customer won’t require any link to view this field.
Bot Protection
Bot Protection adds a Google reCAPTCHA code to your checkout page. It’s an excellent way to prevent bot attacks and any other malicious or automated activity on your store.
We recommend only enabling this option if you have a problem with automated bots. Otherwise, you’ll be complicating the checkout process for no apparent reason, resulting in an increased bounce rate.
Enable Persistent Cart
With this option, when a customer adds an item to their cart on one device, it will be reflected across all devices.
We recommend you use this feature to synchronize the customer’s activities across all devices.
Remember this option is only available on the Pro, Plus, and Enterprise plans on BigCommerce.
Google Address Autocomplete
When you enable this feature, your checkout form will prompt the user with predicted email addresses based on what they type in.
It helps speed up the checkout process, making the customer’s work even easier.
Default Shipping
You have four shipping options:
- Least Expensive – Excluding in-store pickup
- Least Expensive
- Most Expensive
- None
Optimizing the checkout page is only one part of optimizing your ecommerce store.
To get customers to add items to their carts, it’d be practically best to also create high-quality product pages, landing pages, and blog posts.
What Makes a Good Checkout Page?
If your customer has made it as far as the checkout page, then it goes to show you’re clearly doing something right.
Attracting a customer to your store is a success in itself. But you want to make sure you do not lose them by complicating the checkout process.
To help you out, here are some of the critical elements that make all the difference between a good checkout and badly-done one:
Simple Design
Your checkout page has to be simple as possible. The customer shouldn’t struggle to figure anything out.
Don’t complicate things by asking for too much information – just enough to process a customer’s order, like their name, email, shipping address, and payment details.
Guest Checkout
You can’t force a customer to create an account in order to checkout. Some of your customers can only afford a few seconds, and forcing them otherwise is a sure-fire way to get them to abandon their carts.
What you want to do is give them an option to checkout as guests. That way, they won’t have to fill up all the details, just their emails, and they’re free to complete their order.
Trust Signals
How do you assure the customer that their money is safe with you? How do you assure them that your product or service is exactly as it’s described on the platform?
Trust signals make the user feel safe handing over their credit card information to you.
The idea is to include a section that assures the customer that their data is safe and secure with you and that they have nothing to worry about.
Mobile Optimization
Your checkout page must be fluid to adjust to the size of any screen, especially mobile.
You want to make sure everything loads just fine.
With more and more people shopping via their mobile devices, the last thing you want is to lose them due to a poorly optimized checkout page.
Order Edits
You want to make sure your customers can still edit their orders even after they make it to the checkout page.
Give them the chance to edit order quantities, colour, sizes, and other details to reduce the risk of them dropping off because they can’t make the right order.
