Headless eCommerce: A Developer’s Guide

Modern eCommerce is all about speed and delivering the best user experience possible.

To achieve these results, a lot of solutions exist, but Jamstack or headless commerce is most likely the best option. 

In this post, we’ll unpack the headless eCommerce architecture and contrast it with the traditional approach.

My goal is to help you determine whether you should use headless commerce or not as a developer in 2022, and choose your stack if you do.

As you’ll see, “Should I use headless eCommerce or not?” is the wrong question, the right one is:

“What are my business and technical requirements for this eCommerce project, and which solution answers them best?”

Keep reading to find out.

What is headless eCommerce?

Headless commerce is an architecture in which the frontend (storefront) & backend (eCommerce functionalities) are decoupled. Your backend system can be plugged into the frontend of your choice. They’re independent and can be changed without impacting each other. It enables developers to use the technology stack of their choice.

The custom programming needed to produce and build a separate frontend and backend is more complex and requires more time. But the extra effort is rewarded by better performance and more flexibility. This can be especially time-consuming for larger companies that have accumulated legacy code throughout the years.

Many people refer to headless commerce as an enterprise-only solution, however, it’s important not to “gate” it as is. Headless commerce is accessible to companies of all sizes with useful resources to get started quickly with the decoupled approach.

The term headless can lead to confusion since it implies that your site won’t have a front-facing UI (product views, shopping cart, and checkout experience). When we say “headless eCommerce,” we really mean:

Separating product and order management from any customer-facing frontend.

Headless is all about focusing on fast frontends and making eCommerce data independent and portable.

An ambitious headless eCommerce project could be pushing product data anywhere: social, mobile, IoT, POS, smart screens, etc. Decoupling your key eCommerce data from a single frontend touchpoint allows you to display it on multiple frontend touchpoints. Cue the omnichannel concept.

Headless vs. Traditional eCommerce

Flexibility and adaptability are the most significant advantage of the headless architecture. Traditional eCommerce platforms are built as all-in-one solutions. Everything you do from the backend (product & order management, customer accounts, etc.) to frontend features (store templating, UX, etc.) is dictated by what the software allows. It can be a complete tool for many merchants with a low barrier to entry. Headless solutions, on the other hand, provide you with complete flexibility and adaptability over any functionalities you need.

Traditional eCommerce

This monolithic architecture comes with drawbacks. For one, you don’t have the freedom to choose the solutions and tools you want to use. It also means that you’re limited to the functionalities that the platform you are using offers, and the extra weight of unnecessary features. Customization of your shopping experience is also limited. Since everything is managed within one platform, personalizing the UX and UI might not be easy.

Technological updates are also limited since it all depends on how fast the platform is adopting and integrating advancements. Since the backend and frontend are tightly coupled, as the app gets bigger, simple changes become more complex.

Headless eCommerce

Headless architecture decouples the frontend and backend of eCommerce sites enabling the developers' full freedom over the tools to use and the way to use them. Customization is also easier to achieve since the access to the front-facing part of the store is decoupled from the backend, enabling more flexibility over the way the store is presented.

Since all the parts of the store aren’t tightly coupled, updating and interchanging them can be done without affecting the other part of the application. Performance is superior most often using headless eCommerce since it doesn’t come with the heaviness and cluttering of unnecessary features that traditional solutions have.

What are the benefits of headless eCommerce?

The main benefit of headless eCommerce is speed since the frontend is loaded independently form the backend and both offer more control over web performance.

Keep reading to learn more about the four main benefits of headless.

1. High degree of customization & flexibility for developers

With headless, you can create custom experiences to match your brand. Is it possible to customize your Shopify/Magento/BigCommerce store? Yes–but you’ll never get the same freedom to build efficient UX that modern frontend frameworks offer. Not so great if you want your store to stand out in this dense jungle.

2. Portable backends

Headless projects have no dependence on massive, restricting infrastructures. This allows you to stay competitive and up-to-date with your frontend without being locked inside turnkey or coupled solutions.

3. Better multi-device/platform eCommerce experience

Mobile, desktop apps, IoT, web, name it. Using a headless content management system allows you to pick the best frontend tooling for every platform/device. Retailers can adapt and scale their business much more easily with a backend that can output whatever they want, wherever they want.

4. Jamstack-friendly

Faster, more secure, and cheaper ongoing cost websites & apps are the central promises of the Jamstack and therefore headless commerce. But in reality, its sexiest offering is a conscious, creative, and strategic development experience for modern developers.

Ecommerce in 2022: What You Need to Know

With the continued growth of eCommerce stores, online sales, and evolving customer’s needs, the platforms and technology need to be flexible and evolve fast.

One advantage of headless is that this flexibility is built-in into the ecosystem.

You’ll find below the full spectrum of features and platforms types for 2022 and beyond.

Ecommerce solutions feature sets

There are five main types of feature sets when it comes to solutions. I’ve listed them from general to specific. Further down, I’ll map all feature sets to their specific types of platforms.

I’ve left out “payment processing” on purpose, as it comes down to mostly the same thing with all options.

Types of eCommerce solutions in 2022

Let’s explore what your main options are here. I’ll also throw in some headless examples.

Traditional eCommerce platforms

The Monolith (all-in-one)

→ All-in-one, turnkey solutions to build and run online stores.

