Digitacy is an avenue for ardent individuals to educate and engage in discussions related to digital marketing, eCommerce, analytics and design.

Headless Ecommerce - The Definitive Guide

Faisal Mumtaz

The future of eCommerce is here, and it is headless. It solves some of the most fundamental issues of eCommerce development and delivers performance that is unheard of.

Enabling a better user experience requires rigorous testing, but regular deployments in a monolithic solution are a pain to execute. Headless ecommerce architecture removes the shackles from frontend developers, sets them free and allows them to dictate the user experience. They no longer have to worry about modifying databases or coordinate with backend teams thereby reducing deployment times.

It also allows marketing teams to quickly deploy A/B tests and see what's driving users down the funnel and what is not.

When you put your developers and marketers on the frontseat and let them drive user experiences, amazing things start to happen

What does headless ecommerce mean?

To put it simply, it is the "decoupling" or separation of the presentation layer, i.e., the frontend from the commerce/functional layer, i.e., the backend. As a result, you end up with two independent systems talking to each other via APIs as opposed to the traditional monolithic eCommerce platforms such as Shopify, Magento, Hybris, etc. wherein both layers are tightly connected and typically run as a single system.

By decoupling the face from the body, developers get absolute independence to customize the UI and not depend on platform specific templates which can, often times, be quite limiting. It also makes the development process a lot more streamlined, since both the frontend and backend are being built independently and therefore allows teams to work in parallel on the two code bases.

The reduction in page load time is also quite significant. Think about it - What elements of your product page need to be updated in real time or near real time? The answer is stock quantity and in some instances, the price. All other information can be static. So why do we need to query the backend to rebuild the entire page? It's a waste of resources.

Let us now dive right into the architecture of headless ecommerce to get a better understanding of how it would work. You would essentially have 4 layers,

  1. Headless CMS layer for content management
  2. Frontend layer for static site, mobile app or web app
  3. Commerce layer for handling payment, order management, security etc
  4. API Layer that links the different microservices to the frontend

The commerce layer consists of different microservices such as inventory management, shopping cart, checkout, payment gateway and order management. These services don't need to talk to each other, and the communication will only be with the frontend via API. This modular architecture gives us the flexibility to weave the capabilities of the system, and the capabilities of the system no longer restrict us.

Don't like headless Magento? Switch to Moltin
Don't like Prismic CMS? Switch to Contentful

You can replace any microservice without affecting the rest of the system. Its like those modular Google phones - Project Ara, that never came to fruition.

How does the frontend work?

Our goal with this entire architecture is to develop a modern, secure and fast website. How fast you ask? Almost instant.

This is where the world's most popular JS frameworks - VueJS and ReactJS come in. They are extremely powerful and relatively easy to develop dynamic websites on. Both Vue and React render content on the client side instead of the traditional server side rendering, so the browser only loads the content requested and not the entire page. As you can imagine, this has a huge impact on page load times. Let's say you click on contact us page from the homepage, the browser doesn't need to reload the header, footer and all the other stuff which already exists on the homepage(it's already loaded) instead, it would be more logical to only load the contact form dynamically and this is exactly what vue/react enable us to do. Checkout Gridsome, a Vue.js powered site generator that is not just fast, its near instant.

What about SEO?

Although dynamic websites are a joy to look at, Googlebot is not a fan. It cannot read dynamic content (although Google claims it can, but tests have shown otherwise) rendered on client side, thereby making it non-indexable by Google and if Google cannot index it, then it essentially doesn't exist. To overcome this issue, we use a nodeJS server between the frontend and the API (often called the backend of the frontend) and pre-render the entire site and send the HTML snapshot to the browser. By doing so, Google can see the real DOM and index the site.

Technology is changing fast, from VR, AR to MR & IoT, the pressure to keep up can get intense and rolling out new updates on monolithic platforms can get extremely messy. Headless ecommerce doesn't have any dependencies, whether you want to run A/B tests or roll out support for the new iPhone. It can be done rapidly in isolation, without even bothering your backend teams. Amazon, for example, deploys code every 11.7 seconds to its production servers and Netflix deploys code thousands of times a day. This is the pace required to keep up with changes in the consumer technology landscape and test different hypothesis and optimize based on those results.

