By: Shankar
December 9 2018

Headless Drupal Commerce: The Future of Commerce

Customer experience was elevated to a new high when storefronts and shopping carts first burst onto the scene. Then, e-commerce created a different dimension in the world of shopping. In this age of shoppable everything, brands and retailers need to seize the moment of truth as consumers look for shiny objects of inspiration. Today, headless commerce is destined to take shopping experiences to a whole new level where the experience itself can be merchandised.

A black and white image of a man wearing a shirt with flower designs and his face blurred by smoke


Headless commerce is here to get the consumer’s attention and get the deal done. Drupal Commerce allows you to implement headless commerce and helps in monetising the moment of heightened emotion as most of the time, the inspiration, which is potent at the moment, diminishes to a fleeting whim.

Headless Commerce: Explained

When the frontend of your shopping experience is decoupled from the backend, that is, the presentation is segregated from the commerce stack, it is referred to as headless commerce architecture.

In headless commerce, the frontend of your shopping experience is decoupled from the backend.

Such an architecture supports an e-commerce platform without ‘head’ - front-end presentation layer - permitting additional flexibility, customisation, enhanced shopping experiences and creative freedom.

In a headless commerce, you do not have to worry about interfering with the back-end commerce setup. Marketers and merchants can experiment and make alterations to the front-end with agility.

Flowchart with a box, desktop icon, and smartphone icon showing the workflow of headless commerce
Source: Snipcart

Headless commerce vs Traditional commerce

Following are the two key differences:

Source: Snipcart


Presentation layer

In a traditional commerce, design constraints are observed as alterations would require you to invest an awful lot of time in editing the database, code, and the frontend platform.

In contrast, frontend developers do not have to be concerned about modifying databases in the backend and can create a unique user experience that adheres to their business requirements with just a simple API call. With no presentation layer, everything from product pages to the landing pages has to be built from the scratch in headless commerce.

More room for customisation

In traditional commerce, developers have to edit several layers of coding even for a single customisation starting from front-end to the database layer that is dwelling in the back-end.

Headless commerce offers more room for customisation and personalisation.

Headless commerce offers more room for customisation and personalisation. It gives you complete authority over the look and feel of your digital commerce platform.

Benefits of headless commerce

Following are some of the major benefits from different perspectives:

Magnificent shopping experience

It gives a magnificent shopping experience to developers, merchants, and consumers. For instance, adding a new field to a customer account, implementing a custom checkout flow, adding ratings and reviews to the shopping experience and many others can be performed without redeploying the digital commerce platform.

With less duplication of functionality, it offers a better experience to the merchants while administering the shop. At the same time, end-users or consumers get content-rich experiences.

Leveraging portable backends

There is no dependency on large, restricting infrastructures which lets you stay competitive with your front-end without getting bogged down by coupled solutions.

Choosing best front-end tools

Whether it is a web application, mobile application or Internet of Things, headless commerce lets you select the best front-end tools for every platform or device.

Utilising JAMstack

Headless commerce allows you to build using JAMstack which faster, safer and cost-effective thereby providing a creative and strategic development experience

Headless commerce with Drupal

Drupal Community, with its commitment towards making Drupal more better, is continuously working on decoupling Drupal Commerce and the result is incredible.

Drupal Camp Ashville 2018

A session held at Drupal Camp Ashville 2018 delineated the development of the Commerce Demo project. It talked about the out-of-the-box capabilities of the demo store and an ecosystem update constituting the roadmap for decoupled Drupal Commerce. The demo store is available online


The Commerce Demo project was built to create a product catalogue that can be easily removed without hampering the configuration of the site. The design involved modern shopping cart interaction paradigms. It required simple Views and Form API based solutions.

As a result, the design resulted in building a standalone Commerce Cart API module. This can be leveraged by anyone to develop a custom shopping cart widget and Commerce Cart Flyout which is the reference implementation for demonstrating how decoupling Drupal Commerce would look like. 

The design resulted in the development of a standalone Commerce Cart API module that anyone can use to develop a custom shopping cart widget and Commerce Cart Flyout. It showed a reference implementation that demonstrates what decoupling Drupal Commerce can look like.

Drupal Europe 2018

Another session held at Drupal Europe 2018 showed a Cart API for progressively decoupled cart experiences. It talked about how to decouple Drupal Commerce to enhance scalability and flexibility for the organisations. It demonstrated the works that were done for developing a standard Cart API to support progressively decoupled shopping carts in Drupal Commerce for Drupal 8. It was not without hurdles as the core RESTful Web Services were reviewed and involved contributions in JSON API projects.


The new Commerce Cart API project and the reference implementation in Commerce Cart Flyout demonstrated the end result showing a potential of creating a unique user experience. With this, Drupal Commerce can offer great shopping experiences that are on par with leading e-commerce software platforms. This would, in turn, make it simpler for Drupal agencies to sell Drupal Commerce to the customers.

Conclusion

Enterprises encounter increasing pressure to offer innovative customer experiences, An API-based headless architecture provides increased flexibility with its decoupled user interface (UI) approach. Technical professionals responsible for digital commerce can utilise Drupal Commerce for delivering fantastic shopping experiences.

We have been committed to providing a great digital experience with our expertise in Drupal Development.

Contact us at [email protected] to implement headless commerce for your enterprise.