How to Modify Your BigCommerce Checkout Page Without Rebuilding It: A Simple Guide for Store Owners

The Challenges of Customizing BigCommerce Checkout

The BigCommerce checkout experience is designed to work out of the box, but for many store owners, this isn't enough. You may want to:

• Adjust labels to increase conversion.
• Inject promotional messages or shipping information.
• Optimize the checkout flow to reduce confusion.

While BigCommerce offers a Checkout SDK that allows full control over the process, this often requires significant development resources. For most store owners, a full checkout rebuild isn't necessary. Instead, we can achieve impactful modifications using simple methods like [lang].json, CSS, and JavaScript, avoiding the need for a costly and time-consuming overhaul.

Simple Customization Techniques with Lang Files and CSS

Sometimes, a small tweak is all it takes to provide a better customer experience. BigCommerce allows you to modify text and labels through the [lang].json file and enhance the presentation with CSS. These techniques are ideal for store owners looking to make minor, static changes without touching JavaScript or diving into complex rebuilds.

Using [lang].json for Text Customization

BigCommerce's [lang].json file is where all the default text for your storefront lives. If you want to change a label, such as “Shipping Address” to something more suited to your brand, this is where you do it.

For Emotion Studios, a client who sells photography shoots, we changed the default “Shipping Address” title to something more fitting: “Where Would You Like Your Shoot Vouchers Delivered?”. This change clarified the checkout process, helping reduce confusion and customer support queries.

Injecting Additional Content with CSS

Once you've changed a label, you may want to add additional information. Using CSS, you can inject content after a field or heading, giving your customers the guidance they need.

For Emotion Studios, we added a simple message after the updated shipping label:

[data-test="shipping-address-heading"]::after {
    content: "We can deliver to you, or to your gift recipient.";
    display: block;
    color: #444;
    font-size: 1rem;
    font-weight: 500;
}

This small addition cleared up confusion about whether vouchers could be sent directly to gift recipients, reducing the number of customer service queries they received.

Get Help with BigCommerce Customizations—Need assistance with adjusting your checkout? Schedule a Free Consultation with our team to get started.

Flair's JavaScript-Based Solution: Using MutationObserver for More Dynamic Customizations

For more dynamic changes—like showing specific content based on customer actions—CSS and [lang].json may not be enough. This is where JavaScript, specifically the MutationObserver, comes in.

BigCommerce checkout is built using React, which means the checkout’s source code is closed off and not directly editable through the theme files. While BigCommerce does offer access to the checkout source through the Checkout SDK, this approach requires extensive development experience and a significant investment of time and resources to rebuild the entire checkout.

Instead of going down this complex route, MutationObserver allows us to listen for changes in the checkout DOM and inject or modify content dynamically, without the need to rebuild the checkout from scratch. It’s an efficient way to achieve the same goal with minimal disruption and cost.

When Simple Modifications Aren't Enough

Not all checkout changes are static. Sometimes, you need content to appear only after certain interactions or in response to specific conditions. For example, you might want to display a shipping banner only when the shipping options become visible, or customize terms and conditions based on the customer's country.

For instance, Maun International only need to show the standard terms and conditions acceptance for UK customers.

However, they needed to adjust the message for international customers.

On our own checkout, we want to highlight Direct Debit as the preferred payment method for UK customers.

That's where the MutationObserver comes into play. It allows us to detect changes in the DOM (the structure of the checkout page) and react to them dynamically, without rebuilding the checkout using the BigCommerce SDK. Using this method can save hours of development time. If you need help implementing this or similar customizations, contact Flair for a free consultation

Sample Code: Customizing BigCommerce Checkout Dynamically

Below is an example of how you can use JavaScript and MutationObserver to inject a custom message in the checkout when the shipping options appear. This approach is ideal when injecting HTML content via CSS isn't possible.

