Everything You Need To Know About Headless BigCommerce

Weighing trade-offs and vetting monolithic platforms is a thing of the past. Headless eCommerce enables businesses to create a modular solution, offering their customers their unique brand and experience. So much so that traditional eCommerce platforms like BigCommerce also gravitated towards enabling headless commerce architecture support.

By making APIs available for most of its catalog features, BigCommerce now provides eCommerce businesses the practical flexibility of a modular platform and was recently named a Leader in IDC MarketScape: Worldwide Headless Digital Commerce Applications Vendor Assessment, a report that assessed headless digital commerce platforms based on their capacity to deliver API-first experiences.

If you’re considering headless BigCommerce for your business requirements, here’s all the information you need:

• What is headless BigCommerce?
• Why should you go headless with BigCommerce?
• What are the benefits of implementing headless BigCommerce?
• What are the shortcomings of implementing headless BigCommerce?
• How to go headless with BigCommerce?
• Examples of headless BigCommerce stores
• Headless commerce migration checklist

What Is Headless BigCommerce?

To get into what headless BigCommerce is, we’ll assume you already know about headless eCommerce and are curious about how and if going headless with BigCommerce makes sense.

If you need to jog your memory around headless eCommerce, here’s a detailed refresher – everything you need to know about headless commerce.

In a headless approach, BigCommerce allows you to connect to any frontend network, letting you build your headless storefront for unique cases. APIs are used to connect the backend (BigCommerce) with multiple frontends (various channels like website or mobile).

With BigCommerce’s API endpoints, merchants can build custom functionality based on their store needs. The various aspects of their commerce offering, including search, content, products, billing, and payments, can be powered by software such as API-led CRMs, ERPs, or others – typically called microservices. These microservices take care of individual nodes in your customer journeys like payments, cataloging, and more. 

A typical headless commerce platform can include;

– BigCommerce for admin and customer data,

– Drupal for content management,

– Algolia for search,

– Fluent Commerce for order management,

– Chargebee for subscription eCommerce billing and the like.

Why Should You Go Headless With BigCommerce?

BigCommerce comes with good out-of-the-box features like product and order management, reporting, and the like to get your business up and running. However, as your business grows, you might run into some shortcomings.

For instance, finding the necessary dropshipping apps on the app store might be difficult; VAT MOSS* isn’t easily managed for businesses selling digital products; themes can feel quite similar. It can be challenging to change the text content and all the other features of your home page, and it takes some trial and error to get the homepage carousel to start looking the way you want it to.

Hence, to overcome these issues and scale your frontend functions over time, you will need several add-ons and a lot of effort from your development team, resulting in a cumbersome process that will eat into your resources and slow down site speed and performance. As you scale, concerns like rising site traffic, and the need to deliver consistent and satisfying customer experiences at an omnichannel scale, will leave you craving more robust functionality.

Imagine the freedom to cherry-pick the best microservices needed for your eCommerce store; this is the flexibility that BigCommerce offers with its APIs. Unable to find a dropshipping app of your liking? Do you need more unique themes for your store? No problem. You can choose to create custom integrations with any tool you want, and not just what is offered via BigCommerce’s app store.

The key is implementing headless BigCommerce to address the scalability issues that BigCommerce doesn’t meet, for instance, the flexibility to choose your frontend, 

In detail, let’s look at the advantages of going headless with BigCommerce.

* VAT MOSS (VAT Mini One Stop Shop) – tax option offered to businesses dealing with the supply of digital products

What are the Benefits of Implementing Headless BigCommerce?

To be successful in the highly competitive eCommerce market, merchants want the whole gamut of benefits offered by headless commerce, such as high site speed, superior design capability, and seamless custom integrations. By letting you build a modular solution, these advantages, and more, are what headless BigCommerce enables.

1. Increased site speed

Using a CMS while adding plugins over time increases the load on your system, affecting store performance. With a headless approach, you’re automatically relieving the front and backend of shared processing power, resulting in better site performance. Additionally, by delegating functions like order processing and catalog management to specialized tools, we can ensure the least amount of lag regarding site response and load time.

Furthermore, BigCommerce lets you use PWAs (Progressive Web Apps) like Next.js, which can render your eCommerce website into a static asset (where content delivery occurs through a network and not a server). With the use of PWAs, you can notice a drastic speed improvement.

2. Better conversions

This follows the previous point – combining many factors leads to an overall increase in conversions. For example:

