The Guide For How to Go Headless on BigCommerce (+ Stunning Examples)

August 30, 2022

Rhys Williams

620c248cc73c0043329f14bd Going Headless With BigCommerce Everything You Need to Know bigcommerce headless

BigCommerce is an attractive option for many brands looking for enhanced ecommerce functionality in a user-friendly working environment.

And if you already have a BigCommerce store, it’s highly likely you want to stick with it.

Replatforming can be a big undertaking at the best of times. With the great backend services you already get with BigCommerce, you know what they say—if it ain’t broke, don’t fix it!

But as your brand evolves, has more complex content management needs, and attracts new customers with higher expectations of a digital experience, you’ll likely start to see the need for a more advanced, headless solution.

The question is: how do you deliver richer frontend shopping experiences without ripping out your entire backend BigCommerce ecommerce setup?

Is there an inevitable, long period of disruption while you ramp up your developer team and work out how to reconfigure your store?

It doesn’t have to be that way when you go with a BigCommerce headless commerce solution (that was a mouthful)!

The journey toward creating breathtaking, super fast customer experiences can be straightforward and possibly even enjoyable.

In this post, we’ll cover:

#cta-mini-fe#Find out if your store is a good fit for headless commerce.Take the quiz

 

What is headless commerce all about?

If you’re not already familiar with the finer points of headless commerce as a concept, check out our jargon-free explainer on the topic.

In short, headless commerce is when you separate the backend ecommerce functions of your store from the customer-facing frontend experience.

Then, you connect it all up with fancy application programming interfaces (APIs) to get the right data and services to customers as they need them.

There’s been much hype for headless recently, and with good reason.

It allows brands to get the best of both worlds—super quick loading sites and great user experiences with no tradeoffs.

If you’ve gotten this far, you’ve likely noticed a few signs that it’s time to go headless with your BigCommerce store.

If so, you’re in the right place. Let’s dig into the why of it all first.

Why should you take your BigCommerce store headless?

BigCommerce’s out-of-the-box solution is great if you’re just starting out.

It comes as an easy-to-understand, simple-to-use package and you can get up and running with good ecommerce services in a short time.

But, you aren’t just starting out.

You’re scaling your brand and all the parts that go with that upward drive—increased traffic, multichannel marketing efforts, the desire for more immersive shopping experiences, etc.

These growing pressures have you wanting more than what BigCommerce delivers out of the box.

bigcommerce headless diagram bigcommerce headless
Image: BigCommerce

Luckily, you can keep what you’ve come to love about BigCommerce—its reliable and scalable backend ecommerce functionality—and connect it to a frontend that’s more flexible, performant, and customizable.

“Headless puts brands in the driver’s seat, allowing them to add complex functionality, sub-brands, and multi-region with ease. Plus, with a platform agnostic headless approach, they are in a better position to negotiate terms with their ecommerce provider and re-platform if it is no longer serving their needs.”

– Peter Ross at Cygnet Digital

BigCommerce recognizes the need for brands to scale their operations and has built its platform in a way that makes it compatible with a range of enterprise-level ecommerce components.

Taking the headless approach with BigCommerce can allow you to assemble all the best pieces together to create an ecommerce store that’s worthy of envy.

“There are many reasons why a brand would choose to take their BigCommerce store headless. One of the most common is a headless site can be a lot faster than a non-headless site, which is really useful for SEO and user experience.

An uber-fast site is something that can really make your business stand out in a competitive market.

On top of this, headless sites also offer an incredible level of flexibility by removing the constraints of a site’s backend. This allows merchants to have greater control over customisation and develop tailored customer journeys.”

– Dan Arrowsmith, Front-End Developer at Underwaterpistol

Pros and cons of headless BigCommerce

If you are looking into going headless, you already know some of the big benefits more generally. We’ll focus on the advantages and disadvantages of a BigCommerce headless build here.

Advantages of going headless with BigCommerce

There’s a lot to love about taking your BigCommerce store headless. Let’s look at the top advantages of going this route.

Comprehensive API coverage

