Introduction to Headless eCommerce – Example Websites, Platforms & Implementation Options

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 VueStorefront, Contentful, Gatsby, Acquia on the front-end and platforms like Magento, BigCommerce, Sylius, 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 delivering content – helping to improve performance and reduce complexity
  • Cleaner and easier to extend (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

  • 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 search solution)
  • Lose the ability to stage and preview content within the eCommerce platform

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

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:

  • Improved front-end performance
  • Ability to utilise push notifications
  • Offline mode
  • Better mobile experiences / compatibility
  • Can be installed as an app on mobile phone homescreens

Examples of Headless eCommerce websites

Oliver Bonas – Magento + React front-end

Herschel – Elastic Path + Adobe Experience Manager

Young tribe – BigCommerce + custom react front-end (uses BigCommerce checkout API)

Molekule – BigCommerce + Vue front-end (uses BigCommerce Checkout API)

Breville – ElasticPath + Adobe Experience Manager

Gibson – BigCommerce + custom front-end

PetCoach – custom front-end + BigCommerce

Big Green Egg – Magento + custom JS front-end

Harts of Stur – Magento + Deity (PWA)

If there are any other great headless eCommerce websites you think should be added, please add them below in the comments.

Paul Rogers

Paul is an experienced eCommerce Solutions Consultant, specialising in all aspects of replatforming, requirements gathering and platform selection projects.

Paul has worked with most mainstream eCommerce platforms and has supported complex replatforming projects with retailers from all over the world. Paul also works on functional customer experience projects and solutions work with various platforms - primarily Magento and Shopify Plus.