The Ultimate Guide to BigCommerce One-Page Checkout

December 13, 2019
Adam Ritchie

The Ultimate Guide to BigCommerce One-Page Checkout

December 13, 2019
Adam Ritchie
Back to the blog
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

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.

Setting Up BigCommerce One-Page Checkout

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. 

BigCommerce One-Page Checkout

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.

Optimized One-Page Checkout Payment Methods

The following payment methods are supported by BigCommerce One-Page Checkout:

  • Adyen
  • Affirm
  • Afterpay
  • Amazon Pay
  • Apple Pay
  • Authorize.Net
  • BlueSnap Payments
  • CCAvenue
  • Chase Integrated Payments
  • Chase Merchant Services
  • Chase Pay
  • Clover Payments
  • CyberSource Direct
  • eWay Rapid
  • First Data Payeezy Gateway
  • Google Pay
  • Heartland Payment Systems
  • Klarna Payments
  • Masterpass
  • MIGS
  • MyVirtualMerchant
  • NMI
  • Offline Payment Methods
  • Paymetric
  • PayPal Express Checkout
  • PayPal powered by Braintree
  • PayPal Credit
  • PayPal Website Payments Pro
  • QuickBooks Payments
  • Sage Pay/Protx VSP Direct
  • SecureNet
  • ShopKeep Payments
  • Square Payments V2
  • Store Credit
  • Stripe
  • Test Payment Gateway
  • USAePay
  • Visa Checkout
  • Worldpay Core
  • Worldpay Ecomm

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.

Customizing Your Optimized One-Page Checkout Design

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

Go to “Advanced Settings” > “Checkout”

2. Scroll down to the “Checkout Styling” section and select “Customize Checkout.” 

Scroll down to the “Checkout Styling” section and select “Customize Checkout”

3. In the left sidebar, select “Checkout Page.” 

In the left sidebar, select “Checkout Page”

4. In the “Checkout Page” tab, you can edit the following:

  • Header: upload image, background color, text color and border color
  • Logo: type (text/image) and position (left/center/right)
  • Discount banner: background color, text color, icon color
  • Order summary box: background color and border color
  • Checkout steps icon: background color, text color and border color
  • Heading 1: font family and text color
  • Heading 2: font family and text color
  • Body page: background color and focus color
  • Body text: font family and text color
  • Secondary text: font family and text color
  • Link: font family, text color, and hover text color
  • Primary action button: font family, text color, text hover color, text active color, text disabled color, background color, background hover color, background active color, background disabled color, border color, border hover color, border active color and border disabled cover
  • Secondary action button: font family, text color, text hover color, text active color, text disabled color, background color, background hover color, background active color, background disabled color, border color, border hover color, border active color and border disabled cover
  • Form input fields: label text color, field text color, field placeholder text color, field error text color, field background color, field inner shadow color, field border color and checkbox button background color
  • Form checklist: background color, header text color and border color

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. 

Checkout page options

5. When you’re done customizing your checkout page, select “Save” to finalize the changes.

When you’re done customizing your checkout page, select “Save” to finalize the changes

Editing the Optimized One-Page Checkout SCSS File

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:

  • .optimizedCheckout-header: The page header.
  • .optimizedCheckout-headingPrimary: Top-level headings.
  • .optimizedCheckout-headingSecondary: Lower-level elements like the descriptions of items in the cart.
  • .optimizedCheckout-overlay: The “Shipping Method” box.
  • .optimizedCheckout-contentPrimary: The body text in the desktop “Order Summary” and “Order Confirmation,” dropdown list items and text that summarizes completed steps.
  • .optimizedCheckout-contentSecondary: The text labels on checkboxes and lower-level text in the desktop “Order Summary.”
  • .optimizedCheckout-button--primary: The “Continue” button and final “Pay” button.
  • .optimizedCheckout-button--secondary: The “Edit” buttons.
  • .optimizedCheckout-orderSummary: The colors in the “Order Summary” mobile drawer/modal.
  • .optimizedCheckout-step: The step-number indicators on the left side of the page.
  • .optimizedCheckout-form-label: The text and label color of form fields.
  • .optimizedCheckout-form-input: The background and border color of form fields.

Configuring Your Checkout Settings

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:

Checkout settings

Enable Guest Checkout?

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.

Enable Order Comments?

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. 

Enable Terms and Conditions?

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

Multiple Shipping Addresses

Enabling this option would allow your customers to send the items in their cart to different addresses.

Collapse Coupon Code

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. 

Bot Protection

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.

Enable Persistent Cart

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.

Google Address Autocomplete

When enabled, this option will prompt customers with predicted addresses based on what they’re typing in, resulting in an even faster checkout experience. 

Default Shipping Option

There are four available choices for your default shipping option:

  • Least expensive, excluding pickup in store
  • Least expensive
  • Most expensive
  • None

Optimizing Your Other Pages

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. The Shogun page builder app allows you to do just that. By combining BigCommerce’s Optimized One-Page Checkout with the Shogun page builder, you’ll have everything you need to impress your visitors and convince them to become paying customers.

Adam Ritchie

Adam Ritchie is a writer based in Silver Spring, Maryland. He writes about ecommerce trends and best practices for Shogun. His previous clients include Groupon, Clutch and New Theory.