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 2021.
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?
First, what is the headless architecture?
The headless architecture in web development is the decoupling of your backend and your frontend. Your backend doesn’t have a head and can be plugged to the frontend of your choice.
Now here’s the classic definition of headless commerce:
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, experienced 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 (jump to it right now).
What does headless commerce mean?
Headless e-commerce is the decoupling of the frontend and backend of an e-commerce application. They’re independent and can be changed without impacting each other.
What are the benefits of going headless?
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 a 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. Everything you do from the backend (product & order management, customer accounts, etc.) to frontend features (store templating, mobile development, etc.) 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 2021
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 really confusing.
What can modern e-commerce solutions do for you?
There are roughly five types of feature sets 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.
Picking a website theme
Choosing its colors
Drag and dropping sections
Creating and managing a blog
Publishing some pages
Uploading and editing media (images, video)
Updating content across the site
Creating products (physical, digital, recurring)
Defining product options
Managing SKUs and inventory
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
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.
Cart & checkout experience
- Example: **Shopify** (coupled) - Example: **BigCommerce** (coupled) - Example: **Magento** (coupled) - Example: **Wix** (coupled) - Example: **SquareSpace** (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.
→ Cart and checkout layer to enable sales on existing sites. Includes back-office for store management.
Cart & checkout experience
- Example: **WooCommerce** + WordPress (coupled) - Example: **Snipcart** + Nuxt.js + Sanity (headless) - Example: **Shopify Lite** + Gatsby + Strapi (headless)
If you’re a big WordPress 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.
FWIW, Snipcart and others are also often used in coupled sites. Say a classic Craft CMS site, for instance.
→ Frontend-centric tooling to design fast & performant storefronts. Often PWA-centric.
Cart & checkout experience
- 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.
→ Headless commerce API building blocks to create custom online stores. More code involved, more data portability.
- Example: **Commerce.js** + Next.js + Sanity (headless) - Example: **Commerce Layer** + Nuxt.js + Contentful (headless) - Example: **Nacelle** + Vue.js + Strapi + Shopify Plus 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.
→ For adventurous developers with an unlimited budget. You’re building everything.
- 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:
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. Please tell me in the comments or via the repo if you feel like it could be improved.
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.
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 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!
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.
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.
How important is SEO for the merchant?
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’ll allow myself precisely 100 words to talk about us:
Snipcart is a low-footprint e-commerce solution for developers. It is made by friendly nerds in Québec City (and now Montréal).
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).
And that was a real 100 words!
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 firstname.lastname@example.org. 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.