How to Set up & Optimize BigCommerce One Page Checkout?

A significant portion of your customers may abandon the purchase before it is completed. They’ve already spent a significant amount of time browsing your web and making their decision. If a customer has decided to purchase a product, your goal is to get them through the checkout process as quickly as possible.

When customers have to complete a lengthy form while placing orders, they will be more likely to abandon their shopping cart. Customers don’t want to waste time doing things like this, particularly now that everyone seems to be living busier lives.

They probably do a few dozen other things at the same time. If they’re using a mobile device, the possibilities for interruption are much greater.

As a result, you should streamline your checkout process. Many consumers will become distracted before placing their order if you force them to click through different pages for billing, delivery, and payment. This, definitely, will reduce your future sales dramatically. That is why a one-page checkout is needed.

In this time article, we will introduce to you the Optimized One-Page Checkout for BigCommerce created with an aim to reduce your shop’s number of cart abandonment.

What is BigCommerce One-Page Checkout?

When you look at the one-page (one-step) checkout, you can see how consumers can handle the process rapidly and conveniently. BigCommerce one-page checkout gives developers, partners and brands the flexibility to create the best checkout experience designed to streamline the process for customers.

All entry fields are nicely shown on one step in Bigcommerce one step/page checkout. The user can view all of their entered information and how many steps are required to complete the transaction.

BigCommerce’s one-step checkout has a number of useful features for users. This, itself is a user-friendly interface, which enables customers to gain an easy and enjoyable experience while using it.

BigCommerce one-page checkout is also easy to install and works flawlessly with popular browsers such as Firefox, Chrome, IE 7,8+ and Safari. It is also fully responsive for any mobile device compatibility.

And the most important feature of all, with the help of one-page checkout, you are now able to decrease the abandoned cart rate.

But what exactly can BigCommerce offer you? What are the flexibilities it has to help you get a more convenient experience?

If you are a customer

Here are the flexibilities that one-step checkout Bigcommerce App provides customers:

• Decreases the checkout process from six to one
• Enroll for the newsletter from the checkout tab
• May give comments before making an order
• Ajax Popup for Login and Forgot Password
• Logged in customers can get their billing and shipping addresses automatically filled in
• Apply the promotion/coupon code directly in the checkout process
• Check and adhere to the “Terms and Conditions” before ordering
• During checkout, the default delivery and payment methods will be automatically picked
• Automatically updates shipping rates when customers target a city, state, country, or zip code
• Add various items to the shopping cart and pay for them all in one order

If you are a store owner

Here are the flexibilities that one-step checkout Bigcommerce App provides store owners:

• Supports all Bigcommerce default payment gateways and Shipping.
• Supports default Bigcommerce Gift Options
• Enable check box for acceptance of terms and conditions
• Enable/disable Newsletter subscription during checking out
• Ready to alter the checkout heading
• Automatically update customers shipping method and shipping rates when they target their country, city, region and zip code
• Fully supported checkout mode: registered/guest/logged in
• Able to set default country, shipping method, and payment method
• Support default Bigcommerce extra address fields

Which customization options are available?

It’s unquestionable that the checkout page is important for your eCommerce store to get a successful purchase from customers. The requirements for the checkout design can diverse from business to business.

Although BigCommerce has managed to put numerous research in order to generate a streamline checkout process for its flagship checkout page Optimized One-Page Checkout, it realizes that there isn’t a one-size-fits-all solution. There is a great variety in merchants’ design needs and the experience their clients expect as they continue to checkout through verticals and business models.

That’s why BigCommerce wants that merchants should be able to use the Optimized One-Page Checkout as an example of best practices in the checkout form design, and access as much openness as possible into the checkout to satisfy merchants with unique business requirements who are willing to put in the effort of specialized customization.

This guide below will cover the full range of BigCommerce checkout customization options, from no-code or low-code customizations to complex headless builds. Then we’ll go into how you can alter the text on the checkout page and even translate it into a different language. Finally, we’ll look at how to utilize CSS and JavaScript to apply custom style and features to the checkout.

1. Modify Checkout Form Fields