• better site speed and performance due to an interactive and customizable interface;
• flexibility for marketers to create customized product promotions.

3. Single source of truth for multi-storefront management

Suppose you need to build different storefronts for multiple products or a separate storefront for your subscriptions (compared to your one-time purchases). In that case, the ability to manage all of this from a single, convenient space becomes extremely important. BigCommerce’s decoupled commerce architecture seamlessly communicates and funnels in data from all integrated tools with API calls, so information across all your systems can flow back through the same path. 

Order processing, including inventory and stock management, becomes highly efficient since all data is stored in one place (even though it’s reflected on multiple frontends). It allows you to process more orders and provide better customer service since all the needed information is correct where you need it.

4. Create customized shopping experiences

BigCommerce’s theme engine is Stencil, which is excellent and customizable, so you can design the store to look and feel a certain way. However, going headless is critical if a designer/developer prefers another set of themes or if they have already built an existing one and would like to continue. With headless BigCommerce, you can feel free to go for a range of any paid themes or templates, presentation platforms, or coding language that you’d like, giving yourself the chance to create unique branding for your store. You can also build custom user journeys by bringing on-page localization.

5. Enable commerce functionality for content-driven sites

A CMS-based content site would require plugins to enable commerce functionality. Triggering multiple plugins can significantly impair site speed and make room for potential lapses. With the headless architecture on BigCommerce, you can easily upgrade an existing content site to a commerce site with the help of APIs.

6. Custom Integrations

Custom integrations take a significant amount of effort with traditional builds. However, since APIs already drive a headless BigCommerce store, you can use them to plug in just about any service you want. You can also quickly determine which events on the website should trigger actions in the integrated tool, like a CRM or a subscription management tool.

The range and depth of services that you can include in a headless solution, where you can tailor your setup to meet your precise needs, far exceeds what is offered by BigCommerce’s default offering. 

What are the Shortcomings of Implementing Headless BigCommerce?

 Let’s admit it; headless commerce is not relevant for everybody. Early-stage businesses might do better without the associated complexity of cherry-picking, integrating, and maintaining custom tools – when simple out-of-the-box solutions from BigCommerce would do. Then, there is also the amount of time and setup costs to work with your developers and ensure everything is just right for your business. 

Late-stage businesses that have overgrown simple eCommerce use-cases and are now offering custom subscriptions, or dynamic pricing and offers, might be willing to invest their resources in a headless commerce platform. Smaller players might want to focus on building a solid business foundation.

BigCommerce is a relatively new player in the headless space and is more popular as a traditional eCommerce platform. It means that while it does many things, it also has some restrictions. Here’s what you need to keep in mind before starting a headless BigCommerce platform build –

 1. BigCommerce domain for checkout

 Headless or not, BigCommerce mandates that your checkout should only be hosted on its domain. BigCommerce will take responsibility for building, hosting, and maintaining security and payment card industry (PCI) compliance at checkout. It doesn’t change that even repeat customers must fill in the same checkout form as a brand new customer each time.

 The most control you can exercise is to embed the checkout to your store, so when a customer pays for something, it can remain on your site. However, customers would still have to fill in BigCommerce’s checkout form.

2. More developer and design bandwidth required

While the benefits of a headless build are undeniable, you’ll need some help to get there, especially if you’re a small business. A web designer and developer must be involved to build the website effectively and integrate your tools and systems. 

3. Initial setup costs are high

This follows the previous point – if you need to hire developers and web designers, be prepared for high setup costs. A lot of work goes into launching a headless BigCommerce store; the site design might take a couple of days, and the entire development will take a week to two weeks. While this may lead to a sizeable invoice, remember that headless solutions will lead to the scale and flexibility you desire and will be well worth the costs in the long run.

4. More systems to be managed    

While a headless approach allows you to build a modular platform, you now have more systems to manage to keep your website running. Instead of handling all functions like changing content, adding products, and managing subscriptions on BigCommerce, you will have to go to separate platforms. If you want a headless system, be comfortable managing eCommerce processes between different platforms.

5. Requirement for a third-party analytics platform

Once you upgrade your store to a custom frontend, BigCommerce’s analytics are no longer accessible. Managing a store without analytics is impractical. Hence, there is a necessity to add an analytics platform, and this will need more configuration.

Or, some third-party tools you choose to integrate with may also come attached with an analytics module. For instance, Chargebee’s analytics tool tracks and monitors product, customer, and revenue information to help you improve strategy and maximize growth.