• Content management

• Product management

• Store management

• Cart & checkout experience

• Website design

Your grandma could (probably) spin up a store with these platforms. And I mean that as a compliment to both the tools and your grandma. They’re very quick to get started but somewhat limited when it comes to customization or fine-tuning. They often come with a gazillion ready-made integrations, which is nice.

The plugins

→ eCommerce plugin to enable sales on existing sites. Adds back-office for store management.

• Product management in the main platform

• Store management in the main platform

• Cart & checkout

If you’re a big WordPress fan, the first example might be all you need. Simple + “free” (paid addons). Or you could go with a n API-first approach and use graphQL API calls to use WordPress as a headless CMS.

Headless eCommerce platforms

The Add-On

→ Cart and checkout layer to enable sales on existing sites. Includes back-office for store management.

• Product management

• Store management

• Cart & checkout experience

I’ve added a headless CMS to the stack examples. Useful if you have eCommerce managers who are not coders working on the site.

FWIW, Snipcart and others are also often used in coupled sites. Say a classic Craft CMS site, for instance.

The Storefront

→ Frontend-centric tooling to design fast & performant storefronts. Often PWA-centric.

• Cart & checkout experience

• Website design

These tools focus on the whole frontend, customer-facing part of your eCommerce projects. If you already have a complete Shopify setup, but your storefront s*cks when it comes to web performance you might consider hooking it up to one of these bad boys.

The API

→ Headless commerce API building blocks to create custom online stores. More code involved, more data portability.

• Product management

• Order/customer management

These are the more developer-first solutions. According to our initial definitions, they enable more textbook “headless eCommerce,” according to our initial definitions. Let it be known that many of them offer pre-made “heads” in the forms of starters and whatnot.

The Custom

→ For adventurous developers with an unlimited budget. You’re building everything.

• N/A

I can’t imagine the freaking headaches you’re going to go through, building all of this on your own. But more power to you, you crazy artisan of the web.

We’ve created a small web app to filter modern eCommerce solutions by type and features. It’s available here:

→ Headless & Coupled eCommerce Solutions

It’s an agnostic filtering system. There’s no hierarchy in the tiles - order shuffles at every page load. Please tell me in the comments or via the repo if you feel like it could be improved.

How to choose a headless eCommerce stack?

Here’s what developers should keep in mind when choosing a decoupled eCommerce stack.

• Which touchpoints do you really need to sell on?

  • Selling on many customer touchpoints (IoT, voice, smarts screens, mobile native, social, chat) is very cool. It can add a load of complexity to your project, but some modern API solutions will help you manage it just fine.

  • However, you need to think about your audience and your business more than about technology here. How familiar and active are they on a given channel?

• How many eCommerce parts are you willing to offload to a third party?

  • AKA “what I DON’T want to code.”

  • All of it? Don’t even bother with headless—use Shopify, coupled.

  • Only the frontend store design? Use something like Vue Storefront or Front Commerce.

  • Only the cart and checkout? Use something like Snipcart, Commerce.js, or Stripe Checkout.

  • Most eCommerce back-office “operations”? Add-ons and APIs like Snipcart and Commerce Layer can take care of that.

  • None? Stop reading this and get coding! Let’s hope your client has a big budget.

• How much time and money will you save offloading logic to X solution?

  • Of course, you should consider the solution’s price. However, remember that a custom eCommerce store costs zero dollars in solution but thousands in development. Find the right balance for your budget.

• What are the content/store management needs?

  • Does the headless CMS or eCommerce solution picked answer them?

  • Think roles, permissions, blog post creation/editing, manual SEO optimization, product management, and product variants.

• How important is SEO for the merchant?

  • Make sure your frontend is easy to index, optimize, and crawl. Consider pre-rendering and server-side rendering if using JavaScript frameworks.

• Who’s going to work on the project after you?

  • Are the tools you’re choosing going to scale well and be easily used by other developers?

  • How risky or well-documented is this tech?

Once you’ve done so, you should be good to go and start your project. If you’ve only worked with traditional eCommerce platforms up until now, it might look scary, but in the long run, you’ll find that the freedom is worth it.

We discuss picking tech stacks further in this post.

A quick word on Snipcart

Snipcart is a lean and performant eCommerce solution for developers.

It provides a small part of the head: cart and checkout. They live in your frontend; cart via JavaScript, and products in the HTML. The rest of your frontend? Up to you.

You can even use it on traditional CMS like WordPress if you want.

First, you integrate Snipcart into your site. Next, you use the dashboard to manage orders, shipping, taxes, discounts, abandoned carts, inventory, emails, multi-currency, etc.

We offer APIs & webhooks to extend functionality.

More details in this ⚡️ talk to find out if Snipcart is a good fit.

Closing thoughts

The key takeaway here?

Headless eCommerce lets you separate concerns better. It increases your responsibility in that it forces you to choose the right tools to bundle together.

It can make your eCommerce data portable and thus your online store more future-proof.

Very similar to the Jamstack.

If you’re confused as to which solution you should pick, reach out. I’m on Twitter, and my email is francois@snipcart.com. We’ll chat, and I promise not to sell you on Snipcart if I think it isn’t a great fit for your project.

Here’s hoping this guide helped you in one way or another.

Have you tried headless commerce? Let us know in the comments.