BigCommerce provides the option to implement new fields to the address form on the checkout page, as well as the ability to reorder fields.

Customers can see custom fields on the checkout tab, and the values they enter will appear in the Order Display area of the Control Panel. Other input types such as checkbox, text area, date picker, dropdown, number-only, and password are all supported in custom address fields.

Collecting a customer’s account number or verifying a delivery preference are 2 typical uses for custom checkout form fields. Since custom address fields remain on the Order Display screen, advanced customizations are enabled to repurpose custom forms to store data for the Order record.

2. Set up Store Design

Store Design is another native tool for customizing the checkout page.The Store Design editor assists customers in controlling over details like the header graphic, colors, and fonts on the checkout tab. Checking for a setting before hard-coding CSS allows merchants greater control over their template and guarantees that their options are maintained by theme updates.

You can regulate which Store Design settings are available for merchants as a theme developer. The theme’s schema.json file specifies configurations and their potential values, and current selected values are kept in config.json, which can be referenced by custom Sass functions. For further information on developing Store Design settings, please check out this documentation.

3. Use Multi-language checkout

Heading on to light custom code customizations, the text strings that appear on the Optimized One-page Checkout page can be modified or even translated into various languages.

The checkout page renders text strings in the same way as all Stencil models do. The `` helper, which is special to Stencil, derives the value of a text string from a series of JSON files based on the shopper’s browser’s language setting. There will be multiple.json lang files in a store, one for each language it supports.

You’ll need to attach a JSON object containing the checkout keys and their text string values to the store’s.json lang file to get access to the conversion keys that are made on the checkout tab (s).

If your store’s default language is English, so you want to change the wording on any of the checkout fields, add the checkout JSON object to the en.json file. Then, if your store accepts both English and French, and you want to show a French version of the checkout page to French-speaking clients, add the checkout JSON object to the fr.json file and translate the main values appropriately.

4. Custom CSS

Optimized one-page checkout requires the optimized-checkout.scss file for styling, and you can find a list of CSS classes that are added to checkout elements in the theme documentation.

It’s essential to remember that nesting or changing the built-in class names would break compatibility with upcoming checkout page changes. Beyond that, you can manipulate designs and structure by referencing a custom stylesheet or inserting your own CSS rules.

5. JavaScript

BigCommerce’s Script Manager, an interface for handling third-party files, allows for script injection on the checkout page. You can also insert scripts programmatically using the Scripts API if you’re creating an app and need to run custom JavaScript on the checkout or order confirmation tab, for example, or generate a pop-up.

The Optimized One-page checkout’s accordion layout loads dynamically as the shopper goes through the steps, which is something you’ll want to worry about if you want your JavaScript to execute at the right moment.

While setInterval() could be used to poll the DOM to ensure that the entity you want to target has loaded, Mutation Observer is a pleasant, simple alternative. There’s no need to include a dependency to use Mutation Observer because it’s built into modern browsers.

Note: Although BigCommerce’s technical team aims to ensure continuity in DOM elements and classes, it cannot promise that element IDs will not change in the future. Avoiding direct interaction with the checkout code is the best practice for running custom scripts on the checkout page, and these recommendations are given as a precaution for developers who have weighed the risk.

How to customize your BigCommerce One-Page Checkout?

1. Setting Up BigCommerce One-Page Checkout

With BigCommerce’s Optimized One-Page Checkout, customers now have the ability to fill out all details such as their contact, billing, shipping and payment information all on the same page.

Customers can easily make any required modifications to their cart using the “Edit cart” icon. Optimized One-Page Checkout is also responsive, ensuring it operates on any smartphone (which is especially important these days, given that handheld devices have recently overtaken desktops and laptops as the most popular way to access the internet).

Based on the customer’s IP address, the shipping country would already be filled out, as well as the shipping method. Additionally, when a customer types their card number, the card type is automatically detected (the customer does not have to manually enter it).

Another function that can help you speed up the checkout process is: Returning consumers can skip the billing and shipping steps and continue straight to the payment stage.

These slight conveniences add up to a substantial decrease in checkout time. Keep in mind that the quicker the checkout process is, the less abandoned carts you’ll get.

