Going Headless with BigCommerce

In this brief article, we're going to review some of the benefits of switching to headless BigCommerce from a traditional setup, touch on the rough costs of this transition, and talk about the downsides. If you finish reading and still aren't sure if going headless is worthwhile, we'll point you to someone you can ask questions of.

Here's a quick breakdown of the article if you want to jump ahead:

Advantages of headless BigCommerce

Interactive interface
Unique branding
Lose the templates
Split Testing
Plugging in new services
Adding your favourite CMS
Changing to a different eCommerce platform
Great blog
Improved performance
Increased conversion rate
Keep all the great tools of BigCommerce
Out of the box PWA functionality
Safe and secure

Disadvantages of headless BigCommerce

Checkout uses BigCommerce domain
Developer and designer help required
High initial costs
More systems to manage
Need a 3rd party analytics platform
Plugins need to be rebuilt

BigCommerce boasts a modest 1.32% of the global eCommerce market share. I only found this out after digging up the static, and it’s a bit unexpected. Especially considering that WooCommerce owns over 20% of the market share.

We’ve built a bunch of websites using WooCommerce… and it stinks. WordPress is an old blogging platform and modifying it to do eCommerce is a bit like shoving a square peg in a round hole.

BigCommerce on the other hand is a great platform with a ton of excellent functionality.

It’s so good that every so often, a post flares up on Reddit about whether BigCommerce is a better solution than Shopify.

If you're new to the technical scene and not sure if your website is powered by Shopify, BigCommerce or another option you can check out this brief article we wrote on how to tell what platform your website is built on.

Whenever this argument comes up, it seems to end up with everyone agreeing that if you want to do anything more advanced with BigCommerce, you’ll need to stitch together half a dozen plugins and hope that your site’s performance doesn’t tank.

The biggest complaints usually focus around BigCommerce’s range of great looking templates which are a bit thin. And how building a custom theme can be a time-consuming mission that won’t get you all the way to a perfect solution.

As a whole package, BigCommerce is great as a starting point for a small eCommerce business. It will get you up and running, but as your business grows the platform will become restrictive.

Adding new functionality either needs to be achieved through plugins, or from timely development that needs to adhere to “BigCommerce” best practice. Making significant interface changes falls into the same category.

This is a big headache when you come to run A/B tests on the interface and you go to make some changes and break something in the analytics, or how the products are managed on the backend. There’s no effective way to let data drive the evolution of your site.

This sucks because BigCommerce does some stuff really well. The catalogue, order management and payment processing tools are great.

That’s why going headless makes sense. Tapping into the mature commerce tools that have taken years of hardening and refinement, while allowing modern frontend technologies to create an interactive interface is like getting the best of both worlds.

Decoupling the BigCommerce front and backends and integrating it with a platform like GatsbyJS or NextJs is a practical way to achieve Google-friendly performance. It’s also a great developer experience, which keeps everyone happy!

It’s not all sunshine and flowers though. There’s one glaring issue with this configuration and it creates a bit of a weird experience for users.

Advantages of headless BigCommerce

Here’s a breakdown of the benefits of turning your BigCommerce website into a headless build:

Interactive interface

Going headless opens up options for which technology can be used to build the interface. Rather than being locked into BigCommerce’s system, your site can now be powered by a beautiful, interactive ReactJS or VueJS interface.

There are countless JavaScript libraries like GSAP and CSS frameworks like Tailwind that the development community swear by that are now at your disposal.

Unique branding

Finding a theme or template that perfectly fits your business’s brand is tough. Most of the time you’ll end up wanting to change things around. What you end up with is a Franken-theme that is 90% of the way to what you want.

Going headless gives you the tools to take a custom design and efficiently turn it into a new theme. This means you’re not making compromises along the way.

Lose the templates

One of the most common complaints about BigCommerce is the lack of depth in their free templates. Even the range of paid templates on Theme Forest is a bit thin with 89 templates available. As a comparison, there’s 1,200 for Shopify and 1,300 for WooCommerce.

Going headless opens new design possibilities for your site. Most of the time you’ll want to build the design from the ground up, so your store won’t be locked into that generic “template” look.

Split Testing

Interface changes can be incredibly swift with a headless setup. Introducing a technology like builder.io means your site’s content can be modified through a drag and drop builder. Most of the time you won’t even need a developer to help you make significant interface changes.

This is huge for split testing (also known as A/B testing). Most eCommerce niches are already cutthroat and hugely crowded. Refining your website through testing is essential for getting ahead.

With a traditional BigCommerce setup, making big design changes takes a lot of testing. There’s a chance that tweaking something on the frontend will break analytics, ordering or product management. The process becomes slow and clunky which results in fewer tests being run.

