A Developer's Guide to Headless E-Commerce

Let’s talk about modern e-commerce.

Many call it Jamstack or headless commerce. They’re umbrella terms—helpful yet confusing.

I try my best not to indulge in cynicism, so I won’t label them buzzwords.

This post will unpack these concepts. It will also contrast traditional approaches with modern ones.

My goal is to help you better navigate e-commerce as a developer in 2020.

By the end of this post, you’ll be able to make better decisions when it comes to picking an e-commerce stack.

Full disclaimer: I’m the CEO at Snipcart, an e-commerce solution for developers. I’ll talk about all platforms, including ours. If your next online store ends up being powered by Snipcart, great. If not, no biggie. We’re independent and profitable, so we have the luxury of recommending other solutions. I do it all the time. ✌️

What is headless e-commerce?

The classic definition:

Headless e-commerce is the separation between the frontend and backend of an e-commerce application.

Yet I’ve seen some pretty weird definitions on the Internet, like:

One hallmark of headless [e-commerce] is the use of APIs, experience managers, and tools such as Heroku and Mulesoft as well as the importance of IT partners.

I’m appalled at Google for ranking such un-sexy, inaccurate definitions at the top of the search results.

The adopters of headless commerce are typically bigger enterprises with larger development and IT teams along with a DIY attitude.

DIY attitude, maybe. The rest? Not necessarily.

This makes sense, as the custom programming needed to produce and build a separate front end and back end reliably can take a major investment of development hours. These businesses often have months-long development queues and ambitious creative and marketing teams that are eager to rapidly test new designs, copy, and templates on the front end.

For larger enterprises with legacy codebases, of course, this can be time-consuming. But it’s important not to “gate” headless commerce platforms for the enterprise. Resources to get started quickly with a decoupled e-commerce approach abound.

On a side note, let’s recognize that e-commerce needs a head: product views, shopping cart, checkout experience. And a good-looking one at that! When we say “headless e-commerce,” we really mean:

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

But, granted, “headless” has become an umbrella term (like Jamstack), where we try to separate concerns, focus on fast frontends, and make e-commerce data “portable.”

In other words, making sure your key e-commerce data is decoupled from a single frontend touchpoint so that it can be displayed on any frontend touchpoint. An ambitious headless e-commerce project could be pushing product data anywhere: social, mobile, IoT, POS, smart screens, etc. Cue the omnichannel concept, yadda yadda yadda.

For now, JSON seems to be the most universal format to send information over the web, regardless of the arrival point. So you’ll see a lot of it in the space.

Definitions aside, “Am I doing headless e-commerce or not?” is the wrong question.

The right question to ask:

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

For instance, maybe you won’t need to push your e-commerce data on all of these customer-facing touchpoints. A later section of this post, titled, “How to choose an e-commerce solution?” will help you answer that question.

And why go headless?

Because SPEED, my friends. Jokes aside, separating your backend from your frontend gives you control. Control over web perf, yes. But there’s more. Let's see why the headless path can be better than some traditional e-commerce routes:

• High degree of customization & flexibility for developers.

You can create custom experiences to match your brand, not generic, template-ish ones. Is it impossible to customize your Shopify/Magento/BigCommerce store? Absolutely not. But you'll never get the same freedom to build thoughtful UX as with modern frontend frameworks. And I'm guessing you want your store to stand out in this dense digital jungle, heh?

• Portable backends, data, and data structure.

No dependence on massive, restricting infrastructures. This allows you to stay competitive with your frontend without being locked inside turnkey or coupled solutions.

• Better multi-platform shopping experiences.

Mobile, desktop apps, IoT, web, name it. Using a headless CMS allows you to pick the best frontend tooling for every platform/device. Adapting and scaling your business is much easier when your backend can output whatever you want, wherever you want.

• Develop with the Jamstack.

Faster, more secure, and cheaper websites & apps are the central promises of the Jamstack. But in reality, the Jamstack’s sexiest offering is this: a deliberate, creative, and strategic development experience for modern developers.

---

Okay, so… what did people do before headless? They developed with traditional, monolithic architecture. Monoliths. Giants. All-in-one. You get it.

Here, a single solution handles everything: not only the e-commerce side but the site-building too. From backend (product & order management, customer accounts, etc.) to frontend features (store templating, mobile development, etc.), everything you do is dictated by what the software allows. It can still be a powerful tool—no debate here—providing merchants a complete, end-to-end e-commerce experience.

We’ll get into some examples a bit further down.

E-commerce in 2020

It’s a beautiful mess. There are a lot of solutions and use cases.

I’ve left out “payment processing” on purpose, as all e-commerce solutions depend on external payment gateways to do so. Yes, even Shopify.

If you’re not dwelling in this space on the regular, it can get real confusing.

What can modern e-commerce solutions do for you?

There are roughly five types of feature set when it comes to e-commerce tools. I’ve listed them from general to specific. Further down, I’ll map all feature sets to types of solutions. We built a simple web app with filters to do so.

1. Website design

   • Picking a website theme
   • Choosing its colors
   • Injecting branding
   • Drag and dropping sections
   • Customizing CSS

2. Content management

   • Creating and managing a blog
   • Publishing some pages
   • Uploading and editing media (images, video)
   • Updating content across the site

3. Product management

   • Creating products (physical, digital, recurring)
   • Defining product options
   • Managing SKUs and inventory