Security icons are also included in the Optimized One-Page Checkout, which will give consumers more assurance that they can provide you with their financial details, and encourage them to complete their order.

2. Customize the look of Optimized One-Page Checkout

You should modify BigCommerce Optimized One-Page Checkout if you’re using a BigCommerce Stencil theme (all themes in the BigCommerce marketplace are Stencil themes).

Step 1: Go to “Advanced Settings”, and select “Checkout”

Start your Optimized One-Page Checkout settings with some elements including Customer, Shipping, Promotions, and Order.

Choose the first box if you allow customers to sign in with a link sent to their email. The second option is to require guest customers to accept a privacy policy.

Step 2: Go to the “Checkout Styling” section and click on “Customize Checkout”

Step 3: In the left sidebar, click on “Checkout Page”

Step 4: Customize the Checkout Page, you are able to change the following:

• Header: Add image, background color, text color and border color
• Logo: Choose the type (text/image) and se the position (left/center/right)
• Discount banner: color for background, text, icon
• Order summary box: color for border, and background
• Checkout steps icon: color for text, border, and background
• Heading 1: font family and text color
• Heading 2: font family and text color
• Body page: select the color for focus and background
• Body text: choose the font family and text color
• Secondary text: select the font family and text color
• Link: determine the font family, text color, and hover text color for your checkout page
• Primary action button: background color, hover color, active color, and disabled color; border color, hover color, active color, and disabled cover; font family; text color, hover color, active color, and disabled color
• Secondary action button: border color, hover color, active color, and disabled cover; font family; text color, hover color, active color, and disabled color; background color, hover color, active color, and disabled color
• Form input fields: label text color; color of field text, field placeholder text, field error text, field background, field inner shadow, and field border; checkbox button background color
• Form checklist: background color, header text color, and border color

Generally, to boost overall brand image, you should match the color scheme of your checkout page to the colors used in your logo and other existing marketing elements.

Step 5: After you’ve finished customizing your checkout tab, press “Save” to save your changes

3. Edit the styles for Optimized One Page checkout

If you know how to code, you may be interested in editing the optimized checkout SCSS file for even further customization (don’t worry, this file is for the Cornerstone theme, but all Stencil themes share the same stylesheet, so this file can work for all Stencil themes).

Customizing checkout restrictions

Although you are able to change the contents of classes on the checkout page, you can’t nest components or change the class names. Since each class here maps to multiple optimized checkout components, BigCommerce imposes these constraints. Changing the structure or name will break potential streamlined checkout upgrades.

Configuring the desktop viewport

In order to set up responsive features for Optimized One-Page Checkout, configure the following breakpoint to identify your desktop viewport size:

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.

Currency conversion options

Alternate currencies may be viewed on the Streamlined One-Page Checkout and order confirmation pages of your Stencil theme.

Restriction

You must first enable Optimized One-Page Checkout before you can use the options on this page. In Optimized One-Page Checkout, you’ll find instructions on how to do this.

Note that regardless of the view choices you select below, purchases will only be processed in the store’s single default currency. Shift your default currency by going to Changing Your Default Currency.

You’ll need to add the desired currencies to the BigCommerce control panel to enable customers to see pricing in several currencies. Shoppers would then be able to adjust displayed prices between the allowed currencies by using the Currency drop-down list in the storefront. The shopper’s bill is also in the store’s default currency as they cash out.

Final thought

BigCommerce has a variety of options for customizing the checkout page, ranging from configurations that can be modified from the control panel to entirely configured headless checkout pages.

With this one-page checkout customization, BigCommerce wishes to provide customers with the most streamlined way possible for the checkout process. As a result, it not only helps the buyers enjoy the simpler and more convenient checkout experience, but also assists store owners in reducing the cart abandonment rate, and increases the store’s income.

We hope that, after reading our article thoroughly, you will gain a better understanding in BigCommerce one-page/one-step checkout as well as how to customize it in the most optimal way on your own.

Do you find this article helpful? If so, please do not hesitate to share our work with your friends and colleagues. Your sharing not only helps spread the knowledge but also shows support for the author.