An Introduction to BigCommerce Open Checkout

The checkout page very well may be the most important part of your ecommerce store.

It takes a lot of time and money just to get people to visit your site.

Many merchants need to spend thousands of dollars per month on advertising and search engine optimization just to get the amount of traffic required for their store to be viable.

Perhaps the most frustrating aspect of running an ecommerce store is that after all this effort, even when they’ve taken the next step and added items to their cart, most visitors will leave your site without buying anything. In fact, 88.05% of online shopping carts are abandoned without purchase.

This is what makes the checkout page on your store so important.

With a better design, you could be converting many of the people who otherwise would have abandoned their cart into customers. And with one of BigCommerce’s latest features, you now have much more control over the design of your checkout page.

#cta-visual-fe#<cta-title>Fast and Flexible CMS For BigCommerce<cta-title>Gain full control over your site without sacrificing page speed with Shogun Frontend.Learn more

Introducing BigCommerce Open Checkout

In November 2020, BigCommerce launched Open Checkout. This open-source extension of BigCommerce’s native checkout allows merchants to fully customize their checkout experience.

The source code for BigCommerce’s native checkout was actually released as a software development kit (SDK) back in 2018, but developers complained that using this SDK was too complicated.

Open Checkout is an improvement on the SDK that allows developers to make changes in much less time.

It should be noted that there’s certainly nothing wrong with BigCommerce’s native checkout page.

For one thing, BigCommerce offers a one-page checkout system by default — this will really help your bottom line, as forcing visitors to jump through different pages for shipping information, billing information and order confirmation will surely make you miss out on some potential sales.

The easier it is to check out on your store, the more carts you’ll be able to convert into completed orders.

BigCommerce Open Checkout Features

BigCommerce One-Page Checkout also includes many other useful features, such as guest checkout and Google Maps address auto-complete.

Again, you’ll want your checkout process to be as efficient as possible, and these features shorten the amount of time it takes for the customer to finish making their purchase.

Perhaps the best default BigCommerce checkout feature for your sales figures is persistent cart, which makes it so that when a visitor adds an item to their cart on one device, this change is reflected on their other devices as well.

That way, if a customer considers purchasing a product when they’re on their desktop, they won’t forget about it later when they’re out on their mobile device.

Customization with Open Checkout

There are even some basic cosmetic changes you can make to your checkout page from the standard BigCommerce interface.

For example, you can change the background color, change the font that’s used in your headings, upload images for your logo and header, etc.

But with Open Checkout, you can take this customization to the next level and edit every single pixel of the default checkout. There are a number of reasons why you might want to do this, such as:

• Branding: With the use of custom CSS rules and JavaScript applications, you can create a unique look for your checkout and stand out from the competition.

• Additional Checkout Options: Open Checkout allows you to adapt your checkout for situations such as scheduling delivery dates, submitting an order without sending payment and purchasing an item online that is to be picked up later at an in-store locker.

• Personalized Checkout Experience: You may want to have different pricing, payment and shipping options displayed for different types of customers. There’s no way to do this with the standard BigCommerce checkout settings, but you can make it happen with Open Checkout.

How to Use BigCommerce Open Checkout

Before you start using BigCommerce Open Checkout to tinker with your site, there are a few things you should consider.

Another benefit to BigCommerce’s native checkout is that it’s PCI-compliant by default. While PCI compliance is not required by federal law in the United States, there are some states that require it, and it does reduce your liability in the event of a data breach.

According to the BigCommerce Terms of Use, if you edit your checkout page’s code, you will then be responsible for maintaining PCI compliance.

You’ll also be responsible for keeping your checkout code up to date with the latest releases from BigCommerce. But this isn’t that big of a deal, as simply setting your upstream to BigCommerce/Checkout.js will enable you to get the latest version whenever you’re ready to update.

Finally, the native checkout is hosted by BigCommerce. If you edit your code with BigCommerce Open Checkout, you’ll then need to host your checkout page yourself.

In other words, BigCommerce Open Checkout isn’t something that you should just use on a whim. There’s no doubt that this high degree of customization can benefit your store, but it comes with expenses and can even open you up to regulatory fines and legal fees if you’re not careful about PCI compliance.

If you still want to use BigCommerce Open Checkout, you’ll first need to fork the source code repository that’s available on GitHub. Be sure to check out the README file in the repository for additional information about the setup process.

You’ll also need to confirm that your Node is greater than version 10 and npm is greater than version 3. If you’re not doing so already, you should consider using a Node Version Manager, as this will help you keep track of which versions you’re using and install updates when needed.

Next, clone your fork locally, open it in your editor, and follow these steps:

1. Open a terminal.

2. Enter the command “npm install && npm ci” to install all the necessary packages.

3. Split the terminal. On one side, enter the command “npm run dev”. On the other side, enter the command “npm run dev:server”. This will start the application locally.

4. Use the local server address that’s provided by npm run dev:server to go to your BigCommerce test store. Then, from the BigCommerce control panel, navigate to “Advanced Settings” > “Checkout” and select the “Custom Checkout” option.

5. After you enter the URL for your locally hosted auto-loader-dev.js file from the /build/ directory, you’ll be ready to start local development.

Customize Your Store Even Further with the Shogun Page Builder

Of course, your checkout page isn’t the only part of your site that you should consider improving with some extra customization.

There’s a good chance that visitors won’t even make it to your checkout page in the first place unless your landing pages and product pages are especially well-designed.

That’s where the Shogun Page Builder comes in — this app gives you complete control over the look of your BigCommerce site. And you definitely don’t need to be a developer to use this tool, as Shogun’s intuitive drag-and-drop interface allows you to make any change you want without writing a single line of code.

With BigCommerce Open Checkout and the Shogun Page Builder at your disposal, you have everything you need to create the optimal user experience for your customers.

#cta-visual-fe#<cta-title>Fast and Flexible CMS For BigCommerce<cta-title>Gain full control over your site without sacrificing page speed with Shogun Frontend.Learn more