92% of the BigCommerce platform is accessible via APIs, meaning you can use (almost) any of their ecommerce services in your headless environment.

Providing both REST and GraphQL API endpoints, BigCommerce is great for developing your unique headless storefront.

Their APIs are also fast, with the ability to process up to 400 calls a second.

Pick your own third-party content management system (CMS)

BigCommerce provides a CMS as standard in their ecommerce bundle, but many brands find that a third-party CMS is more suited to their needs.

Going headless means you can use the CMS of your choice alongside BigCommerce’s ecommerce services.

Some popular choices are WordPress, Prismic, Contentful, and Contentstack. Or you can choose a frontend-as-a-service solution (like Shogun Frontend) that bundles a CMS with middleware and a best-in-class CDN.

Use third-party backend services that fit your needs

As well as freeing up your CMS options, using BigCommerce headlessly (decoupling the back and frontend functions) allows you to use a wide range of third-party backend services like PIM, CRM, and Order Management tools.

It gives you access to greater functionality and an increased range of ecommerce services.

The breadth and depth of services you can incorporate into a headless solution, where you can compose your set-up to meet your exact requirements, far exceeds what’s possible with the standard BigCommerce offering.

Leave BigCommerce themes behind

Say goodbye to the limitations of standard BigCommerce themes for designing great customer experiences.

Instead, you get to use frameworks like React.js or Vue.js to build an incredible frontend while BigCommerce’s backend structure stays in place.

Static site generators like Gatsby can create incredibly fast sites that power phenomenal customer experiences.

With BigCommerce providing so many third-party integrations (see below), you don’t have to be a master programmer to share in their advantages and can find a user-friendly frontend environment in which to create lightning-fast static sites with innovations like progressive web apps (PWAs).

Faster site load times

By decoupling your frontend, you’re relieving it of the burden of shared processing power. There’s no more sharing of resources, which drags on performance.

If you’re also using PWAs or static sites to run your frontend store, then the difference in site speed will be incomparable.

To understand how PWAs translate to amazing speed improvements, check out our roundup of top ecommerce sites powered by PWAs.

Excellent WordPress integration

BigCommerce has put a lot of effort into integrating with sites and stores running on WordPress.

They’ve developed a BigCommerce for WordPress (BC4WP) plugin that allows you to use the features of the BigCommerce platform while keeping your WordPress site and using the WordPress CMS (more on this later).

Manage multiple storefronts and channels from one place

bigcommerce multi store bigcommerce headless
Image: BigCommerce

BigCommerce provides an all-in-one view of your inventory and stock levels across channels.

This makes it so you can monitor sales and keep up with reorders without having to manually reconcile stock against the different places you’re selling online.

Your headless build will allow you to create rich and super fast shopping experiences across the many storefronts you have.

BigCommerce’s multi-storefront capabilities make it easy to manage these distinct experiences from the dashboard.

Faster testing for better marketing optimization

With the standard BigCommerce setup, conducting tests on different customer segments can be a bit of a grueling process.

With the various parts of BigCommerce’s platform coming bound together out-of-the-box, making a change in one area can have unforeseen consequences in another.

Separating the head from the body lets you test and iterate quickly on the frontend layer without the need for backend developer input.

PWA functionality

By choosing to go headless, you can make your store into a progressive web app (PWA) which means serious speed and mobile benefits for your shoppers.

Users can save your store to their mobile home screen, get push notifications from your marketing team, and shop around with sub-second load times.

Disadvantages of going headless with BigCommerce

It isn’t all roses to go headless, but you knew this was coming. There are a few disadvantages of going the headless route on BigCommerce. Let’s take a look.

Need to manage multiple platforms

The whole point of headless commerce is that it separates out different functions, allowing them space to perform the tasks they were designed for without having to rely on other parts of the system.

This is great in general but does have the side effect of increasing the number of platforms you need to engage with to keep your store running.

With a bit of ingenuity, you should be able to keep the proliferation to a minimum, so it doesn’t need to be a big deal.

But it’s something to bear in mind when building out your tech stack.

Complicates your usual tech stack

If you’re building your own entirely custom frontend, there is potential for your tech stack to become unwieldy and impractical.