<script>
// Create a MutationObserver to observe DOM changes
const observer = new MutationObserver(() => {
    // Select the shipping section when it appears
    const shipping = document.querySelector('#checkout-shipping-options');
    // If the shipping section exists and is visible
    if (shipping) {
        // Check if the custom banner is already present
        const messaging = document.querySelector('.checkout-delivery-banner');
        // If the banner isn't there, insert it
        if (!messaging) {
            const template = `
            <div>
                <img src="https://cdn11.bigcommerce.com/s-hd44g/images/stencil/50w/image-manager/sustainable-delivery-logo.png" alt="Sustainable Delivery Logo" height="57" />
                <span>All of our orders are shipped in sustainable packaging using carbon neutral delivery providers</span>
            </div>
            `;
            // Insert the message right after the shipping options
            shipping.insertAdjacentHTML('afterend', template);
        }
    }
});
// Select the checkout container or a relevant section for observation
const checkoutContainer = document.querySelector('#checkout-app');
// If the container exists, observe it for changes in child elements (state changes between checkout steps)
if (checkoutContainer) {
    observer.observe(checkoutContainer, { childList: true, subtree: true });
}
</script>

In the case of International Dance Shoes, we used a similar approach to inject a DHL GoGreen banner below the shipping options. This banner helps build trust with international customers by highlighting the use of sustainable shipping methods.

Need help optimizing your BigCommerce checkout?
At Flair, we specialize in efficient checkout customizations that drive conversions. Contact us today for a personalized solution to fit your store’s needs.

Get a Free Consultation

Real-World Examples: How Flair Helped Clients Modify Checkout Experiences

At Flair, we've helped numerous clients improve their checkout experiences with simple yet powerful modifications. Here are a few examples of how we've made a difference:

• Emotion Studios
  Using [lang].json and CSS, we customized the “Shipping Address” label to better align with their photography shoot vouchers. This reduced customer confusion and decreased support queries.
• International Dance Shoes
  We injected a DHL Go Green banner below the shipping options using MutationObserver, reinforcing the brand's commitment to sustainable shipping.
• Maun Industries
  For international customers, we modified the Terms and Conditions agreement to include a clause about import duties and charges, reducing complaints and negative feedback.
• Labelman
  We used [lang].json to change the “Order Comments” label to “P/O Number” and made it required for logged-in customers in certain groups using MutationObserver.
• Rockworld.ie
  Rockworld's checkout was confusing for Irish customers due to mislabelled address fields. We customized the labels and used CSS to hide the unnecessary optional fields.
• Ichcha
  We dynamically removed the free shipping option for wholesale customers by using a MutationObserver to detect when a customer logs in and applying the necessary changes.

Why Use Flair for Your BigCommerce Checkout Customization?

Flair specializes in tailoring checkout experiences to fit the specific needs of our clients. Whether you need simple modifications or more dynamic content injection, our solutions help you achieve these changes without the overhead of a full checkout rebuild.

Here’s what some of our clients have to say about working with Flair:

• Justin Patel, International Dance Shoes:
  “Quick, professional and with great value! Very helpful and our go-to people when we want some customisation work done on our website.”

  We helped International Dance Shoes inject a DHL GoGreen banner into their checkout, reinforcing their sustainable shipping options. Our efficient solution used JavaScript and MutationObserver to ensure the banner appeared dynamically, building trust with international customers.

• Karl Ellis, Rockworld.ie:
  “We needed a BigCommerce checkout for Ireland that did not include States but Counties instead. And that's what we got, Perfect.”

  Rockworld.ie struggled with confusing address fields for Irish customers. By customizing their labels and fields using [lang].json and CSS, we streamlined the checkout process, reducing abandoned carts and improving customer satisfaction.

• Rachna Kumar, Ichcha:
  “They made all the changes as per my requirements till I was satisfied. It was done fast and I would go back to them to do more changes. Thank you!”

  For Ichcha, we used MutationObserver and the BigCommerce Storefront API to dynamically remove free shipping for wholesale customers, reducing expensive delivery overheads for large shipments. Our fast and effective solution met their needs and delivered immediate value.

By utilizing [lang].json, CSS, and JavaScript, we ensure your checkout stays functional and optimized, all while preserving BigCommerce’s update mechanisms. Our clients trust us to deliver fast, professional solutions that improve customer experiences.

If you're ready to customize your checkout but don't want to deal with the complexity of rebuilding it from scratch, let us handle it. Our team can assist you in creating the perfect checkout experience for your store, no matter how big or small the change. Fill out the form below and we'll arrange a consultation to help you get the most out of your checkout.