A Developer’s Guide to Headless E-Commerce
This post has been a long time in the making.
The hours of experimentation with dozens of headless CMS & frontend frameworks on our blog are finally paying off.
Thanks to these, we’re offering you our developer’s guide to headless e-commerce.
We’ve been proponents of a decoupled approach to development and the JAMstack for a while now. More and more developers are adopting it as well. Others haven’t jumped the fence yet and are simply curious about it.
Either way, I wanted to craft this piece to help developers find their path in a “headless” environment, with a focus on e-commerce, because.. well, that’s what we do!
This post will answer the following questions:
- 1. What’s headless e-commerce?
- 2. What are its benefits vs the traditional approach?
- 3. Which headless CMS pick to store your e-commerce data?
- 4. Which frontend should you use for your headless e-commerce’s storefront?
- 5. What’s important to consider when choosing a headless stack?
Here’s hoping that, in the end, you’ll have everything you need to craft a smooth, modern e-commerce experience.
Let’s do it!
1. What is headless e-commerce?
You may have heard this “headless” term thrown around without totally grasping its meaning.
First off: how is a headless (or decoupled) CMS different from a traditional one?
Unlike the holistic, monolithic approach of traditional platforms (WordPress, Shopify, etc.), decoupled solutions imply a clear separation between backend and frontend. Chopping its head right off. Thus, “headless”:
So, what does it mean for e-commerce? A welcome separation of concerns: specific tools to answer specific needs, instead of one big piece of software trying to do everything.
You get to use a CMS for what it’s really good at — product management and administrative tasks in the backend. Then, everything else is up to you, from frontend (design, UX) to e-commerce logic and any other services you may need. And don’t worry, there are loads of great tools to enable these, as we’ll see later on.
1.1 Traditional vs. headless e-commerce platforms
A quick comparison is the best way to understand these two paradigms’ differences.
Let’s put side-to-side two e-commerce setups.
In the left corner, we have Magento, one the biggest e-commerce solutions out there, representing the traditional approach.
In the right corner, we have a headless setup composed of Sanity, Vue.js, and Snipcart (picked this one completely at random).
→ Magento’s monolithic way of development means that it will handle 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 you to do. Magento is a powerful tool — no debate here — providing merchants a complete, open-source e-commerce experience.
→ On the other hand, here’s what your headless e-commerce setup will look like. First, we have Sanity, a fully customizable headless CMS. The CMS’ main job is to manage our products along with other backend tasks (roles, permissions, blog post creation, etc). Since it’s completely detached from any frontend, YOU choose what will handle it. In this case, it’s Vue.js, the progressive JavaScript framework. It’ll allow you to start from scratch when crafting an authentic look and feel for your store. Finally, some e-commerce logic features like the shopping cart and store management are offloaded to Snipcart, our e-commerce solution for developers.
This last part is important “for developers”. Why? Because they are the ones that may feel more limited by the first scenario and find more benefits & fun in the second.
2. Benefits of the headless e-commerce approach
Now that we have our definitions straight, let’s see why the headless path is better than 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 huge, 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 main promises of the JAMstack. But in reality, the JAMstack’s sexiest promise is this: a deliberate, creative, and strategic development experience for modern developers.
3. Which headless CMS pick to manage your store’s backend?
Suggesting one ultimate headless CMS would be great. But the truth is there are plenty of solutions out there, with new ones popping out every other month.
In the last 2 years, our team has tried all types of them for headless e-commerce. Open-source, hosted, and even monolithic CMS like WordPress used as headless. We read pages upon pages of documentation, and coded a whole bunch of demos.
3.1 List of headless CMS we tried (tutorials, live demos, and code repos available)
All of the CMSs listed below have their pros and cons, so make sure to have a thoughtful reflexion before choosing the one. The annexed tutorials should be helpful though!
Note: The following entries ALL contain detailed instructions on how to integrate Snipcart for headless e-commerce.
Open source headless CMS
Cockpit — self hosted, open source
Tuts: Bundle Cockpit CMS & Nuxt.js in a full JAMstack
Tuts frontend: Nuxt.js
Directus — self hosted, open source AND hosted, paid (19–99$/month)
Tuts: An Introduction to API-First CMS with Directus’ Open Source, Headless CMS
Tuts frontend: Metalsmith SSG / Vue.js
Hosted headless CMS
Contentstack — hosted, paid (3500$/month)
Tuts: Contentstack Tutorial: E-Commerce Integration with Headless CMS
Tuts frontend: JS / Node.js
ButterCMS — hosted, paid (0–166$/month)
Tuts: Build Vue.js E-Commerce on Top of Headless ButterCMS [Demo]
Tuts frontend: Vue.js
Sanity — hosted, paid (0–990$/month)
Tuts: Build an Angular E-Commerce App on Top of Sanity’s Headless CMS
Tuts frontend: Angular
DatoCMS — hosted, paid (0–145$/month)
Tuts: Creating a static e-commerce website with Snipcart, GatsbyJS and DatoCMS
Tuts frontend: Gatsby.js
Prismic — hosted, paid (0–500$/month)
Tuts: Sample E-Commerce Website with API-first CMS Prismic.io, Node.js, & Snipcart
Tuts frontend: JS / Node.js
GraphCMS — hosted, paid (0–349$/month)
Tuts: A GraphQL & Node.js Express Tutorial: Powerful E-Commerce with GraphCMS
Tuts frontend: JS / Node.js
Contentful — hosted, paid (0–879$/month)
Tuts: Dynamic Product Management in a Static E-Commerce Workflow with Contentful
Tuts frontend: Middleman SSG
Coupled CMS used as headless CMS
Grav headless — self-hosted, open source
Tuts: Grav as Headless CMS Tied to Gatsby with GraphQL Schema
Tuts frontend: Gatsby.js
Drupal headless — self-hosted, open source
Case study: Patrick Roger’s Headless E-Commerce with Drupal & Angular Tuts: Drupal Headless Architecture with JS Framework [Live Demo]
Tuts frontend: Inferno.js
WordPress headless — self-hosted, open source
Tuts: Strapping React.js on a WordPress Backend: WP REST API Example
Tuts frontend: React
To find other headless CMS open or closed source, head over to headlesscms.org. If you’d like us to cover one CMS in particular, or show you how to integrate Snipcart with it, either give us a shout on Twitter or drop a comment at the end of this post.
3.2 Thanks for these headless e-commerce tutorials. But what if I don’t want to use Snipcart?
No worries, friend!
Here’s a list of e-commerce solutions and approaches we recommend developers check out (mostly API-driven software that you can add to existing platforms):
- Front-Commerce
- Commerce.js
- Moltin
- Stripe checkout
- Foxy.io
- Vue Storefront — This one is quite different as it provides a Vue.js-powered frontend for existing e-commerce solution’s backend (Magento2, Magento1, Pimcore).
4. Which frontend should you use for your headless e-commerce’s storefront?
Having so many different specialized tools is part of the beauty of modern development. Plus, we’ve done the job of trying many of them for you!
So:
The good ol’ way
- HTML/CSS/vanilla JS
Frameworks
- React
- Vue.js — Lightweight, progressive & awesome. I won’t hide our preference for this one.
- Angular
- Inferno.js
- Nuxt.js
- Next.js
Static site generators
- Jekyll — Easy deployment with Github.
- Hugo — Crazy fast SSG!
- Gatsby — One of our team’s favorites. Especially for PWAs!
- Spike
- Wyam
- VuePress
Once again you can find many other static site generators on the StaticGen website. To choose the right one for your specific needs, read this.
5. Important considerations for headless e-commerce
Remember when I said that a thoughtful reflexion was of the utmost importance? Here’s what developers should keep in mind when choosing a headless e-commerce stack.
- How much e-commerce logic are you or your clients willing to offload to a third party? How much time and money will you save doing so?
All of it? Don’t even bother with headless CMS, use Shopify/Magento.
Only the frontend store design? Use something like Vue Storefront or Front Commerce (a Storefront alternative for React).
Only the cart and checkout? Use something like Snipcart, Foxy.io, Commerce.js, or Stripe checkout.
Most e-commerce back-office “operations” (discounts, abandoned carts, taxes, shipping, etc.)? Use something like Snipcart/Foxy.io.
None? Let’s hope your client has a big budget. Stop reading this and get coding!
- What are the content/store management needs of your clients/merchants? Does the headless CMS (or headless traditional CMS/e-comm. 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? Make sure your frontend is easy to index, optimize and crawl. Consider pre-rendering and server-side rendering if using JS frameworks.
- What’s their budget? Who’s going to work on their technical project after you? Are the tools you’re choosing going to scale well and be easily used by other developers?
Take the time to evaluate the many possibilities presented in this post.
Once you’ve answered key questions, you should be good to go and start your headless e-commerce project. If you’ve only worked with traditional e-commerce platforms up to now, it might look scary, but trust us, in the long run, you’ll find that the freedom and creativity is worth it.
As for your clients? Here’s how to sell the JAMstack and headless e-commerce to non-technical merchants.
Of course, now we want to hear from you. What is your go-to headless e-commerce setup? What have we left out? You think traditional e-commerce is still the best way to go? Let’s start the discussion in the comment section!
If you’ve enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!
I originally published this on the Snipcart blog and shared it in our newsletter.