6. Might need to rebuild plugins

Any plugin that has code running on both the frontend and the backend will require some adjustment if it doesn’t already have a developed API. Most popular plugins like AfterShip, and Yotpo have decent APIs that you can use to access their functionality. However, some custom development work is still needed to rebuild the plugins.

How To Go Headless With BigCommerce? 

To go headless with BigCommerce, it is necessary to understand how the headless infrastructure setup with BigCommerce works.

The Four Layers of Functionality for Headless BigCommerce

Storefront

The storefront can be a content management system, a static site, a mobile app, or any other interface your customers would interact with while exploring or making a purchase. For example, you could use BigCommerce’s WordPress integration to build your frontend, or you can choose to start from scratch with a framework like Gatsby. The best part is that you can also have more than one storefront and connect it all to the next layer – the application interface.

Before we discuss the APIs, like the storefront, there is also another layer that connects to the application interface:

Microservices

Microservices denote all your custom integrations, i.e., specialized tools that you want to plug into your storefront/s. This layer can include third-party backend services, including PIM, CRM, subscription management, and order management tools. 

Application 

Through this layer, you can carry out specific tasks, return data to display it to customers or transfer data to other systems by making API calls to BigCommerce. The application layer is responsible for handling the logic for any custom functionality, like pre-filling the checkout page or displaying discount codes based on a customer’s shopping history, in addition to handling fundamental tasks like accessing product information or sending requests to process payments.

BigCommerce

BigCommerce can handle functions like payment processing, accessing catalog and order information, and storing customer data. Hence, you need not worry about setting up the infrastructure. The BigCommerce layer is responsible for providing the requested data in response to the application to support the backend eCommerce functionality.

Now that we understand how headless BigCommerce works let’s briefly discuss the steps to get started.

Launching a Headless BigCommerce Store

Begin by signing up to BigCommerce and filling in your details to open a store. Then, customize your store – from updating your store settings to choosing a theme for your store.

Now, for the significant part of the setup. To understand the steps involved in creating the rest of your headless BigCommerce store, you can follow the flow of a purchase funnel:

First, you need to be able to display product data. Create a product page, list all your products, and fill in your product details, including the product’s name, description, price, and shipping costs. 

The customer can now select a product, go to the product details page, and add it to the cart from your storefront, after which he will end up on the cart page. Once the shopper decides he’s ready to buy the product, he will proceed to the checkout page, where he will make the payment. Depending on your brand, you can create and customize your cart and checkout pages how you want them to look and feel.

Headless BigCommerce In Practice

A fundamental requirement to launch your headless store on BigCommerce is to be clear about the pain point/s you are trying to solve by going headless. You might have wanted to use a different CMS or a specific subscription management tool; whatever it is, this clarity will help you set up your headless tech stack.

An easy start is by figuring out what CMS you want to use for your store – WordPress (that BigCommerce natively supports) or any other software like Drupal, Bloomreach, or Sitecore. Figure out what other tools you want to integrate and what functionality you would like to leave with BigCommerce.

For instance, Yeti Cycles is a headless site recently launched on BigCommerce. Although the design of their previous site was excellent, their design-first strategy over time resulted in a disjointed backend, making it challenging and expensive for their marketing team to manage or update the site.

They required a more user-friendly frontend and a more integrated backend to accomplish their marketing goals. They also wanted the flexibility to completely revamp and improve their content and design while preserving the integrity of their original work for upcoming campaigns. Most importantly, they wanted to be able to complete it independently without constantly requiring developer assistance.

Yeti cycles achieved all their objectives after switching to a headless strategy with BigCommerce, employing various frontend tools and systems and a robust CMS. The setup for launch, which had previously required weeks of planning and coordination, only took them a few hours, and they could handle it independently. 

Yeti Cycles created targeted campaigns to lower abandonment rates by constantly tracking abandoned cart rates and specific products being abandoned within BigCommerce’s Analytics admin.

Examples Of Headless BigCommerce Stores

By adopting an open-SaaS approach to their platform and making more and more of their features and catalog accessible via APIs, BigCommerce is providing brands the flexibility to support the frontend of their choice, allowing them to adapt to changes in the eCommerce market rapidly. Here are some examples of companies that solved their challenges with headless BigCommerce:

LARQ

