The Complete Guide to Headless BigCommerce
Many popular ecommerce brands in recent years have decided to go “headless.” Headless refers to the decoupling of the front-end user interface with its associated back-end logic. In recent years, this paradigm has become popular as more and more brands have adopted this approach to constructing their tech stack.
BigCommerce, the popular ecommerce platform targeting medium to large ecommerce brands, has released API’s, integrations, and several other features designed to support brands who want to adopt a headless architecture.
In this article, we review everything you need to know in order for you to decide whether going headless with BigCommerce is right for your brand. We cover the following:
Headless 101
Headless is a popular buzzword these days and in this section, we’ll break down what it really means. As mentioned briefly above, it refers to the decoupling of the front-end that users interact with from the backend logic that powers that experience. To better understand what’s so innovative about headless, it’s helpful to contrast it with a monolithic, or traditional, tech stack.
Monolithic architecture refers to a tightly coupled tech stack, where a page request results in backend logic fetching data from a database, integrating that data with a template, and generating and sending HTML, CSS, and JavaScript back to the user for the browser to render into a web page.
This approach, however, is not optimized for creating omni-channel experiences. A tech stack that was initially designed for providing desktop and mobile experiences is not suited for creating experiences on voice assistants, IoT devices, and other new or emerging platforms.
Another drawback to traditional architecture is that the tight integration presents challenges to incorporating new technologies into your stack. Integrating a new Content Management System (CMS) or Product Information Management (PIM) system may involve workarounds or suboptimal integrations that may negatively impact page speed.
Going headless, on the other hand, allows you to more easily create experiences on any digital platform while also integrating new software efficiently into your tech stack. Headless is just one part of a new tech stack, which is often called MACH (Microservices, API’s, Cloud-based, and Headless) architecture.
This new architectural approach relies on an Application Programming Interface (API) to send and receive data from various cloud-based microservices. Your brand’s commerce engine can now exist independently from the front-end applications that power your user interface yet still communicate via API’s.
Your brand can now create separate and personalized presentation layers for every potential digital touchpoint, from mobile devices and voice assistants to IoT devices and the emerging metaverse.
Developers can rely on API’s to integrate your commerce layer and front-end applications with any additional technologies you need to support a great customer experience, from a CMS and PIM system to an Inventory Management System and Payment Processing service.
In short, going headless gives your brand the greater flexibility and control over creating a tech stack that delivers exceptional customer experience across any device.
The benefits of headless BigCommerce
We’ve discussed why a decoupled architecture is superior to a traditional tech stack but why choose BigCommerce? There are a number of reasons why BigCommerce is a great choice if you decide to go headless. In this section, we’ll outline the top reasons.
BigCommerce’s robust API’s
Going headless will allow you to reach your customers wherever this digitally live, whether it’s desktop, mobile, Alexa, or an IoT device. BigCommerce provides robust API support to ensure you can deliver your products on any device and give your customers the ability to purchase them.
BigCommerce makes available a Catalog API so you can access all your product data for your online store. You also have the ability to facilitate purchases via the Orders and Payments API, as well as rely on the Customer API to retrieve and update customer data.
These API’s, as well as many others, give you broad access to all the data you need to create a headless storefront that supports an exceptional customer experience.
Blazingly fast customer experiences
BigCommerce’s robust API’s allow your brand to create amazingly fast experiences for your customers.
Monolithic tech stacks are designed to require the server to send HTML to the user on every page request. This can burden your server during high traffic events, such as flash sales, and can slow down performance and create a poor user experience.
MACH architecture, on the other hand, shifts the burden of page rendering from the server to the client, or the user’s browser. Moreover, a popular practice is to deploy applications on a Content Delivery Network (CDN), which can be located in hundreds of locations around the globe, placing your application close to where your users live.
With the support of BigCommerce’s API’s, you ensure that your technology can more efficiently and easily support high traffic events while also delivering extremely fast page load times to your customers.
Progressive Web Applications
Progressive Web Applications (PWA) are a type of software delivered through the web, built using HTML, CSS, and JavaScript. PWA’s can mimic certain features of mobile and desktop applications, such as send push notifications and work offline. They can be added to the home screen.
PWA’s are not created with a single technology but represent a new philosophy for building applications that is generally consistent with MACH architecture. PWA’s rely on API’s to send and receive data and depend on service workers so the application can still operate offline.
Many ecommerce brands rely on PWA’s to deliver exceptional digital experiences to their customers. One of the most well known applications is Starbucks, which launched a PWA that is 99% smaller than its equivalent iOS application. After Starbucks launched the PWA, online orders doubled, with desktop users ordering online at the same rate as mobile users.
By going headless with BigCommerce, your brand can also launch a PWA. Later on in this article, we’ll review front-end applications such as Next.js and Gatsby, which allow your development teams to create PWA’s for your customers.
Customized checkout experiences
BigCommerce’s API gives you the flexibility to create a custom checkout experience for your headless storefront. There are three checkout experiences you can offer your customers.
The first is to redirect your customers from your headless storefront to the Optimized One-Page Checkout that exists as part of your Stencil theme. Another option is to embed the one-page checkout as an iframe into your headless storefront.
Redirecting to the BigCommerce checkout or embedding it within your site allows you to outsource ownership of Payment Card Industry (PCI) compliance to BigCommerce. PCI compliance is a standard that governs how you store and protect your customers’ credit card information. Outsourcing PCI Compliance to BigCommerce gives your teams one less thing to manage, freeing them up to focus on higher priority concerns.
The third option is to create a custom checkout experience. BigCommerce makes available an open-source version of the One-Page Checkout that your development team can use to customize for your headless store.
You can create a unique experience that satisfies your business needs and create a great customer experience. Just keep in mind that you’ll need to take greater ownership over PCI Compliance if you create a custom experience.
An exceptional developer experience
Going headless requires a greater dependence on developers to create and maintain your new technology stack. Your developers will have to not only build a new headless storefront, but also integrate numerous cloud-based API’s into your commerce engine and front-end.
A greater dependence on developers and the additional complexity that comes with MACH architecture means that business and technology leaders should evaluate headless ecommerce platforms for the experience they provide developers through clear and comprehensive documentation, easy-to-use API’s, and starter code.
BigCommerce has invested heavily in providing your developers with a great experience. BigCommerce’s developer documentation, for example, is easy-to-use and navigable.
It’s API documentation is comprehensive with customizable code samples and clear descriptions. BigCommerce’s documentation even includes a section on how to set up a headless storefront with a Next.js starter template.
In addition to providing developers with an open-sourced one-page checkout, BigCommerce maintains a number of open source projects from API clients written in Node.js, PhP, and Ruby to sample applications and headless integrations (which we’ll talk about more below).
The drawbacks of headless BigCommerce
Going headless has its benefits but there are several drawbacks that should be considered. Not all of the limitations addressed in this section are unique to BigCommerce. Some drawbacks you’ll experience regardless of what commerce platform you select when going headless.
Increased complexity
A monolithic application has its drawbacks in a world where brands need to have a presence of several different devices, but one benefit to traditional architecture is that it can be easier to maintain. With MACH architecture, however, your development team will need to rely on API’s to wire up multiple microservices, which exposes several points at which a technical glitch or even failure could occur.
When going headless with BigCommerce, you’ll need to expend resources on an in-house development team or external agency that can keep track of these problems and fix them as they arise. While you’ll always need to spend more development resources when going headless, some BigCommerce alternatives, which we’ll discuss in more detail below, provide additional support to help you manage the complexity.
BigCommerce app integrations
If you’re an existing BigCommerce customer who relies on app integrations, you may find yourself with apps that can't integrate with your headless front-end. Not all apps have API’s that can be used for a headless solution. In this circumstance, you’ll have to find other services to replace the apps you currently rely on.
More services to procure
With traditional architecture, BigCommerce handles your Stencil storefront, email marketing, CMS, and any additional integrations you choose to add. With MACH architecture, on the other hand, you’ll want to integrate your tech stack with other services in order to take advantage of all a decoupled tech stack has to offer.
Evaluating and getting approval for these varying services can be burdensome and time consuming for you and your leadership. You’ll likely need to select a cloud-hosting service and headless CMS, as well as perhaps a PIM, Inventory Management System, among other types of software.
You’ll need to independently identify and select services depending on what features they have, how they can be integrated into your stack, and how they align to your existing internal processes.
Once you make a selection, you’ll then need to get approval from your company’s procurement team. Your procurement team will have to independently evaluate the purchase of each license and negotiate terms with the service.
Additional development support
Building and maintaining a decoupled tech stack will require your brand to spend more resources on an in-house development team or hire an external agency. Building a headless storefront, for example, can cost you anywhere from 50K to 250K and take about 6 months to launch.
This cost estimate doesn’t even take into account wiring up the additional microservices you may want to integrate into your stack, such as a headless CMS. And it doesn’t take into account maintaining your technology, which will require additional resourcing to deal with any potential bugs and updates.
Changes to your internal processes
Going headless can require a big change to your internal processes, especially as it relates to how your marketing and content teams publish content and launch marketing campaigns. With a Stencil theme, your content teams can easily preview and publish content internally without developer support. Your marketing teams can unilaterally launch landing pages and flash sales.
These internal processes can be dramatically disrupted when decoupling your tech stack. Your teams will depend more heavily on developers to publish content and launch marketing campaigns.
Giving your content and marketing teams more control over these activities is certainly possible with a headless stack, but you will need to think very carefully about what headless CMS to use and how to integrate it into your tech stack in a way that aligns with your teams’ internal processes.
Frontend solutions for going headless
After weighing the pros and cons of going headless, if you decide to decouple your architecture, there are a number of front-end technologies you can adopt to build your storefront. BigCommerce supports your development teams by offering a number of plugins and starter templates they can use to get up and running quickly.
Wordpress (and other CMS’s)
BigCommerce maintains an open source plugin that allows WordPress sites to support an online storefront powered by BigCommerce. This can be a good solution for small to medium sized businesses that rely on a WordPress site that houses high-ranking, SEO optimized content.
Instead of migrating your content to a new front-end, you can manage your products directly from the WordPress admin area. One advantage is you can save developer resources by not moving to another front-end platform. Another is that your content and marketing teams don’t need to change their internal processes or learn how to use a new user interface.
Using BigCommerce with WordPress, however, doesn’t allow you to take full advantage of the best-of-breed, API-first technologies associated with MACH architecture, but it can be an effective way to build a headless storefront if your brand runs a content or editorial focused WordPress site.
In addition to the BigCommerce for WordPress plugin, BigCommerce also makes available several plugins for other popular CMS, such as Bloomreach, Sitecore, Adobe Experience Manager, Acquia ACF, Drupal, and DEITY Falcon.
JavaScript frameworks
JavaScript frameworks are a frontend solution that is more in-inline with what is currently popular among developers. Several of the most popular JavaScript frameworks are built with the React library. React is a JavaScript library that is designed to render a user interface in the browser, make API’s calls to third-party services, and refresh data in response to user interaction.
Two of the most popular frameworks built with React are Next.js and Gatsby. Both allow your teams to take advantage of React while adding additional capabilities and tooling that make building headless storefronts much easier:
Gatsby - Gatsby has historically supported static site generation, where your site is generated during a build process. HTML, CSS, and JavaScript files are built and then stored on a network where it takes milliseconds for your site to load in a customer’s browser. Gatsby is an opinionated framework that also provides native support for making GraphQL queries.
Next.js - Next.js is perhaps the most versatile and popular of all the JavaScript frameworks, as it supports not only static site generation but also server side rendering. There are additional features that make it a great developer experience and allows your team to create anything from online storefronts and landing pages to social media applications.
Frontend as a Service (FEaaS) solutions
Frontend as a Service solutions allows your developers to rely on cloud-based modules to build performant user interfaces. FEaaS solutions allow you to rely on fewer developers to maintain your front-end. They also attempt to solve an organizational pain point of adopting a decoupled architecture: the reliance of marketing and content teams on developers to publish content, launch landing pages, and initiate flash sales.
Several FEaaS solutions come with page builders for your non-technical teams to change copy or alter page layouts. Many also come out-of-the-box with CMS functionality, allowing your content teams to take ownership over the previewing and publishing of content. This is a new and emerging market and here we cover 2 of the current market leaders:
Shogun - Shogun Frontend offers an easy-to-use page builder with additional CMS functionality. Your brand’s marketing and content teams can change page layouts and publish content without developer support. Shogun also relies on the React library and all the great features and functionality that come with it.
Builder.io - Builder is another market leading FaaS solution that offers a page builder as well as a CMS. It has great developer documentation and is capable of integrating with any JavaScript library, such as React, Vue, or Angular.
BigCommerce pricing
BigCommerce divides its pricing into 4 tiers. As with most tier based pricing, the higher the price point, the greater the number of features and services available with your plan. Each tier also has a sales threshold, above which BigCommerce automatically moves you into the next tier.
The Standard plan costs $29.95 per month up to 50K per year
The Plus plan costs $79.95 per month up to $180K per year
The Pro plan costs $299.95 per month up to 400K per year
The Enterprise plan costs is a custom amount per month
When examining BigCommerce’s pricing tiers in their ability to support a headless storefront, it’s important to focus on three factors: (1) API rate limits, (2) level of API support, and (3) multi-storefront support.
Each pricing plan from Standard to Enterprise makes available to your brand all of BigCommerce’s robust API’s. Each plan, however, limits the number of calls you can make.
Both the Standard and Plus plans limits your API calls to 20K requests per hour, with a maximum of 150 requests per 30 seconds
The Pro plan limits your API calls to 60K per hour, with a maximum of 450 requests per 30 seconds
The Enterprise plan allows for unlimited API calls per hour or per 30 seconds
If you’re a brand that has to handle heavy traffic, especially during flash sales, you may want to consider the Pro and Enterprise plans, as they’ll provide you with a greater number of API calls.
All plans come with great 24/7 tech support via phone, chat and ticket, but only the BigCommerce Enterprise plan comes with express routing, priority support, and customer success and management availability. The Enterprise plan also comes with additional API support in that BigCommerce will work with your team to ensure that any API functionality and documentation of development features work as intended.
Another advantage of the Enterprise plan over other pricing tiers is the enhanced support for multi-storefronts. If you manage multiple brands or sell in different regions, you can manage all your online storefronts from one single account. Your brand can create and manage multiple storefronts directly from your BigCommerce admin area.
In summary, the Pro and Enterprise plans may offer you the best support for going headless. But ultimately it’s up to your business and technology needs to determine what price point makes the most sense for your brand.
BigCommerce alternatives
Over the past several years, several headless commerce platforms have emerged to support brands that want to go headless. In this section, we cover 3 commerce engines that are a viable alternative to BigCommerce.
Shopify
Shopify is the market leader in ecommerce platform software, and in recent years, has invested heavily in supporting brands that want to go headless. Going headless with Shopify is easy with the Storefront API, which is built entirely with GraphQL, a query language that allows you to fetch data quickly and efficiently.
In 2021, Shopify released Hydrogen, an open-source React framework specifically designed for integration with its commerce layer. Hydrogen comes with built-in components, hooks, and utilities that will allow your developers to work more efficiently and launch your online storefront faster.
And with Shopify Plus, an enterprise plan starting at $2000 per month, you have the option of using Shopify’s cloud-hosting service, Oxygen. Oxygen has a global network of servers that ensure your customers will experience incredibly fast page loading speeds.
And if that’s not enough, Shopify has integrations with several headless CMS’, such as Sanity and Contentful. Shopify, in fact, invested in Sanity CMS in June of 2022, ensuring that additional integrations between the commerce layer and the headless CMS are on the horizon.
Elastic Path
Elastic Path is a commerce engine specifically designed to support headless commerce. Unlike Shopify and BigCommerce, both of which started out offering monolithic tech stacks to brands, Elastic Path does not support “headful” commerce.
The benefit of adopting Elastic Path, or any other commerce layer that is API-only, is that by default they have 100% API coverage, unlike BigCommerce, which claims to have only 92% coverage.
Elastic Path’s commerce layer can be utilized as either cloud-based (SaaS) or self-hosted, and supports several use cases, such as B2B, B2C, and B2B2C. Another product offered by Elastic Path is the Product Experience Manager, which serves as a central place for your merchandisers to add and manage products, create promotions, and compose catalogs.
Perhaps their most unique differentiator as an ecommerce platform is the Composable Commerce XA, which is a service that provides operational support to setup and maintain a decoupled tech stack.
Decoupled tech stacks add an additional level of complexity for your development teams to handle. By offloading some of that support to Elastic Path, your development teams are free to work on new features instead.
Spree
Spree is an open-source ecommerce platform specifically designed for going headless. As an open-source solution, your brand is responsible for maintaining and hosting the platform if you decide to use Spree.
Adopting open-source software over a SaaS solution requires additional developer resources. But those additional resources may be worth it since you’ll have the ability to configure Spree to suit your business and technology needs. That level of customization is not available with SaaS platforms such as Shopify and BigCommerce.
Spree makes available a Next.js starter template as well as a JavaScript/TypeScript SDK. Spree also makes available an integration with Vue Storefront, a FaaS solution, which provides cloud-hosting, a page-builder, and ready-to-customize UI components.
Spree also provides great developer documentation as well as a Slack community where your developers can get any technical support from other Spree developers.
Headless BigCommerce examples
Many brands - big and small - have adopted headless BigCommerce. In this section, we cover two brands that solved complex business problems by going headless with BigCommerce.
Elevate Outdoor Collective
Elevate Outdoor Collective, formerly known as K2 Sports, is a collection of outdoor sports-related brands specializing in skiing, skateboarding, and skating. The brands’ online storefronts were formerly on Salesforce Commerce Cloud but were limited in what they could do.
For example, they were unable to create cutting-edge customer experiences due to the lack of API’s. And because their software was not a SaaS platform, they had to devote additional developer resources to hosting, maintenance, and upgrading. These factors negatively impacted their ability to expand their brands internationally.
Elevate decided to go headless because it would allow them the ability to create innovative shopping experiences that were more challenging with a monolithic architecture. They selected BigCommerce primarily due to their robust API coverage and performance. They also adopted ContentStack as their headless CMS.
Elevate was able to launch 8 brands and 16 sites in under 9 months, and with ContentStack, they were able to accelerate the rate at which they publish content.
Burrow
Burrow is a direct-to-consumer furniture store specifically designed to eliminate the hassles of shopping for furniture. They had immediate success after launching their brand in 2017, when they generated over $3 million in sales.
But their success also meant that they were quickly outgrowing their monolithic ecommerce platform. A traditional architecture limited their ability to create the types of experiences, especially on the product detail page, that they believed would fuel business growth. It also restricted their ability to quickly A/B test and go live with updates that would positively impact conversions.
To solve these challenges, they decided to go headless with BigCommerce. The reliability and scalability of BigCommerce allowed their development team to focus on updates to the site instead of maintenance and upgrades. They also built a React front-end with an integrated headless CMS so they weren’t constrained by templates in the customer experiences they could create.
Since launching their headless solution, Burrow has seen a 50% increase in site speed and performance and a 30% increase in conversions.
Still want to read more success stories? Read about 8 brands that went headless with BigCommerce.
Conclusion
Whether going headless is right for your brand is a matter of determining whether the additional developer costs and complexity are worth all the benefits. If you are a medium to large company with an existing in-house team of engineers, then it probably makes sense to go headless. If you’re a small business, however, sticking with your monolithic tech stack may still be your best bet.
BigCommerce is a great solution for brands interested in going headless. The platform provides a robust set of API’s and great developer documentation. With the Enterprise plan, you also get all the support you need to integrate BigCommerce into your tech stack.
There are a variety of ecommerce platforms that offer the ability for brands to go headless. You’ll need to evaluate which ones integrate best with your tech stack. As you evaluate platforms, BigCommerce is a solution that should definitely make your short list of ecommerce platforms.
