Optimized One-Page Checkout (Early Access)
What We'll Cover
Optimized One-Page Checkout is BigCommerce’s new checkout and order confirmation page. It includes features that reduce friction and improve the overall flow of checkout to increase sale conversions.
This feature is currently in early access. There are a few features and payment gateways that are not yet implemented. See the Limitations of Early Access below.
- Persistent cart means that customers can quickly access and edit items in their cart throughout the checkout process.
- The responsive, minimal design lets customers comfortably check out on any device, without distractions.
Simplified Shipping Address Entry
- The default country in the dropdown is based on the customer’s IP address and only includes countries which have been set up in the Shipping Manager.
- Lowest priced shipping option selected by default, so customers can go right to the next step if they so choose.
New Credit Card Box
- Text fields are optimally laid out, clearly labeled and include security icons to instill trust.
- Card type is auto-detected when the credit card number is entered, removing that extra step.
- Amazon Pay works with Optimized One-Page Checkout
- Adyen (Early Access) only works with Optimized One-Page Checkout
- Checkout will display the shopper's selected currency
Improved Checkout Flow
- Returning customers are automatically sent to the payment step with their billing and shipping automatically filled.
- After guest checkout, the option to create an account is available on the Order Confirmation page.
Limitations of Early Access
Currently the Optimized One-Page checkout beta does not support the following features:
- Custom form fields
- Multi-Destination shipping addresses
- Invoice emails will display with the store's default currency
- Payment Gateway listing is set to be alphabetical, it cannot be changed
Payment providers are limited to:
- Amazon Pay
- Chase Paymentech Orbital
- Paypal powered by Braintree (with 3D Secure)
- eWay Australia
- First Data Payeezy Gateway
- Heartland Payment Systems (HPS)
- Paypal Express Checkout
- Quickbook Payments
- Store Credit
- Offline payment methods
Did you know? If you use multiple payment gateways and one of them is not in the list above, then checkout will use the current single-page checkout instead of Optimized One-Page Checkout.
Opting into Early Access
If you are interested and use the appropriate payment gateways, you will be able to participate in this early access version of Optimized One-Page Checkout.
1. Go to Advanced Settings › Checkout.
2. You should see a splash screen asking you to participate in the early access. Click the Try new checkout button.
3. If your store is using the appropriate payment gateways, it will successfully apply the new Optimized One-Page checkout.
Not seeing Optimized One-Page Checkout? Even with the new checkout turned on, only a percentage of your customers will see the new checkout while others will see our Legacy checkout. Only if Adyen or Amazon Pay are enabled will 100% of customers see the new checkout.
Turning Off Early Access
If you want to return to only using the Legacy Single Page checkout, you can within the control panel.
1. Go to Advanced Settings › Checkout.
2. Under Checkout Settings, select One-Page checkout or Custom one-page checkout.
This will revert checkout to only use the legacy checkout pages.
Currently, One-Page Optimized Checkout allows for some light style customizations of the checkout page if you are using a Stencil theme. The Stencil Theme Editor now has a section for the checkout page that allows you to change the colors and add your logo.
1. To access the checkout Theme Editor go to Advanced Settings › Checkout.
2. Click on the Customize Checkout button under the Style heading.
Alternatively, you can access this part of the Theme Editor by going to Storefront Design › My Themes and clicking the customize button.
3. Click on the Optimized Checkout tab to access the section to customize the colors and logo that appear on checkout.
If you have uploaded a store logo, it will auto-populate in the Checkout tab or you can upload a Checkout version.
See Cornerstone Theme Manual for more details on Checkout in the Theme Editor.
For advance customization, you can make updates through the Stencil CLI. See our developer documentation for more information.
Free Shipping Banners
If you have set up a discount to "spend $X to get free shipping", a banner notification can be placed in checkout to notify shoppers how much more they need to spend to qualify for free shipping. See Creating Cart-Level Discounts for details on how to customize the location and messages of the free shipping banner.