LARQ created the world’s first self-cleaning water bottles. Apart from selling their water bottles, the business participates in various funding initiatives regarding clean water problems.

Once the founders knew they wanted to scale, they wanted an eCommerce platform that would help them launch multiple international customer sites with features like multicurrency while offering advanced capabilities like customization flexibility in terms of total control over content and user experience.

So, they used BigCommerce as their commerce engine and React for their front end. Consequently, they successfully managed all their regional sites worldwide under a single domain. Since incorporating headless BigCommerce, LARQ was able to rapidly attain a near-global presence while achieving an 80% increase in conversion rate and a 400% increase in revenue within a year.

Canvas 1839

 

Canvas 1839 is an Austin-based company that sells premium CBD creams and lotions. Given the shifting legalities faced by the cannabidiol industry, Canvas had to deal with constant scrutiny from eCommerce platforms, payment processors, and shipping services. For instance, their previous platform, Shopify, was also restricting their business regarding the payment gateways they were allowed to use.

Apart from wanting a platform that supported CBD businesses, they were interested in adopting a headless model to have complete flexibility over building and managing content-heavy pages and ensuring that those pages are fully integrated with the rest of their website. They also wanted their developers to be able to use tools like Gatsby, React, and GraphQL to build an engaging frontend experience.

Using a PWA build on Gatsby, Canvas 1839 launched their store on BigCommerce, enjoying the benefits of a CBD-friendly eCommerce platform and the freedom to innovate their frontend as they wished.

Corey Ward, the Senior Web Developer for Canvas 1839, said: “We felt more confident that we’d be able to meet whatever challenge that came our way than we did constraining ourselves to platform-specific tooling that caters to a traditional eCommerce experience.”

Headless Commerce Migration Checklist

 It would help if you explored a few essential factors once you’ve decided that headless commerce is the right option for your business.

• Gauge the platform’s flexibility: How many open API endpoints are there? Are they one-way or bidirectional?
• How scalable is the solution; can you seamlessly integrate any custom integration you want?
• Can the platform handle PCI-compliant checkout without compromising flexibility or limiting the number of gateways?
• Are there any limitations on catalog size?
• Are there enough ready-to-bake options for capabilities such as sending real-time shipping information and updating customers on their order status?
• What is your business/revenue model? Do you (plan to) offer subscriptions? Considerations like these can heavily influence your capability requirements.

Going through a checklist like this will ensure you don’t run into any future complex workarounds for something that should’ve been simple.

Future-Proofing Your Headless eCommerce Business With Subscriptions

Given the many advantages and the reliability of subscriptions, the number of subscription-based businesses has skyrocketed in recent years. The global subscription eCommerce market is predicted to reach $478.2 billion by 2025, up from $13.2 billion in 2018 at a CAGR of 68%.

If your business is interested in pivoting to a subscription model or boosting your existing subscription strategy, you will eventually run into problems if you’re using a monolithic eCommerce platform. For example, in the years it took Dollar Shave Club to become the new market leader, Gillette didn’t rapidly launch a subscription service to compete with its competitor. The reason Gillette couldn’t do so, being an established business with a loyal customer base, is due to a technological lag.

Given how closely the front and backend are linked in traditional eCommerce systems, minor adjustments (like adding a subscription layer or new products) or feature upgrades (like introducing subscription deals or pausing or adjusting subscriptions) would require completely reimagining their platform. You will end up fracturing the integrity of the backend every time you need to make a change. 

Hence, for modern eCommerce businesses, adopting subscription and revenue management tools in a headless architecture has proven to be highly efficient in keeping up with the post-pandemic increase in subscription demand and enhancing customer experiences. Companies may be able to create scalable, faster-to-market platforms thanks to headless commerce with the help of platforms like BigCommerce that support headless architecture.

Choosing The Right Subscription Management Tool For Your Headless Store 

With subscription eCommerce services becoming ubiquitous, it is crucial to have the right tools to help you stand out.

For instance, integrating BigCommerce and Chargebee will enable you to offer subscriptions while giving you access to a wide range of features, such as dunning, 100+ payment gateway options, abandoned cart reports, gift subscriptions, and a lot more.

With simple API integration, Chargebee can help you make your best-of-breed commerce tech stack subscription ready;

• create high-value subscriber experiences with APIs,
• customize subscriptions your way,
• leverage a wealth of subscription behavioral data, and more.

Take your subscription business to the hypergrowth league. Get in touch with us!