It takes a lot of effort to get someone to the point where they’ve not only landed on your BigCommerce store but also added items to their cart.
You may have spent a small fortune on paid advertising and efforts to improve organic SEO in order to increase traffic to your store. And once people reach your site, you’ll need to have invested in high-quality web development and design to convince visitors that you offer legitimate value.
Then, after all the time and money you’ve put into your store, when customers are finally persuaded that you’re a good enough option for them to add products to their cart… 70% of the time, they back out before actually making a purchase.
One reason for this is that people often use carts to comparison shop. If the order total for an item on your store is more expensive after shipping and other fees than it is on another store, the customer will abandon your cart and make their purchase through the more affordable option. If you have a high rate of cart abandonments, check out your competitors to make sure your price points aren’t significantly higher than what other stores are offering (free shipping always helps, too).
Web design also plays a role in cart abandonments. You need to remember that people are busy — when they’re shopping on your store, they’re probably doing a couple dozen other things at the same time. And if they’re on a mobile device, the potential distractions are even more numerous.
So, you should make your checkout process as efficient as possible. If you force your customers to click through separate pages for billing, shipping and payment, many customers will get distracted before placing their order and potential sales will fall through the cracks. That’s why you need one-page checkout.
In this guide, we’ll show you how to reduce the frequency of abandoned carts with the Optimized One-Page Checkout for BigCommerce.
Create customized pages in BigCommerce with ShogunBuild dynamic pages that convert shoppers into customers. Get started now
BigCommerce obviously agrees with the benefits of one-page checkout listed above, because they’ve made their Optimized One-Page Checkout feature the default setting for BigCommerce stores.
With BigCommerce’s Optimized One-Page Checkout, customers can fill out their contact, billing, shipping and payment information all on the same page.
With the “Edit cart” button, customers can quickly make any necessary adjustments to their cart. Optimized One-Page Checkout is also responsive, so it works well on any kind of device (that’s especially important these days, considering that mobile devices have recently become a more popular way to browse the internet than desktops or laptops).
Shipping country will already be filled out based on the customer’s IP address, and the shipping method will be pre-selected as well. Also, when a customer enters their card number, the card type will be automatically detected (the customer doesn’t need to enter it manually). These small conveniences add up to a significant amount of time saved per checkout. Remember: the faster your checkout process, the fewer abandoned carts.
Here’s another feature for speeding up your checkout process: Returning customers are able to skip billing and shipping and go right to the payment step.
Optimized One-Page Checkout also includes security icons, which will make customers more confident that they can trust you with their financial information, and therefore encourage them to follow through with their order.
The following payment methods are supported by BigCommerce One-Page Checkout:
The payment methods you choose to add to your Optimized One-Page Checkout will be listed in alphabetical order (there’s no way to change this).
If you use multiple payment methods and one or more of them is not included in the above list of supported methods, your store will use BigCommerce’s legacy single-page checkout instead of Optimized One-Page Checkout.
If you’re using a BigCommerce Stencil theme (all themes featured in the BigCommerce marketplace are Stencil themes), you can customize BigCommerce Optimized One-Page Checkout.
1. Go to “Advanced Settings” > “Checkout.”
3. In the left sidebar, select “Checkout Page.”
4. In the “Checkout Page” tab, you can edit the following:
Generally, you should match the color scheme of your checkout page to the colors featured in your logo and other established marketing elements to improve the overall recognition of your brand.
5. When you’re done customizing your checkout page, select “Save” to finalize the changes.
If you have experience with coding, you may be interested in editing the optimized checkout SCSS file for a much higher degree of customization (while this file is in the repository for the Cornerstone theme, don’t worry — all themes share the same stylesheet, so this file works for all Stencil themes).
Also, note that while you are able to change the content of classes, you cannot change nest elements or class names. That’s because each class is mapped to multiple elements, so changing the names or structure would mess up future updates.
To set up responsive features for Optimized One-Page Checkout, configure the following breakpoint to define your desktop viewport size:
// TODO:
// Configure media query to be ‘desktop’ breakpoint size
// —
@media (min-width: 801px) {
text-align: stencilString(“optimizedCheckout-logo-position”);
}
The following classes in this file are available for customization:
In addition to customizing the look of your Optimized One-Page Checkout, the “Advanced Settings” > “Checkout” page also gives you other options for your checkout process. Let’s review the best way to set these up for your store:
With this option enabled, customers can place orders without creating an account. You also have the option of automatically creating accounts for customers who check out as a guest, which would automatically send an email invitation that allows the customer to use their email address as their username, create a password and track their orders.
If this option is disabled, customers would need to create an account before they can place an order. This would also make payment options such as PayPal, Amazon Pay and Apple Pay unavailable outside of the checkout page.
This option allows customers to enter comments with their order on the order confirmation page, which gives them the ability to add information and leave instructions where there are no designated fields. It’s recommended that you enable this option, as it shows that you are willing to go “above and beyond” for your customers.
This option will require your customers to accept your terms and conditions before making a purchase (if enabled, you can either link to a terms and conditions page or add the terms and conditions here as text).
Enabling this option would allow your customers to send the items in their cart to different addresses.
If enabled, this option will hide your coupon code/gift certificate field behind a link. If disabled, no link would be required to view this field.
Enabling Bot Protection will add Google reCAPTCHA codes to your checkout page to prevent bot attacks and other forms of malicious, automated activity.
It’s recommended that you only enable this option if you are currently having a problem with bots. Otherwise, you’ll be making your checkout process longer for no reason, which is going to have a negative effect on your conversion rate.
Persistent cart means that when the customer adds an item to their cart on one device, these changes will be reflected on all of their other devices as well. You should use this feature (again, remember how popular mobile devices are these days), but note that it is only available on the Plus, Pro and Enterprise BigCommerce plans.
When enabled, this option will prompt customers with predicted addresses based on what they’re typing in, resulting in an even faster checkout experience.
There are four available choices for your default shipping option:
Of course, while your checkout page is important, it’s still just one part of your store.
To get customers to add items to their cart and go to your checkout page in the first place, you need to create high-quality landing pages, product pages and blog posts. Shogun allows you to do just that. By combining BigCommerce’s Optimized One-Page Checkout with Shogun, you’ll have everything you need to impress your visitors and convince them to become paying customers.
Create customized pages in BigCommerce with ShogunBuild dynamic pages that convert shoppers into customers. Get started now
