BigCommerce store visitors aren't a walk in the park; it takes a lot of work to get someone to the point where they've not only visited your BigCommerce store but have also put products to their cart.

When a customer has decided to purchase, you want to help them get through the checkout process as fast as humanly possible.

Always prioritize the checkout experience. Nobody likes a form that asks for too much information, plus a lot of shoppers these days are shopping through their mobile devices, which are prone to distractions. If you want to avoid a high cart abandonment rate, you need to optimize your one-page checkout.

What is BigCommerce’s One Page Checkout?

Online shopping can be a real pain, and we all know how annoying it can be to fill out multiple forms, make sure your billing and shipping addresses are correct, and enter your credit card information all at the same time.

Bigcommerce's One Page Checkout reduces the normal 6-step checkout process to a single page with no extra fields or inquiries. Customers can now check out without any delay on all devices, which can significantly boost a merchant's conversion rate.

The BigCommerce one-page checkout allows developers, partners, and brands the freedom to build the best possible checkout experience for customers.

In Bigcommerce's one-step/page checkout, all entry fields are neatly displayed on one page. The user will be able to see all of the information they've submitted and the number of steps left required to finish the transaction.

Users will find a variety of beneficial features in BigCommerce's one-step checkout. This user-friendly interface allows users to have an easy and delightful experience when using it.

The BigCommerce one-page checkout is effortless to set up and works with all major browsers, including Firefox, Chrome, Internet Explorer 7,8, and Safari. It's also totally responsive, so it'll work on any mobile device.

The most important thing about one-page checkout is that it helps you cut down on abandoned carts.

Here are some of the benefits that the Bigcommerce App's one-step checkout provides:

• Allows customers to accept the terms and conditions by checking the box.
• Lets you provide the option to enable/disable newsletter subscription during check out.
• When people type in their country, city, area, and zip code, their shipping methods and prices are automatically changed to match.
• Checkout mode is completely supported:  logged in/registered guest
• Allows your customers to specify the country, shipping method, and payment method that they'd like to use
• Bigcommerce's default extra address fields are supported.
• Customers that are logged in can have their billing and shipping addresses automatically filled in

The “Edit cart” button allows clients to rapidly make changes to their cart. Optimized One-Page Checkout is also responsive, meaning it works on any device which is so necessary now that most shoppers shop on their mobile devices.

The shipping country and shipping method will also be pre-selected based on the customer's IP. It also detects the card type (the consumer does not need to enter it manually) when entering the card number. These minor advantages save a lot of time per checkout. Remember, speedier checkout = fewer abandoned carts.

Another way it speeds up the checkout process is by skipping the billing and shipping for customers who have come back again.

Meanwhile, to encourage customers to complete their orders, Optimized One-Page Checkout also includes security indicators that show they can trust you with their financial information.

Setting Up BigCommerce One-Page Checkout

The Optimized One-Page Checkout feature is 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.

If in case yours isn’t, 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.

Optimized One-Page Checkout Payment Methods

BigCommerce One-Page Checkout accepts the following payment methods:

• 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

By default, the payment methods you add to your Optimized One-Page Checkout will be arranged alphabetically by the name of the company.

If you use several payment methods and one or more of them is not listed above, your business will use BigCommerce's legacy single-page checkout rather than Optimized One-Page Checkout.

How to customize your BigCommerce One-Page Checkout

Go to Advanced Settings, and select Checkout. Scroll down to the Checkout Styling section and select Customize Checkout. On the left sidebar, you should see Checkout Page, click it. Here is where you’ll be able to 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

Ideally, your checkout page's color scheme should be consistent with the colors in your logo and other existing marketing materials, in order to enhance the overall recognition of your company's image.

Once you’re done customizing, just click Save.

Edit the styles for Optimized One Page checkout

A more advanced level of customization is possible by modifying the optimized checkout SCSS file. Class content can be edited, however, class names and nesting elements cannot be altered. Each class is assigned to several items, therefore changing their names or structure might pose problems for future updates.

