Headless commerce is everywhere at the moment – with merchants, eCommerce platforms, technology partners and CMS providers focusing heavily on readying for this shift. The concept of ‘headless’ provides benefits around performance, serving different formats, development flexibility and fairly often achieving best-in-breed CMS features (via integrating with a headless CMS or traditional CMS) and more. The headless eCommerce trend will only continue to grow and there are new examples of bigger and better-known sites using Magento for headless builds every week at the moment.

Headless eCommerce is essentially the decoupling of the front-end and the back-end of your store, which communicates via requests and retrieving information via APIs. The move from a monolithic approach provides opportunities to integrate different solutions to meet your business requirements, as well as the benefits outlined above.

In two previous posts, I provided a brief introduction to headless eCommerce and examples in the context of Shopify implementations. In this post I am going to provide examples of Magento implementations, along with the technology they’re using.

Why go headless

Customer shopping behaviour is changing all the time – when in the past shoppers would have purchased directly from a desktop site, now customers consume content through a host of interfaces including smartphones, tablets, in-car technology (to one extreme) and much more. If you’re looking to achieve best-in-class mobile UX, have complex requirements around the front-end of your store or are generally invested in providing a rich UX across all devices, then headless may be the route for you. 

The benefits of a headless approach means greater flexibility, significantly improved performance and the ability to tailor content and a greater user experience to customers. The separation of the front-end and back-end also means that some changes to your site can be implemented without having to worry about back-end development, as you would have to have done in the past, meaning greater agility.

Whilst there is a wide range of benefits of going headless (without yet mentioning PWA), there are also some cons – which, in my experience are around loss of features, lack of available APIs and generally development being made more complex and requiring different skillsets. Not all third parties are geared up for headless builds yet as well, which can be an issue. My general stance has been to wait until platforms (including Magento) improve their readiness for headless and the eco-system has caught up with innovators. That said, there are some excellent examples of headless Magento websites – a number of which can be seen below.

Magento as a headless solution

Magento is a good fit for headless on paper – it’s highly extensible and it’s often associated with performance issues / slower load times (not as much in recent times) and even minor front-end development tasks can be heavily impacted by the back-end of the platform. These are two of the biggest reasons I’ve heard Magento agencies use – giving them and the merchant for agility on the front-end and much faster load times.

There are already a wide range of options for the front-end / presentation layer with Magento, with the most common ones currently being:

  • PWA Studio – Magento’s own framework that’s being built around the platform to enable users to build stores as progressive web apps. This is very new but something to keep an eye on as it’s obviously backed by Magento (with lots of community involvement) and is likely to be tightly integrated. It’s also built solely for Magento, unlike most other options.
  • Bespoke – lots of agencies / developers are building out their own frameworks, which can then be used across different projects. Most of these are based on modern javascript frameworks, such as Vue.js or React.js. The disadvantage for a merchant is that they’re semi-locked in with an agency, as the solution is essentially proprietary.
  • Third party framework – there are many new frameworks popping up around Magento (and other platforms), but the most commonly used ones are VueStorefront and Deity. VueStorefront has been implemented by a number of well-known Magento sites and are building a strong community and eco-system around it.
  • Headless CMS – with other platforms, solutions like Prismic or Contentful are widely used, but this hasn’t been as much the case with Magento. This is becoming more common and some of the bigger sites building headless sites at the moment are adopting these. Made.com is an example of a very large Magento store building a headless site using Prismic as a headless CMS.

Magento is a really good fit for the back-end of a headless build, be it via a separate framework or a headless CMS. The only thing to remember is that not every Magento feature has fully built out APIs (as with an API-first platform or some of the more headless-focused platforms), which can result in additional development work. Magento’s page builder or content staging and preview are good examples of features that fall under this. This, along with the other development overheads, are the only counter arguments to going headless with Magento – however, lots of people (particularly Tom & Co, who have been building headless Magento sites using their own framework for years) have overcome this and have developed additional modules or started combining other solutions (like Contentful for example) to improve affected areas.

In the below examples Magento is the eCommerce engine, however, the presentation layers run independently, via different solutions. Magento also provide more information on their headless offering here.

Me + Em – Magento + bespoke headless framework (by Limesharp)

This editorial rich site showcases Me+Em’s core product offering of flattering, functional and high quality clothing. Me + Em is likely one of the larger headless stores live on Magento and the front-end experience is very custom. 

Zadig & Voltaire – Magento + VueStorefront

This is one of the more recently launched examples of headless Magento, leveraging the widely-used VueStorefront framework. Zadig & Voltaire have talked a lot about their shift to a modern technology stack and their CTO, Jonathan Ribas did a talk about the recent Magento Live event I went to – where he seemed positive about the experience.

Oliver Bonas – Magento + bespoke front-end framework (Tom & Co)

British lifestyle brand Oliver Bonas has been one of the poster child examples of headless Magento, launching over two years ago (on Magento 1) on Tom&Co’s Angular-based framework. This has been one of my favourite Magento stores for a long time and both the speed and general UX is very impressive. This is another big store that’s likely one of the highest turnover examples here.

Agent Provocateur – Magento 2 commerce (headless) + bespoke Angular front-end (Tom & Co)

A business based around glamour was always going to have a superb storefront, and this is another Tom&Co example that really packs a punch.

Topps Tiles – Magento commerce + bespoke front-end framework (Tom & Co)

Topps Tiles is a pretty complex front-end experience and they’re using a headless approach to improve mobile UX and simplify the shopping experience. This is probably one of the more advanced headless Magento implementations I’ve seen, with various choices around colours, design, materials, size and more throughout the buying process being a lot more custom than the average headless project.

Biscuiteers – Magento + bespoke front-end framework (Tom & Co)

Another example of a Tom & Co headless Magento site that demonstrates the speed benefits of this approach very well.

les boys les girls – Magento + VueStorefront

Relatively basic example of a headless Magento Open Source build, featuring VueStorefront again.

Eleganza – Magento + PWA Studio

High-end menswear brand Eleganza’s minimalistic style is conveyed really nicely on their headless Magento store – which is very fast and easy-to-use. There are lots of good examples of considered interactions on this site and it’s one of the only PWA studio examples I’ve seen on a production environment at this stage.

UK Meds – Magento + Bespoke Storefront (JH)

Given their unique and complex product and service mix, UK Meds use a headless approach to tailor their storefront to their customer’s specific needs. Good example of a pretty solid headless site that has a really strong mobile UX.

—

These are just some of the sites I’ve looked at that have been built as headless Magento implementations – if you have any others you’d like me to add, please feel free to add them in the comments or email me. I’ll also update as I think more examples.