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
- Adobe Experience Manager (enterprise personalisation / experience 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)
- Contentful (API-first CMS)
- Prismic (API-first CMS)
- Gatsby (PWA, react-based framework)
- Vuestorefront (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:
- 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 + Angular.js 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.