How to edit checkout page in BigCommerce store?

When it comes to creating an eCommerce store, business owners tend to focus on the product page to bring about a good experience for their customers. However, taking care of the customer’s last interaction is as important as the first impression. This process is taken on the ** checkout page. **

BigCommerce provides its users with multiple ways to edit this progress by BigCommerce one page checkout. Putting time and effort on the checkout page will help you streamline the buying journey and increase the conversions for merchants via the platform.

In this post, we will give you an in-depth guide on how to edit the BigCommerce check-out page as well as clarify the BigCommerce checkout page’s options that you can customize.

Now, let’s get started!

What is BigCommerce checkout?

BigCommerce offers the Optimized One-Page Checkout together with the checkout process. Thanks to BigCommerce, the checkout page and order confirmation page are interestingly minimal but responsive, preventing all distraction on customers’ shopping journey. For those who do not know, BigCommerce has just introduced its new Checkout SDK which means we’re free in customizing and designing a total checkout experience for our customers.

However, it’s important to note that customizing the checkout page is not the same as the process of other default templates in your theme. It can turn risky when customizing the checkout page may result in introducing bugs and negatively affecting your business’s sales.

To be specific, when it comes to some particular checkout customizations, BigCommerce can be impacted in terms of its ability to assume the burden of PCI compliance.

In general, taking care of the checkout page in BigCommerce is important since it decides your customers’ buying decision in the next shopping time. However, you need to be careful when customizing your checkout page. Follow the in-depth guide we provide below to prevent any possible threats.

How to edit checkout page in BigCommerce store?

Step 1: Go to Advanced setting

First of all, log in to your account or sign up for starting with BigCommerce. On the home page of BigCommerce, go to Advanced Settings on the screen’s left hand.

Step 2: Go to Checkout option

After choosing the Advanced Settings option, it will show a list of setting sections. Now simply click on the Checkout button, which is at the very beginning of this list.

Step 3: Scroll down to the “Checkout Styling” section and select “Customize Checkout”

A new page will appear with checkout setting fields. Scroll down to the bottom of the page, you will see the Checkout Styling section. Click on the Customize Checkout button, which is in blue color.

Step 4: Select Checkout page

After clicking on the blue button “Customize Checkout”, continue to select the “Checkout page” section which is in the left sidebar.

Step 5: Edit the checkout page

When opening the Checkout Page tab, you can see your checkout page. Now, it’s time for you to edit it as you wish. You can edit the following:

• Logo: Choose the type of logo (image or text) and align it (left, center, right)
• Header: Upload an image and choose colors of background, text, and border
• Order summary box: Choose the background color and border-color
• Discount banner: Edit the background color, text color, and icon color
• Checkout steps icon: Edit the colors of background, text, and border
• Heading 1, 2, etc: Change the font family and text color
• Body page: Choose the color of the background and focus color
• Body text: Font family and text color
• Secondary text: Font family and text color
• URL: Font family, text color, and hover text color
• Primary action button: Change font family, text color, text hover color, active text color, text disabled color, background color, background hover color, active background color, background disabled color, border color, border hover color, border active color and border disabled cover
• Secondary action button: Change font family, text color, text hover color, active text color, text disabled color, background color, background hover color, active background color, background disabled color, border color, border hover color, border active color, and border disabled cover
• Form input fields: Change 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: Edit background color, header text color, and border-color

If you are good at designing, this step is easy for you. But if you’re not, one piece of advice for you is matching the color scheme of your checkout page to the colors of your logo and other marketing elements. Choosing the right color can help build up brand recognition and indirectly create trust with customers. If you don’t know which color to choose, choose the matching colors or search for sample color palettes on the Internet.

Step 6: Save the changes

If you are satisfied with your customized checkout page, remember to click on the “Save” button to finalize all that you have edited.

You can also choose the Preview option to check your changes before saving and choose the Desktop, Mobile, and Tablet preview version to check out the responsiveness.

In case you are using a BigCommerce Stencil theme, you are enabled to customize the BigCommerce Optimized One-Page Checkout. In fact, all themes in the BigCommerce marketplace are Stencil themes so that all merchants using BigCommerce can approach this option.

Customizable options on BigCommerce checkout page

After understanding how to customize your BigCommerce checkout page, it’s high time to take note of options on the checkout page that you are enabled to edit. They are five options that are built into the BigCommerce Control Panel.

Checkout form fields

One of BigCommerce’s features is defining new fields and reordering fields within the checkout page address form. Shoppers visiting your websites can see the custom fields on the checkout page. Besides, the customers’ values fill in can be seen in the Order View page in the Control Panel section.

There are multiple input types offered by custom address fields which are text field, date picker, dropdown, number-only, checkbox, or password.

The two most common purposes of custom checkout form fields are gathering customers’ account data and verifying a delivery preference.

Store design settings

Secondly, users can customize the store design settings on the checkout page. When editing the checkout page, you will be provided the store design editor with an interface that will help you in arranging and managing the settings such as the header images, fonts, colors of the checkout page. At first, you might not take it seriously but in fact, checking for a setting before hard-coding CSS is important if you want to have full control over your design and don’t want your options to disappear via theme updates.

Settings are stored in the theme’s schema.json file while the currently selected values are stored in config.json. A theme developer can even decide the suitable and available store design settings for sellers.

Multi-language checkout

Next, for those who know about coding, the text strings on the Optimized One-page Checkout page of BigCommerce can be customized and transferred into multiple languages.

As you know, all the checkout pages have a similar convention. Stencil templates make use of it to render text strings. The code called will pull the text string and its values from a set of JSON files. To define and make use of the correct language, it detects the language setting in the customer’s browser. If your store tends to sell products to more than 2 countries, you can also have more .JSON lang files in which each file for one language you serve.

What if you want to get the translator keys that have been rendered on the checkout page? That’s easy since you just need to add in a JSON object, including the checkout keys and their text string values. These keys and values will be sent to the .json lang files of your stores. After rendering, you may want to edit some words to complete the checkout fields. In this case, simply add the checkout JSON object to the language.json file. For example, if your store supports English, add the checkout JSON object to the en.json file.

Another case is that your store supports multiple languages and you want to display different versions in different languages for related customers to understand. You should add the checkout object to your language.json file (maybe fr.json file, sp.json file, and more) and remember to translate the key values appropriately.

Custom CSS

Another option to customize on the Optimized One-page Checkout page of BigCommerce is CSS. To know which CSS classes applied to checkout elements, visit the BigCommerce support section to read the theme documentation. When customizing this option, don’t change the built-in class names and destroy the compatibility of the checkout page updates in the future but reference the custom stylesheet properly and include your CSS rules to edit the styles and layout as you wish.

Custom JavaScript

The last option to customize on the checkout page of BigCommerce is JavaScript via the Script Manager. This feature is an interface for merchants to manage third-party scripts. This is essential for those who are planning to create an app and in need of running custom JavaScript on the checkout page, or even the order data page.

Final thoughts

As you can see, BigCommerce brings about many ways for users to customize the checkout page, which is essential in engaging customers and increasing conversions. Thanks to BigCommerce, you are free from settings that can be adjusted from within the control panel, to completely custom-built headless checkout pages.

However, remember that the checkout page is the last step in the selling process. To persuade customers to add items to their cart and go to your checkout page, you must have effective landing pages, product pages, and blog articles.

Hopefully, after this post, you have useful knowledge on how to edit the checkout page as well as customizable options on BigCommerce. If you have any questions related to the topic, do not hesitate to leave a comment in the section below. Share this post with your friends if you find it interesting, and visit us for more.

Good luck with your online store!