After migrating to a headless solution, you’ll have to add back all the apps and plugins you’ve gotten used to using in your BigCommerce store.

Even with BigCommerce’s high standards of third-party integration, you’ll likely need developer help to make it all work.

Some features might not work

Because you’re replacing at least part of your ecommerce solution, there’s potential for things to go wrong.

An app or plugin that has been working away in the background, quietly doing its job, might be incompatible with some of your new headless features and suddenly stop.

There are usually fixes for this or other, more compatible tools you can use, but the disruption can be real while you look for a workaround.

You must rebuild your analytics setup

When you go headless, your BigCommerce analytics will no longer work.

You’ll need to build out a brand new analytics setup to continue seeing your key metrics and measuring the growth you’ll want to achieve with headless commerce.

This isn’t all bad. By auditing your analytics, you can focus on the metrics that matter most to your brand’s success and develop a system that does even more than your original setup.

If you are building out a powerful PWA, there will be certain PWA performance metrics you’ll want to track, and this will allow you to fully understand the gains you’ll see by going headless.

BigCommerce headless checkout: A pro and a con

Some developers working with BigCommerce see the checkout feature as a disadvantage of headless BigCommerce, but there are some significant advantages alongside the drawbacks.

The big plus:

  • Having your checkout hosted by BigCommerce means they take security and PCI compliance off your hands. They build and host the checkout and take responsibility.
  • The checkout can also be embedded in your store, meaning when a customer pays for something, they stay on your site while the payment is processed.

The big drawback:

  • Even though the checkout form is embedded, it’s still BigCommerce’s form, regardless of who’s checking out. So even if you’ve logged in as a repeat customer, you’ll still need to fill in the exact same long form as a brand new customer.

According to the experts: Headless BigCommerce pros and cons

Pros include greater flexibility, enhanced customisation, more chances to embrace omnichannel, and exciting opportunities for UX design and innovation that can help boost your site’s conversion rate.

Cons include a significant initial investment to get this all up and running, a longer build time, and higher maintenance costs.”

– Leigh Holland, Business Development Manager at Underwaterpistol

Pros: Extensive and reliable APIs. Great support staff and highly competitive pricing.

Cons: Missing some nice to have features such as transactional emails for headless out of the box.”

– Peter Ross at Cygnet Digital

How to go headless with your BigCommerce store

The flexibility of BigCommerce’s headless solution means that you can access their platform in several different ways.

DIY it with BigCommerce

In addition to being able to integrate with a third-party CMS, they provide integrations with a myriad of third-party services, meaning you can select the exact service that works for you and have full control over your ecommerce solution.

If you’re using a CMS to take your store headless, this acts as your store’s frontend.

BigCommerce has developed their headless architecture in such a way so that as long as your CMS is capable of handling custom integrations, it will work.

Going this route will require a bit of technical know-how, either from an agency or your own in-house team (possibly both!), so get the lay of the land ahead of deciding to do it yourself.

Composable commerce approach

You can also design your frontend completely from scratch, picking the best-in-class of every ecommerce service and creating a totally bespoke solution.

You’ll work with a headless agency to assemble all the pieces of your headless architecture (CMS, CDN, middleware, SSR, frontend) into one connected build. You’ll have total control over your services but will need to manage each on your own.

Both the DIY and composable methods are going to require a fair amount of re-plumbing behind-the-scenes.

If your store is already up and running, the disruption might be too much, especially if you don’t have much developer experience or a strong team to support the transition.

Frontend-as-a-service (FEaaS)

shogun vs traditional headless bigcommerce headless

Another option is to use an all-in-one frontend platform to take the headaches out of going headless. Shogun Frontend provides a simple, low-code way to do it.

The all-in-one solution has been developed to meet the needs of modern commerce, using static web pages, PWA technology, and an integrated frontend approach to deliver beautiful sites with breathtaking load times and unique customer experiences.

For growing brands that need a scalable ecommerce solution without the complex development logistics of doing it from scratch, Shogun Frontend can give you the benefits of headless commerce without the convoluted technical processes.

