Customers today expect a seamless digital experience when it comes to shopping online. Think of what strategies are attracting online purchases – fashion shoppers love customized offers based on their past shopping preferences – may be the newest designs from their favorite brand. Customers ordering food online like to be shown special discounts on outlets of their choice or smart combo suggestions of dishes to go with what they have already added to cart. Convenient payment and delivery options, the ability to complete a transaction on any device and the ability to experience the product or service virtually before placing an order – a level of engagement that demands more from business strategists as well as the technology providers.
In the early days of e-commerce, as we have seen in our previous blog on the evolution of selling online, businesses wanted a one-stop solution that packaged all the tools needed to sell online. A backend system that could hold all the product and pricing data, a database that could hold all customer information and past purchase history, a logistical system that could compute delivery charges, local taxes and time-to-delivery – as well as a front-end system that formed the ‘storefront’ and displayed the product catalog digitally.
Thus, the traditional e-commerce platforms provided a ready-made storefront framework that clearly outlined to developers some specific workflows which they could follow and build their storefront based on this framework.
As the e-commerce industry matured, it became apparent that these e-commerce platforms were in fact rigid and restrictive – and the very features that were looked upon as advantages now began to be seen as limitations. The new evolving e-commerce practices demanded quicker front-end development, more creative freedom to experiment and try new UI/UX designs and flexibility to use different third-party applications for various functionalities.
A new approach began to emerge – one that decoupled the front-end of the storefront from the technology that powered its backend. A “headless” architecture in which designers were not tied down to using vendor-specific front-end design systems or even templates pre-defined by the technology.
By eliminating the ‘head’ or the front-end of the system, a new and flexible communication layer could now be introduced which could exchange information between the front-end and the backend – this was the API (application programming interface).
Developers and designers could now use APIs to pull product information from the backend and display it on the storefront or to connect to a third-party payment gateway or even to send product-level content and seamlessly connect to a shopping functionality on a social channel.
These new ‘headless’ systems made possible truly omnichannel experiences for customers, besides giving merchants faster time-to-market and more flexible ways to market their products.
To summarize, the key differences between headless e-commerce and the traditional e-commerce platforms are:
- Creative freedom vs pre-configured setup
Traditional e-commerce systems meant that the backend systems were tightly coupled with the front-end systems. Headless e-commerce removes this restriction and allows designers complete freedom to design the front-end without any pre-configured or prescribed tools or technologies. - High level of skill vs ease of development
Traditional systems provided a certain amount of guidance to developers that made it easier to develop the website based on a recommended framework or templates. With the headless architecture, developers are encouraged to build from scratch. This requires a higher level of skill and technological savviness to make decisions about which front-end systems to bring into use, which third-party functionalities are to be integrated, etc.
- New omnichannel experiences vs restrictive solutions
Headless systems give marketers the freedom to update content freely, often, and fast, allowing them to launch campaigns across different channels and touchpoints. Headless commerce allows merchants to customize the shopping experience for end-users, offer a high level of personalization, and a more engaging experience for shoppers. The traditional e-commerce platforms were limited in all of these aspects and hence were more restrictive for marketers.
- Scalability vs rigidity
A headless approach means that the company is not constrained to vendor-specific functionality. Developers can freely choose third-party apps that can provide faster content updates, at a lesser cost, and do so more efficiently. Headless systems enable sites to scale rapidly, adding more functionality and flexible and agile content updates.
The move to headless commerce systems can be quite overwhelming, given the level of technological readiness and knowledge of e-commerce systems that are required.
However, many technologies now exist which can help ease the transition by allowing a hybrid approach. For example, Magento allows users of its full-stack e-commerce platform a variety of innovations integrating some headless elements into their existing e-commerce architecture:
- Magento PWA Studio: This is Magento’s own framework to build storefronts as progressive web apps. This means developers can create immersive, app-like experiences for mobile browsers without the restrictions of backend applications.
- REST and GraphQL APIs: Magento Commerce now provides these two sets of APIs which allow developers to extend their storefronts for various touchpoints and integration scenarios.
- Customizable front-end: Adobe Experience Manager, now available with Magento Commerce, and can run either headless or hybrid commerce systems. Many developers are using modern JavaScript-based technologies like Vue.js or React.js to build their own front-end frameworks.
Salesforce Commerce Cloud, another industry-leading e-commerce platform also advocates a headless approach that can go beyond the traditional storefront. Moreover, the headless approach essentially complements the Salesforce philosophy of putting the customer experience first.
The importance of customer experience of course has been widely recognized. Dimension Data published a Global Customer Experience Benchmarking Report (2017), based on research on 1,351 companies across various industries, in over 80 countries. The report suggested that 81% of organizations cite CX as a competitive differentiator. The following benefits of customer experience were cited by the companies surveyed:
Salesforce is encouraging a wide range of headless features using third-party integrations with a focus on user-generated content, customized, seamless mobile experiences, and social shopping extensions.
Salesforce encourages developers to:
- Identify and choose a front-end library or framework suitable for the project
- Use a UI toolkit with reusable web components
- Try API integration platforms, for example like the one provided by Mulesoft and pick the appropriate accelerators and connectors to enable commerce features in a quick and agile manner
SAP Commerce, which is one of the most preferred e-commerce platforms, also provides headless commerce through its Single Page Application, Spartacus.
Read more about our Spartacus-based RetailCX accelerator here.
While the traditional platforms had a commerce-driven approach, headless systems have a user experience-led approach. In the traditional platforms, the commerce functionalities dictated how the website was set up and designed. With the decoupling that came with headless commerce, the front-end of shopping websites can now be customer-centric and can be designed with a focus on content and the experience that is demanded by the modern customer.
At Sapours, we offer our e-commerce customers a choice to opt for headless systems – whether using Magento, Salesforce or SAP Commerce at the backend. Our team of UI/UX designers and developers are conversant with the latest technologies that can be used to build customized front-end interfaces to provide a truly unified omnichannel experience to shoppers.
Get in touch with us today to learn more about our Headless Commerce offerings
Author Details –
Vipin Killedar.
Co-Founder and Director (Commerce)
Over 12 years of cross-cultural experience handling Technology and Systems across industries such as Retail, E-commerce, IT consulting and Logistics, and leading towards Digital Transformation.