BigCommerce stores running a headless setup can run several tests each week, improving their conversion rate and pushing ahead of the competition.

Plugging in new services

Using Gatsby or NextJS as the frontend framework for your headless BigCommerce setup makes adding new services very easy.

Say your team are ready to expand their marketing efforts and want to plug a new Customer Relationship Management platform into the store. With a traditional BigCommerce build, this would take a significant amount of effort to integrate the two platforms.

On the other hand, a headless BigCommerce store is already driven by API, so you can quickly determine which events on the website should trigger actions in the CRM.

Adding your favourite CMS

There are some really awesome content management systems available these days. Contentful, Prismic, Netlify CMS, Builder.io, Storyblok, Agility CMS and even WordPress are all great options.

Plugging in a content management system makes content changes quick and easy. This is a big bonus for writing new blog articles and updating your landing pages as you add new product ranges.

Changing to a different eCommerce platform

Every so often an eCommerce platform will do something really outrageous that tips that scales and makes you want to jump ship and look for an alternative.

Neto recently made a change along these lines when they started charging a transaction fee to long-standing users who had built their businesses around the zero-fee pricing.

Unfortunately for these users, their only options are to wear the new cost or to completely rebuild their stores. Had they built their stores with a headless architecture, they could have swapped eCommerce systems without needing to start from scratch.

This doesn’t mean there’s no effort involved in swapping systems. There is some refactoring required, but it’s relatively quick and easy compared to building a new store from scratch.

Great blog

The default BigCommerce blog is a bit meh. It seems like the core development team put all their chips in product and order management and slapped the blog on as a bit of an afterthought.

As we mentioned above, going headless allows you to leverage just about any CMS you’d like to take advantage of its blogging capabilities.

Our website runs on Netlify CMS and the blog is quick and simple. If you’re familiar with markdown you can write a whole article without needing to jump onto the WYSIWYG editor to style the content. Other popular content management systems like Contentful, Strapi, and Sanity offer highly customisable and beautifully styled blogged experiences.

Another commonly used third-party blogging solution is DropInBlog which allows you to add a fully functioning blog to the BigCommerce store with just a few lines of code.

Since the front end of your website can be designed and implemented however your design team sees fit, you can offer readers a seamless reading experience. Blog article user experience is something that often doesn't get a lot of attention but can make a huge difference to your website's bounce rate.

Improved performance

This is arguably the most important benefit of going headless. A lot of store owners overlook the performance of their site.

For any monolithic site, as the range of products and orders grows, the performance of the site tends to slow down. As performance decreases, so does the user’s experience and eventually the conversion rate.

Sites like JB Hi-Fi, Superdry Australia, Skullcandy, and Koala spends hundreds of thousands (if not millions) of dollars each year optimising their stores to achieve the best experience for users. And they make this money back in magnitudes of what they invest.

With Google’s June 2021 “User Experience” algorithm update rolling out at the moment, performance is only going to become more important to a store’s long term viability.

A decoupled headless architecture separates the storefront from where the data and heavy queries live. When a thousand new visitors suddenly appear from a viral Reddit post, your store’s performance isn’t going to tank.

Combining your headless setup with Gatsby or NextJS allows the site’s content to be pre-rendered into static assets that are served through a content delivery network rather than interacting with a server. This significantly speeds up the site’s load time.

Increased conversion rate

This benefit is a bit anecdotal because the evidence comes second-hand from the Gatsby guys. During a recent webinar where they discussed the benefits of combing Gatsby and Shopify, they mentioned that they’ve seen no less than a 30% increase in conversion from stores moving to a headless architecture.

While they don’t dive deeper into how this was achieved, it’s probably safe to assume that it’s a combination of a customised interface and a much faster loading website.

Keep all the great tools of BigCommerce

This point can get lost when you’re thinking about adding new technologies and building crazy, interactive interfaces.

But going headless doesn’t mean you’re running a watered-down version of BigCommerce. You keep the best parts of product and order management, payment processing and reporting.

There are some features that won’t work. Analytics, for example, won't be connected to the right frontend so they won’t tell you much. Luckily, there are a ton of great analytics platforms like Google Analytics or Segment.

Out of the box PWA functionality

If your BigCommerce store is set up with Gatsby or NextJS, then your site has access to progressive web application features out of the box. Adding push notifications, saving your store as a bookmark on the home screen, and working offline are a few great examples.

Depending on what you’re selling, you’ll probably see half of your users visiting your store from their mobile device. Providing them with a few really nice PWA features can make a huge difference to the user experience.

Safe and secure

Going headless also improves your site’s security. Pre-rendering assets and removing the coupled communication with the database reduces the store’s overall attack surface.