#cta-visual-fe#<cta-title>Exceed the limits of modern ecommerce<cta-title>See how Shogun Frontend can help you take your BigCommerce store to new heights.Learn more

 

5 Examples of headless BigCommerce stores that deliver great experiences

Now that we’ve whetted your appetite with some of the essentials for going headless with BigCommerce, let’s take a look at some stores that have successfully made the move.

#cta-mini-fe#Find out if your store is a good fit for headless commerce.Take the quiz

 

Discount Electronics

discount electronics shop page bigcommerce headless

A successful BigCommerce brand for eight years and counting, Discount Electronics teamed up with Shogun agency partner oBundle to transform their site using Shogun Frontend in July 2021.

Just four months after the launch, the brand saw their ecommerce conversion rate increase by 40.6%, and they boosted revenue per user by 36.5%.

discount electronics product page bigcommerce headless

What’s more, now their site’s First Contentful Paint (FCP) is an incredible 1.2 seconds on desktop and 1.7 seconds on mobile.

Ice Cobotics

cobotics homepage bigcommerce headless

Previously, this B2B company solely used a WordPress frontend.

Now, with oBundle’s help, Shogun Frontend serves up the frontend user experience while using BigCommerce as the source of truth for all product information management.

As Andrew Riggin’s, founder of oBundle shared about the site’s checkout function:

“Because a salesperson needs to finalize Ice Cobo deals, we use the [BigCommerce] cart functionality to have visitors shop for what they want, and instead of checkout or payment, visitors fill out a form as a last step for now. The migration to a faster, easier to use frontend, has set the client up for great success in the near-term future.

cobotics product page bigcommerce headless

cobotics product page interactive bigcommerce headless

Since their launch in August 2021, the Ice Cobotics team now has an incredibly high-performing frontend and a powerful ecommerce system waiting in the wings for when they’re ready.

After taking BigCommerce headless with Shogun Frontend, Ice Cobotics recorded a 13.5% increase in sessions and a 113.1% increase in page views.

#cta-visual-fe#<cta-title>Exceed the limits of modern ecommerce<cta-title>See how Shogun Frontend can help you take your BigCommerce store to new heights.Learn more

 

Yeti Cycles

This mountain bike company designs sleek and tough machines meant to take a beating during every use.

What they are selling is firmly planted in product experience, so they need to be able to showcase what it feels like to ride their bikes on their ecommerce store.

yeti cycles product page bigcommerce headless

With a headless build, they could turn their product pages into a synthesis of detailed product information and the experience you get on the other side of purchase.

This type of rich merchandising wasn’t possible without turning to a headless frontend.

Skullcandy

One of the biggest names in personal listening accessories, Skullcandy decided to go headless with their BigCommerce store to enable unique presentations of their products.

Now, their product pages fill up the screen in a very untraditional way, seamlessly changing as variants are picked.

skullcandy product page bigcommerce headless

They understand that presentation and brand identity are everything to consumers buying earbuds and headphones.

With a headless build, they can do this in a way that was impossible with a traditional ecommerce platform.

Burrow

This DTC furniture brand makes modular products to fit the unique needs of their customers, so a modular approach for building their ecommerce store made a lot of sense.

burrow furniture collections bigcommerce headless

As a scaling brand, a headless solution enables their store to grow quickly and easily handle the increased load of new customers.

With the change, their marketing team can now make quick updates and customizations to store pages without affecting the backend.

Headless BigCommerce FAQs

Is BigCommerce headless?

The short answer is yes!

BigCommerce is a comprehensive ecommerce platform that provides a range of services and functionality.

Their robust BigCommerce headless API means it is perfectly possible—and in many cases desirable—for BigCommerce stores to go headless.

Every commerce platform is unique, and there are advantages and disadvantages to going headless with BigCommerce.

But for many people, BigCommerce provides an easy-to-use and powerful backend engine for their ecommerce site.

And it absolutely can be paired with an all-in-one Frontend Platform should you want to go headless.

What should you know before pursuing a headless BigCommerce build?

