Paul Rogers

Over the last ~12-18 months, there has been a huge surge in the popularity of headless eCommerce implementations, with lots of retailers choosing this approach to give them more freedom around the front-end of their site and how their products and product information are showcased.

There has also been a significant improvement in the readiness of different platforms and technologies around headless and de-coupling the front-end or ‘presentation layer’ of the website – with solutions like Gatsby.js (react-based PWA framework), VueStorefront (vue.js-based PWA framework), Contentful (headless CMS) and Prismic (headless CMS) on the front-end and platforms like Magento, BigCommerce, Elastic Path, CommerceTools, Spryker and Moltin etc advocating this approach and opening up their front-end APIs to allow for headless implementations!

What is Headless?

Headless eCommerce is essentially a situation where the front-end of a site is de-coupled from the eCommerce platform and other systems. By separating the ‘presentation layer’ (the front-end) from the commerce layer (the back end), a retailer is able to gain more flexibility in serving rich content and brand experiences, as well as overall user experience.

This approach suits different types of retailers in different ways – with content-focused and heavily brand-focused websites being the obvious use case. In a traditional commerce experience, the storefront would have to call to retrieve information all the way back to the platform which can be time-consuming. The headless approach ‘de-couples’ the two and uses API calls to retrieve that information instead – this, in turn, allows developers to customise sites with a lot more ease as the back and front end no longer rely heavily on each other through code.

What are the pros and cons of headless in eCommerce?

Pros / benefits of a headless approach to eCommerce

The presentation layer (be it a CMS or a custom front-end etc) is only focusing on delivering content – helping to improve performance and reduce complexity

Cleaner and easier to extend / customise (e.g. roll out additional properties or change the layout of templates etc)

More flexible in terms of design and format – not restricted by working to the strengths and features of an eCommerce platform

Faster time-to-market – developers are able to change the front-end without having to worry about back-end logic, making the production side of things faster.

Cleaner architecture that can benefit security (only front-end code and database is accessible publically- back-end is completely independent) and scalability (can add separate front-end servers, no downtime for maintenance etc)

Reduces overhead in achieving / building a PWA-based front-end (in most instances)

Disadvantages / cons of a headless approach to eCommerce

Loss of platform functionality – often, by decoupling the front-end of the website from the eCommerce platform, you will lose some functionality. Depending on the platform, it may be that you can work around available APIs and still make use of a lot of the core functionality available, but things like page building, previewing of content changes, certain merchandising capabilities etc aren’t usually available when you’re working with a separate front-end layer.
Maintaining two systems – a headless approach means having two approaches, two databases and two codebases, which can create a development overhead.
Cost of ownership – from experience, there’s generally a cost overhead around headless eCommerce implementations (due to there being more development required)
Integrations – some third-party integrations will need to be connected to both the front-end and the back-end (e.g. a personalisation solution like NOSTO or Monetate or a search solution)

Examples of CMS’s / solutions to support headless eCommerce implementations

Contentful (very popular, API-first headless CMS)

Adobe Experience Manager (enterprise DXP / personalisation platform)

Amplience (enterprise experience platform, often used for headless)

Acquia (enterprise experience platform, often used for headless)

Kentico (mid-market and enterprise CMS platform)

Sitecore (enterprise CMS platform)

Prismic (API-first headless CMS)

Gatsby (react-based, PWA framework)

Vuestorefront (vue.js-based PWA framework)

Deity (react.js-based PWA framework)

Examples of eCommerce platforms that support a headless approach

What is a PWA (progressive web application) and what are the benefits for eCommerce?

A progressive web app (commonly referred to as PWA) is essentially a web application that allows for faster and cleaner browser-based experiences through creating an app-like experience. PWA’s use a series of scripts and APIs to allow for better offline usage through caching and utilising offline storage, which creates a cleaner, more consistent and uninterrupted experience for end users.

Some of the benefits of PWAs for eCommerce include: