Browse by Topic

Optimized One-Page Checkout

Optimized One-Page Checkout is BigCommerce’s default checkout and order confirmation page. It includes features that minimize friction and a smooth process of checkout to increase sale conversions. To learn more about the features of our checkout flows, see Checkout Comparison.

Checkout Process

Responsive, minimal design

  • Perpetual 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

Simple 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
  • A shipping method is pre-selected to streamline the checkout process

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
  • Checkout will display the shopper's selected currency

Payment Selection

Smooth Checkout Flow

  • Returning customers are 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

Preparing to Switch to Optimized One-Page Checkout

Funnel Tracking Systems

Some third-party funnel tracking systems, such as Bing Ads Conversion Tracking and Google Analytics Goals, need to point to the order completed URL in your store. For Optimized One-Page checkout, this URL is www.your-domain.com/checkout/order-confirmation. If you have any third-party tracking that required a URL to the order complete page on checkout, it will need to be updated to continue tracking correctly. 

Limitations

The Optimized One-Page Checkout  has the following limitations:

  • Multi-Destination shipping is not supported
  • Invoice emails will display with the store's default currency
  • Payment Gateway listing is set to be alphabetical; it cannot be changed

Optimized One-Page Checkout supports the following payment gateways. If a payment gateway not on this list is enabled, your store will switch to legacy checkout.

 

Using multiple Payment Gateways? If you use multiple payment gateways and one of them is not in the list above, then checkout will use the legacy single-page checkout instead of Optimized One-Page Checkout.

Enabling Optimized One-Page Checkout

If you are interested in using Optimized One-Page and have a qualified payment you can set up Optimized One-Page Checkout easily.

Select Optimized One-Page Checkout

Go to Advanced Settings › Checkout and select Optimized One-Page checkout. If you are using a supported gateway it will apply successfully. 

Disabling Optimized One-Page Checkout

If you want to return to the Legacy Single Page checkout, go to Advanced Settings › Checkout and select an alternative Checkout Setting

Customizing Checkout

Some light style customizations can be made to the Optimized One-Page Checkout if you are using a Stencil theme. The Stencil Theme Editor has an Optimized Checkout section where you can change fonts and colors, or add a logo.

This feature is currently available on the following Stencil themes:

1. To access the checkout Theme Editor go to Advanced Settings › Checkout.

2. Click on the Customize Checkout button under the Style heading.

Style Option

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 advanced customization, you can make updates through the Stencil CLI. See our developer documentation for more information.

     

 

Using a legacy Blueprint Theme? To customize Optimized checkout, edit the optimized-checkout-webdav.css file and re-upload it via WebDAV.

Multi-Language and Multi-Currency

Optimized One-Page Checkout will display the checkout with the currency the shopper chose on the storefront to keep the experience consistent.

If the store uses multiple languages, the experience can now extend to the checkout. To learn more, see our Developer Documentation for detailed instructions.

Discount Banners

If you have set up a cart-level discount, such as 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 discount banner. 

Pre-Select Shipping Options

To streamline the checkout process for shoppers, a shipping method can be set as a pre-selected default. Even if the shipping method is pre-selected, a shopper can change the shipping method to something else during checkout.

Shipping Behavior

The drop-down menu options include: 

  • Least expensive, excluding pickup in store — the lowest priced shipping method is pre-selected. In-store pickup is never selected even if the shopper is in the appropriate shipping zone
  • Least expensive — the least expensive option will be pre-selected. If the shopper is in the appropriate shipping zone, this option could pre-select in-store pickup as an option
  • Most expensive — the most expensive shipping option is selected by default
  • None — A shipping method is not pre-selected. A list of options will display for a shopper to pick their shipping method 

Was this article helpful?