What headless commerce and headless CMS platform is right for me?

It's subjective; there is no one clear winner that can serve every single use case. For example - If you already have a Shopify store, then you don't necessarily need to move to another backend platform. You can infact keep all the goodness of Shopify - Catalog management, Order management, payment processing, etc., and use it purely as the commerce layer. Your custom built frontend will connect to Shopify backend via API. Tomorrow if you decide to get rid of Shopify and replace it with Magento, you won't need to redo the frontend. Alternatively, if you would like to improve the checkout experience of your Shopify website, then you can natively integrate Stripe or Braintree payments with your custom frontend giving you full control to customize the UI/UX and use Shopify purely for order/catalog management.

That's the beauty of modular ecommerce architecture. You can test what module works for you and what doesn't. The Nodejs server with preconfigured handlers is already there. To onboard a new solution/platform, all you need to do is replace the endpoint.

Who should be using a headless ecommerce solution?

Although it might seem exciting to jump on the trend and go headless, the architecture does introduce significant complexities. For one, it creates two systems or codebases which have to be managed separately, having independent deployment pipelines. Since the backend functionality is connected to the presentation layer or frontend via API, any new functionality or 3rd party application such as Algolia search, will have to be integrated with both the frontend and the backend ecommerce platform.

Then there's security.

Building the presentation layer from scratch and taking control of user experience is not all sunshine and rainbows. All the security layers have to be built from scratch as well to protect users from clickjacking and cross-site scripting and cross-site request forgery attacks, to name a few.

Make sure you have the right resources or partners before jumping onto headless ecommmerce. It sure is tempting.

Headless Ecommerce CMS solutions -

  1. Prismic - Hosted Solution | Free Tier - $500 Enterprise Plan
  2. Contentful - Hosted Solution | $39 - $879 Large Space Plan
  3. Directus - Open Source Solution
  4. Strapi - Open Source Solution
  5. Getmesh - Open Source Solution
  6. Sanity - Hosted Solution | Free Tier - $1,299 Enterprise Plan
  7. Butter CMS - Hosted Solution | $29 - $199 Pro Plan
  8. Craft CMS - Hosted Solution | Free Tier - $299 Pro Plan

Headless Ecommerce solutions -

  1. Moltin - Hosted Solution | Revenue based model
  2. Crystallize - Hosted Solution | Free Tier - $9,000
  3. Saleor - Open Source Solution
  4. BigCommerce - Hosted Solution | $30 - $250 Pro Plan
  5. Shopify - Hosted Solution | $29 - $299 Pro Plan
  6. Woocommerce - Open Source Solution

Frontend Frameworks -

  1. Vue.js - A lightweight, progressive and incrementally adaptive JavaScript framework
  2. React - A declarative & efficient framework for building user interfaces.
  3. Angular - The most popular JS framework, great for building highly interactive web applications.

Here are some great headless ecommerce examples -

  1. Special Milano - VueJS & VueStorefront

2.  Braun Canada -  GatsbyJS & Contentful

3. Molekule - Custom Frontend & Headless Shopify

4 . Bowers & Wilkins - Drupal & Headless Magento 2

5. Augustinus Bader - React, Contentful & Headless Shopify

6. Harts Of Stur - React & Headless Magento 2

8. The Rake - React & Headless Magento 2

9. Recess - TakeShape CMS & Headless Shopify

10. Carluccios - Wordpress & Headless Bigcommerce

11. Big Green Egg - AngularJS & Headless Magento

12. VeriShop - ReactJS & Headless Shopify

13. Oliver Bonas - AngularJS & Headless Magento

14. Koala Mattress - VueJS & Headless Shopify

15. Seedlip Drinks - VueJS & Headless Shopify

Going headless can turn out to be quite challenging if you don't have the right resources to not just build it but also maintain it. But then again, you need to compare it against the cost and risk of maintaining a monolithic system wherein you are at the mercy of a third party for any upgrades, core bug fixes and new technology integrations such as VR, AI, Blockchain etc.

Headless ecommerce might look precarious at the moment, like any new emerging technology does, but it is the inevitable evolution of ecommerce towards a modular and experience led solution.

Share twitter/ facebook/ copy link