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 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:

    • 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

    Clare – Shopify Plus + Contentful

    Clare

    Koala

    Koala

    Inkbox

    Inkbox

    Ntwrk

    ntwrk

    Impossible Foods

    Impossible Foods

    Kinsley Armelle – Shopify Plus + Contentful

    Kinsley Armelle

    Grassroots Coop – Shopify Plus + Contentful

    Grassroots Coop

    Verishop – Shopify Plus + Contentful

    Verishop

    Oliver Bonas – Magento + Angular.js front-end

    Herschel – Elastic Path + Adobe Experience Manager

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

    Bang & Olufsen – CommerceTools + Contentful

    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 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 customer experience projects and solutions-focused work with various platforms - primarily Magento and Shopify Plus.

    Leave a Reply

    Your email address will not be published. Required fields are marked *