Browse by Topic

Using the 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.

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 drop-down menu 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 scripts that requires a URL for the order completed page, it will need to be updated to continue tracking correctly. 

Limitations

Optimized One-Page Checkout has the following limitations:

  • Invoice emails will display in the currency the order transacted in.
  • Payment Gateway listing is set to be alphabetical; it cannot be changed.

Optimized One-Page Checkout supports the following payment gateways:

 

Using multiple payment gateways? If you use multiple payment gateways and one of them is not on the list above, then the storefront  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 Checkout and have a qualified payment gateway set up and enabled, switching the checkout type is easily done in the control panel.

Select Optimized One-Page Checkout

Go to Advanced Settings › Checkout and select Optimized one-page checkout (Recommended). Save your changes. If you are using a supported gateway, it will apply successfully. 

 
 

Customizing Checkout

Some minor style customizations can be made to Optimized One-Page Checkout if you are using a Stencil theme. Store Design has an Optimized Checkout section where you can change fonts and colors, or add a custom logo.

This feature is available on all themes in the Theme Marketplace.

1. Go to Advanced Settings › Checkout.

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

Style Option

Alternatively, you can access this part of Store Design 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 appears on the checkout page.

  • If you have uploaded a store logo, it will auto-populate, or you can upload another logo only for the checkout page.
  • See the Cornerstone Theme Manual for more details on checkout customization options for that theme.
  • 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 One-Page 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 an Automatic Promotion, 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 Automatic Promotions 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. Instead, a list of options will display for a shopper to make a selection.
 
 

FAQ

If I use more than one payment gateway, do they all need to work with Optimized One Page Checkout?

Yes, checkout will use the legacy one-page checkout instead of Optimized One-Page Checkout.

What controls the email and phone number that appear on the order confirmation page?

The order confirmation ("Thanks for your order") page uses the store administrator email address found in Store SettingsMiscellaneous, and the phone number listed in the Store Profile.

Order Confirmation page

Was this article helpful?