Optimized One-Page Checkout's responsive features can be enabled by configuring the following breakpoint:

// TODO:     // Configure media query to be 'desktop' breakpoint size     // --     @media (min-width: 801px) {         text-align: stencilString("optimizedCheckout-logo-position");     }

 

Available classes for customization

The following classes in this file are available for customizing:

• .optimizedCheckout-header: The page header.

• .optimizedCheckout-headingPrimary: Top-level headings.

• .optimizedCheckout-headingSecondary: Lower-level elements such as the explanation of cart items.

• .optimizedCheckout-overlay: The “Shipping Method”.

• .optimizedCheckout-contentPrimary: The “Order Summary” and “Order Confirmation” body text in the desktop, dropdown list items, and summarized text of all completed steps.

• .optimizedCheckout-contentSecondary: The checkboxes’ text labels and lower-level text in the “Order Summary” desktop.

• .optimizedCheckout-button–primary: The “Continue” and final “Pay” buttons.

• .optimizedCheckout-button–secondary: The “Edit” buttons.

• .optimizedCheckout-orderSummary: The colors of“Order Summary” mobile drawer.

• .optimizedCheckout-step: The number of step indicated on the left side of the page.

• .optimizedCheckout-form-label: Form fields’ text and label color.

• .optimizedCheckout-form-input: Form fields’ background and border color.

Optimizing the Checkout Settings

The Advanced Settings on the Checkout page lets you customize the aesthetic of your Optimized One-Page Checkout as well as other aspects of the checkout process. So, here's a quick rundown on how to do it right:

Enable Guest Checkout? If enabled, customers will be able to place orders without having to create an account. It also allows you to create accounts for customers who check out as guests, sending them an email invitation to use their email address as their username, creating a password, and tracking their orders. If disabled, customers will have to create an account, and PayPal, Amazon Pay, and Apple Pay would be unavailable outside of the checkout page.

‍Enable Order Comments? Customers can add comments to their orders on the order confirmation page, allowing them to provide information and directions when no defined fields exist. Enabling this option shows that you are committed to going the extra mile for your customers.

Enable Terms and Conditions? If you enable this option, your customers will be presented with a set of terms and conditions when they make a purchase (you can either link to an external Terms and Conditions page or add the terms and conditions here as text).

Multiple Shipping Addresses: If you enable this option, your customers will be able to ship the items in their cart to other addresses. They sometimes use this to send packages to other people or to their other addresses.

Collapse Coupon Code: If you enable this option, then customers will need to click a link to view the coupon code/gift certificate field. If you disable this option, then no link would be required to view the field.

Bot Protection:  Enabling Bot Protection will add a Google reCAPTCHA code to your checkout page to prevent automated activity. This is not recommended if you are not currently having a problem with bots.  The reCAPTCHA code makes the checkout process longer for no reason, which will have a negative effect on your conversion rate.

Enable Persistent Cart: You can sync products between different devices or browsers by using persistent carts. This means that when a customer adds an item to their cart on one device, these changes will be reflected on all of their other devices as well. note that it is only available on BigCommerce’s Plus, Pro and Enterprise plans.

Google Address Autocomplete: If this option is turned on, customers will be shown suggested addresses based on what they're typing in, which will speed up the checkout process.

CONCLUSION

To encourage customers to actually browse, purchase and continue with the checkout process, retailers need to design high-quality landing pages, optimized product pages, and well-written blog articles.

With over 400 clients served, Webinopoly is a leading web development agency with an experienced team of designers, developers, and marketers. Webinopoly combines a deep understanding of the eCommerce industry and its latest trends with proven success in building attractive and successful online stores. The agency specializes in designing custom themes for BigCommerce and Shopify, as well as website development, marketing, and SEO.

If you need an eCommerce website built on BigCommerce and Shopify, or any eCommerce solutions developed, please contact us at 713-805-5888, email us at [email protected], or leave us a message here.

If you’d like to learn more about what we can do or view our portfolio, please click on the links below:

• Explore our services
• See our previous work here