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.

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, and can save new addresses to their account.
  • After guest checkout, the option to create an account is available on the Order Confirmation page.
 
 

Requirements

You should have the following set up in your store before enabling 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. 

Supported Payment Gateways

Optimized One-Page Checkout supports the following payment gateways:

 
 

Switching to Optimized One-Page Checkout

To switch your store to 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, the new checkout will apply successfully. 

 

Not seeing this setting in the control panel? Newer stores use the Optimized One-Page Checkout by default, and you won't have the option to switch to Legacy Checkout.

 
 

General Checkout Settings

Customers

Select how you would like shoppers to check out:

  • Allow shoppers to check out without an account as a guest.
  • Allow shoppers to check out without an account, but automatically create one after ordering.
  • Require shoppers to sign in or create an account before checking out.

Guest customer account settings

Select how you would like shoppers with existing accounts to check out:

  • Allow existing customers to check out as a guest or sign in.
  • Prompt existing customers to sign in, but still allow them to check out as a guest.
  • Require existing customers to sign in. (Customers with existing accounts would not be able to check out as a guest.)

checkout settings for customers with existing accounts

Cart

Select this to enable a "persistent cart," which lets your customers view items in their cart across multiple devices when logged in. Learn more in Persistent Cart.

Security

Select this setting to enable Google reCAPTCHA, which protects your store against bots and other abuse.

 
 

Optimized One-Page Checkout Settings

Customers

Select this to enable passwordless login for existing customers by generating a one-time password as a link sent to the customer’s email. Customers can log in by clicking the link, simplying the checkout flow.

Enable Passwordless Login on the checkout page.

Select this to enable a checkbox on the checkout page, requiring guest customers to accept the privacy policy before they can check out. This setting is recommended for GDPR compliance.

Checkbox for enabling privacy policy as a requirement for guest checkout.

 

Default Shipping Option

A default shipping option decreases friction during checkout. You can set your checkout to default to one of the following:

  • The least expensive option (not counting in-store pickup)
  • The least expensive option (including in-store pickup)
  • The most expensive option
  • None (no default selected)
 

Multiple Shipping Addresses

Selecting this option will allow customers to ship the items in their order to different addresses. They can select this option on the cart page. Learn more.

 

Google Address Autocomplete

This setting allows customers in select countries to check out faster by providing a list of potential matching addresses when the customer begins to enter in their billing or shipping address. See Google Autocomplete for Addresses for more information on enabling this feature.

 

Coupon and Gift Certificate Field

Select whether to display the coupon code/gift certificate field or to hide it behind a link.

User-added image

 

Order Comments

Select to allow customers to enter comments with their order. These comments can be viewed in OrdersView Orders page by clicking the action wheel beside the order and selecting View Notes.

 

Terms and Conditions

Enable this to require customers to check a box that says "I have read and agree to the Terms and Conditions." This text can either link to a pop-up with the terms and conditions or link to a Terms of Service webpage.

Terms and Conditions URL

 

Custom Order Confirmation (developers only)

If you or your developer wants to customize the order confirmation page (which the customer is taken to after confirming the order at checkout), you can enter the URL of the script that will replace the default. For our developer documentation on this feature, see Checkout SDK (Dev Docs). Note that our tech support team cannot assist with these customizations.

 

Checkout Styling

All themes available in the Theme Marketplace allow you to make minor customizations to the styling on your checkout. See Customizing Checkout to learn more.

 
 

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.

To customize your checkout, go to Advanced Settings › Checkout and click on the Customize Checkout button under the Checkout Style heading.

Style Option

Click on the Checkout Page option to access the checkout page customization options.

  • If you have uploaded a store logo, it will auto-populate. You can also 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.

     

Checkout styling options

 

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

 
 

FAQ

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

Yes, if you want to use Optimized One-Page Checkout. If any of your payment gateways are not compatible with Optimized One-Page Checkout, your store will use the legacy one-page checkout instead.

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

Can I change which currency is listed at checkout?

No. Optimized One-Page Checkout will display the checkout with the currency the shopper chose on the storefront to keep the experience consistent. Invoice emails will display in the currency the order transacted in.

Does Optimize One-Page Checkout support multiple languages?

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

Can Optimized One Page Checkout show banner notifications for discounts and promotions?

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

Was this article helpful?