4. Cart & checkout

   • Adding items to cart
   • Selecting quantities and options
   • Applying discounts to orders
   • Defining order custom fields
   • Collecting billing, shipping, payment info
   • Processing orders online
   • Confirming orders and follow-ups
   • Designing cart & checkout

5. Store management

   • Managing and tracking orders
   • Analyzing and updating customers
   • Setting up shipping rates
   • Setting up tax rates
   • Creating discounts and promotions
   • Retrieving abandoned carts

What types of e-commerce solutions exist today?

I tried to put some names on “categories” of solutions. I think it helps frame them inside a project’s narrative. If you don’t like the terms, leave a comment below, or tell me about it on Twitter.

Let’s see what your main options are here. I’ll also throw in some headless e-commerce examples. If you want actionable tutorials, we have dozens.

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

  • Example: Shopify (coupled)
  • Example: BigCommerce (coupled)
  • Example: Magento (coupled)

Your grandma could 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 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

  • Example: WooCommerce + WordPress (coupled)
  • Example: Snipcart + Nuxt.js + Sanity (headless)
  • Example: Shopify buy button + Gatsby + Strapi (headless)

If you’re a big WP fan, the first example might be all you need. Simple + “free” (paid addons). Resisting the urge to comment on WordPress.

I’ve added a headless CMS to the stack examples for the other two. Useful if you have e-commerce managers who are not coders working on the site. Snipcart has a standalone JS SDK coming soon that could earn it a dual spot in the “API” category. Will update the post later I guess, hehe (I hope our product owner is reading this).

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

  • Example: Shogun + BigCommerce backend (headless)
  • Example: Vue Storefront + Shopify backend (headless)
  • Example: Front Commerce + Magento backend (headless)

These fine folks have decided to focus on the whole frontend, customer-facing part of your e-commerce projects. If, say, you already have a complete Shopify setup but your storefront s*cks when it comes to web perf, well, 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

  • Example: Commerce.js + Next.js + Sanity (headless)
  • Example: Commerce Layer + Nuxt.js + Contentful (headless)
  • Example: Nacelle + Vue.js + Strapi + Shopify backend (headless)

These are the more developer-first solutions. They enable more textbook “headless e-commerce,” according to our initial definitions. Let it be known that many of them offer pre-made “heads” in the forms of starters and whatnot. Also, someone in Australia really wanted me to say Saleor is a cool product in this category too.

The Custom

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

• N/A

  • Example: Next.js e-commerce app connected to Stripe.

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.

There’s an app for [headless & coupled e-commerce solutions]

My friend Max and I created a small web app to filter modern e-commerce solutions by type and features. It’s available here:

→ https://headlesscommerce.netlify.app/

If you’re interested, here is how we built it, using Vue 3 and Tailwind CSS.

Note: you can submit edits or other solutions by cloning the repo and opening a PR.

I kept logos out of it on purpose. I want this to be an agnostic filtering system. There’s no hierarchy in the tiles - order shuffles at every page load. If you feel like it could be improved, please tell me in the comments or via the repo.

I have a raw file where I try to keep track of pricing for different sales levels per solution. If that’s a factor you’d like to see presented in the app, again, let me know. We’ll consider adding it!

How to choose a modern e-commerce solution?

With a thoughtful reflection. Sure, execution is critical. Still, a bit of planning will go a long way here.

Here's what developers should keep in mind when choosing a headless (or not) e-commerce stack.

1. 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?

2. How many e-commerce 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 e-commerce back-office "operations"? Add-ons and APIs like Snipcart and Commerce Layer can take care of that.
   • None? Let's hope your client has a big budget. Stop reading this and get coding!

3. 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 e-commerce store costs zero dollars in solution, but thousands in development. Find the right balance for your budget.

4. What are the content/store management needs?

   • Does the headless CMS or e-commerce solution picked answer them?
     • Think roles, permissions, blog post creation/editing, manual SEO optimization, product management, product variants.

5. 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 JS frameworks.

6. 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?

It’s okay to take the time needed to answer these questions.

Once you've done so, you should be good to go and start your headless (or not) e-commerce project. If you've only worked with traditional e-commerce platforms up until now, it might look scary, but in the long run, you'll find that the freedom is worth it.

As for your clients? Here's how to sell the Jamstack and headless e-commerce to non-technical merchants.

We also discuss picking tech stacks further in this post.

100 words on Snipcart

I will allow myself precisely 100 words to talk about us:

Snipcart is a low-footprint e-commerce solution for developers. It is made by a friendly bunch of (8) nerds in Québec City.

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

First, you integrate Snipcart into your site. Next, you hand it off to merchants via a hosted dashboard to manage: orders, shipping, taxes, discounts, abandoned carts, inventory, emails, multi-currency, etc.

We offer APIs & webhooks to extend functionality.

Details in this ⚡️ talk (when/when NOT to use Snipcart). /100

Closing thoughts

The key takeaway here?

Headless e-commerce 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 e-commerce data portable and thus your online store more future-proof.

Very similar to the Jamstack.

I will reiterate the invitation:

If you’re confused as to which solution you should pick, reach out. I’m on Twitter, and my email is [e-mail]. 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.

If it did, could you please share it on Twitter? I’m told that’s where the cool kids hang out these days.

🙇‍♂️