The APIs that are used to provide content to a headless BigCommerce site is mostly read-only.

BigCommerce is still responsible for payment processing and managing user’s data. This is all locked away behind their enterprise-grade security infrastructure, Payment Card Industry Data Security Standards, and strict account security practices.

Disadvantages of headless BigCommerce

My agency, Clean Commit, builds headless eCommerce stores. It’s our speciality and if you didn’t notice, we have a lot of good things to say about it. But it’s not perfect. There’s one fairly inconvenient compromise in the user’s experience.

Here’s a summary of the disadvantages of going headless:

Checkout uses BigCommerce domain

This is arguably the biggest problem with headless eCommerce at the moment. The shopping experience happens on your shop’s domain but the checkout process happens on the BigCommerce domain.

Sending user credentials and authentication across separate domains is a no-no in the internet security world so there’s no easy way to make this happen.

This means that every user is adding their details to the order form. No matter if they’re past purchasers, or even if they’re actively logged into your store. They will still need to go through the full checkout process of adding their name, email, address and credit card details.

By default, the BigCommerce checkout will prompt you to log in. If you follow this prompt, you’ll be taken off to the default WooCommerce website, which is what we’ve aimed to replace with the headless frontend.

This disconnection between the frontend store and the checkout can affect the experience of repeat customers, especially if they’re frequently purchasing from your store.

If you want to see what this looks like, you can check out this test store.

Developer and designer help required

Headless BigCommerce setups aren’t suited to small, experimental, or low budget stores. Realistically, a web designer and developer need to be involved in building the website.

If you’re trying to bootstrap your first store but need to pay a designer and developer, and then wait for them to build the store, it’s going to be the brakes on your project.

High initial costs

This point follows from needing a designer and developer to help build your store. There are high setup costs involved.

There’s a lot of work required in setting up a headless BigCommerce store. For an average site, the design will take around 70 hours, and development will take up to 250 hours. Regardless of what rate your designer and developer are charging, this is going to add up to a fairly sizable invoice.

The bottom line here is that going headless is a growth play. It’s a big initial investment that pays healthy dividends over time.

More systems to manage

Going headless adds more systems that you need to manage to keep your website running. Rather than simply jumping into BigCommerce to change content, add new products, and check your analytics, you’ll be doing these activities on three separate platforms.

This isn’t a huge downside if you’re comfortable with web technologies because you’re already used to using countless platforms in your day to day activities. However, if you’re a fan of keeping things simple and consolidated then you’ll need to get used to jumping between different platforms.

Need a 3rd party analytics platform

Adding a custom frontend to your store breaks the connection with BigCommerce’s analytics. Running a store without analytics is impractical. There are hundreds of signals you need to keep track of and that helps you make business decisions.

To get this functionality working again you’ll need to supplement your store with an analytics platform like Google Analytics or Segment. There will be some further configuration to get these platforms up and running.

Plugins need to be rebuilt

Any plugin that has code running on both the backend and frontend will need some modification. If the plugin doesn’t provide a mature API then it may not be possible to get it working.

Luckily, most of the popular plugins like stamp.io, AfterShip and Yotpo have decent APIs that can be used to leverage their functionality. But there’s still a decent chunk of custom development work required to rebuild the plugins.

This adds time and money. Two of the most important factors new business owners struggle to manage.

Wrapping up

There’s no silver bullet in the eCommerce world. At some point, your store will need to make a compromise to achieve a different goal.

In our opinion, the compromise shouldn’t be performance or conversion rate. These two factors alone can make your store rise above the competition, even if you’re selling exactly the same thing at the same price.

This argument isn’t black and white. New stores with low budgets won’t be affected by the performance issues of an unoptimised site like bigger stores will. So it’s okay to bootstrap the technology piece until there’s some money available to upgrade.

For established stores that are looking to grow, it’s hard to argue against going headless with BigCommerce. Improving conversion rate, giving Google a reason to send more traffic, and providing users a nicer shopping experience are all very convincing arguments.

Of course, there is the glaring problem of repeat purchases being an unintuitive hassle. But even taking this into account, we’d argue that a headless Shopify store will outperform a traditional site 99% of the time.

But you didn't answer my question!

Moving to a headless setup has a ton of variables, especially if your existing store is well established. It helps to have a chat with a team that has experience building headless eCommerce stores. On that note, you can check out our last headless build here.

If you have more questions and want to know things like expected timeframes, detailed pricing, technical limitations, or anything in between, reach out to us using this form and we'll get back to you in 24 hours (or usually much quicker).

We're hiring

If you're a frontend developer or have a technical friend that's looking to join a relaxed, fully remote workplace where we encourage part-time hours and a flexible lifestyle, then let them know we're expanding our team!