“Headless is going to cost more in the short term, but long term, it will suit the needs of the business much better. If you are using an agency, make sure they are building on modern tech such as Next.js or platforms such as Shogun. This makes vendor lock-in less of an issue down the line.”

– Peter Ross at Cygnet Digital

“Before choosing to go headless with BigCommerce, brands need to truly understand WHY they’re doing it, and why they’re doing it now. Work closely with different areas of your business to find out which challenges a headless site will solve, estimate the financial benefit of each, and work out if you can justify the initial investment.

As with anything in business, it’s all about ROI, and a headless BigCommerce site might be what transforms your brand’s fortunes.”

– Leigh Holland, Business Development Manager at Underwaterpistol

Is BigCommerce a headless CMS?

The short answer is yes!

BigCommerce offers a CMS as part of its overall ecommerce solution, and this can be taken headless, just like all the other parts of the platform.

The CMS that BigCommerce provides is pretty good, allowing you to run a blog and manage multiple channels from one pane.

Can you use a CMS of your choice?

Yes, that’s the beauty of going headless—the option to choose your favorite components.

Many brands want to go headless so they can use other, more powerful tools alongside BigCommerce’s basic offering.

This is something that BigCommerce themselves recognize, and they make it possible for you to link up your CMS of choice to their backend platform.

So whether you’re happy with the built-in BigCommerce CMS or you’re looking at a more heavy-duty third-party solution, you will be able to use either in a BigCommerce headless set-up.

As we’ve covered, BigCommerce lets you continue to work with your WordPress site and CMS, but they’ve long since expanded their integrations and are no longer a WordPress-specific headless backend.

Some of the other CMSes and experience platforms that BigCommerce partners with are:

  • BloomReach
  • Sitecore
  • Adobe Experience Manager
  • Acquia ACF
  • Drupal

Of course, you can also use an all-in-one frontend solution that includes a built-in CMS for easy content management from one place.

Does BigCommerce integrate with WordPress?

Yes, BigCommerce has spent a lot of time and effort on its WordPress integrations. If you have a WordPress site, you can definitely use it with BigCommerce.

WordPress was the first headless integration that BigCommerce turned their attention to, and they have developed a BigCommerce for WordPress (BC4WP) plugin, meaning you can continue to use WordPress CMS capabilities alongside BigCommerce headless functions.

The plugin connects BigCommerce to your store, giving you the ability to scale your ecommerce services effectively. For those that have outgrown WooCommerce, it’s a great option.

The BC4WP plugin allows you to use all the catalog and checkout features of BigCommerce, a more powerful commerce engine. You can even connect multiple WordPress sites to BigCommerce, running them as separate channels.

Import and sync all your products from your BigCommerce store into WordPress to easily manage, maintain, and update your catalog from one place.

Is WordPress a good option for a headless BigCommerce CMS?

“No. I started my career as a WordPress developer and I think it is brilliant. This being said, the majority of brands aren’t looking to add complexity (such as security concerns) to their stack when there are so many great headless CMS’s which can be externally managed for a comparable monthly cost.”

– Peter Ross at Cygnet Digital

Build a better storefront by going headless with BigCommerce

If you feel like you’ve outgrown BigCommerce’s out-of-the-box capabilities and have been exploring options for a more versatile headless solution, chances are you’ll have come to the conclusion it’s complicated, messy, and time-consuming.

The tips and pointers in this article are designed to help you through and dispel the myth that it needs to be a difficult undertaking.

If you go headless with BigCommerce—considering all your options—you can take the pain out of the process.

Soon you’ll be effortlessly crafting powerful and unforgettable experiences that will delight your customers, enhance your brand and take your ecommerce business to the next level.

 

#cta-visual-fe#<cta-title>Exceed the limits of modern ecommerce with an all-in-one Frontend Platform<cta-title>See how Shogun Frontend can help you take your BigCommerce store to new heights.Learn more

Rhys Williams

Rhys is a writer specializing in enterprise software, ecommerce, and SaaS. He describes himself as a geek and a wordsmith and relishes making complex, technical topics come to life in easy-to-understand web copy.

The latest ecomm tips sent to your inbox

share this post

You might also like