Demystifying Headless Commerce: The What, Why, and How

As ecommerce sales continue to grow, merchants now have new, more complex needs around their online stores. That’s part of the reason why so many people are talking about headless commerce these days.

However, there’s still quite a bit of confusion around what this term means – not to mention how you implement it. The good news is: You’re in the right place.

We’ll be diving into the what, why, and how of headless commerce to break down what businesses really need to know about it.

What is headless commerce?

Why should you care about headless commerce?

Benefits of headless commerce

Challenges of headless commerce

Removing the silos between commerce & content

How do you ensure a customer-led approach to your headless architecture?

How do you go headless?

For answers to all these questions and more download the complete Headless Commerce Guide for Business Leaders

Recommended Resource

 

What is headless commerce?

Headless commerce is an ecommerce architecture in which the front-end is decoupled from the back-end, and they both are able to function independently. This modern commerce architecture lets you seamlessly connect different touchpoints (or “heads”), to the back-end via APIs, giving you the flexibility to change and scale the customer-facing experience independent of the backend.

Think of it like this: Headless commerce allows you to build your front-end with a highly customizable front-end platform like Mobify (which hosts, renders, scales, and secures your customer-facing site) while the back-end functionality (which includes payment processing, order capturing, PCI compliance, content management, etc.) can be called on via APIs from platforms like Salesforce Commerce Cloud, Oracle, Amplience, or Adobe. By joining these two pieces together through an API, you get a headless commerce solution.

Why should you care about headless commerce?

Today, we’re witnessing a complete shift in the way people shop. Dedicating time to go in-store to make a purchase is becoming an exception rather than the rule. People expect instant gratification, and they shop on the go.

Customers’ expectations are constantly growing, too. Each time customers are exposed to an improved shopping experience, it raises their expectations for other brands even higher. This means the landscape for ecommerce is shifting as a whole.

There are three main reasons you should care about headless commerce:

3. The need to use content for effective storytelling. Storytelling is essential for modern consumers, and a headless approach helps fulfill this need by making it easy for companies to seamlessly blend commerce and content functionality throughout the experience. By directly accessing both via an API, they can exposed on the decoupled front-end at any point in the customer journey.

2. Lack of agility. With ancient site architecture that’s not easily updated, brands can’t move quickly enough to keep up with customer expectations. As a result, they lose sales and hurt their customer retention efforts in the process. Headless commerce allows brands to stay agile and constantly iterate on customer experience improvements.

Research firm Forrester says this: “Software vendors will refactor their ancient architectures or be left behind. The old world of closed, proprietary stacks is dead software walking. In the age of the customer, business responsiveness trumps technology coherence and the cycle times of improvement are measured in days, not years.”

1. The rise of channels. With the increase in adoption of various channels (like mobile devices, voice assistants, chatbots, and social commerce), brands now need to consider headless commerce as part of their digital transformation if they want to stay relevant.

Today, customers interact with brands through various touchpoints. Brands can’t keep up with new channels unless their front-end is decoupled, which makes it easy for them to keep up with the pace of channel diversification.

So what’s the solution to this problem?

According to Joe Cicman, Senior Analyst from Forrester, there is a three-part solution that revolves around headless commerce:

  1. Embracing the API economy: There can’t be a single vendor. Instead, we need APIs to connect multiple solutions.
  2. New architecture: There needs to be a structure in place that also emphasizes the importance of digital experience.
  3. Touchpoint-agnostic architecture: Any touchpoint should be supported for a seamless experience across devices and channels.

Some of the largest global brands like Amazon, Wal-mart, Target, Lancôme, Michael Kors, and Nike have transformed their online experiences by embracing headless commerce.

If you want to keep the pace and remain competitive, this is the way forward. The fast rate at which new technology emerges requires building a future-proof ecommerce ecosystem that can empower your business, making it more agile.

Benefits of headless commerce

The separation between the customer-facing experience and all the back-end business logic enables organizations a new level of freedom and continuous iterations that foster a culture of innovation and constant improvement.

Let’s look at some of the key benefits and why forward-thinking merchants are adopting this new headless approach.

Personalized customer experience

Headless commerce gives you the freedom to create customized UX and shape your brand’s identity without sticking to predefined templates. According to Salesforce, 80% of customers say the experience a company provides is as important as its products and services, and 67% of customers say their standards for good experiences are higher than ever. Separating the front and backends allows companies to quickly focus resources on customer experience without impacting critical business systems (like payment processing).

Business agility

Speed and agility are crucial for brands that want to stay competitive in an ever-changing world. Headless commerce enables you to adapt quickly to market changes and to implement new UX changes and add new functionality without having to change the back-end logic. A monolithic architecture that ties the UX and the core creates slow and rigid organizations, and companies get stuck because they can’t keep up with the pace of change in their market.

Omnichannel digital transformation

Customers don’t look at your brand as separate channels – they evaluate the overall experience. Being present in those intent-rich moments when they turn to their devices to research or to buy makes all the difference. Research from Harvard Business Review reveals that 73% of consumers use more than one channel during their shopping journey. Additionally, omnichannel customers spend 4% more in-store and 10% more online than single-channel customers. With headless commerce, you can add new touchpoints easily without building a business case for a new backend every time you want to add a new front-end. This opens the door to more integrations, which helps break down silos in consumer-facing operations.

Scaling your business effectively

In a decoupled environment, the presentation layer and the business functionality work separately, and both front-end and backend developer teams can work at the same time (rather than having to coordinate back and forth to ensure nothing breaks). The content layer should be the back-end and connected to the front-end via APIs, while the presentation layer should be an agile front-end that doesn’t contain any backend application logic. This way, the front-end can be scaled independently so that even if it receives a surge of traffic, it doesn’t impact the backend. The best part is you can push seasonal promotions and real-time marketing quickly and easily.

Testing, not guessing

Data-driven decision-making is the foundation for success in this digital-first world. With a traditional commerce architecture, if you want to conduct UX experiments, you are forced to modify both front-end and backend code simultaneously. In contrast, with headless commerce, you’re free to experiment with the user experience without affecting the backend operations. This environment will help you receive feedback, test more effectively, and optimize your UX to get the best results.

Challenges of headless commerce

Headless commerce can bring you a significant competitive advantage, but it’s not a silver bullet. There are some challenges that you need to be aware of when embarking on this journey.

Costs

When choosing a headless solution, you get the backend engine without a predefined presentation layer. If you decide to take care of this in-house, you will have to hire developers to build the storefront from scratch and maintain it, which can be expensive and time-consuming. When considering a custom front-end, the ongoing support and scalability is the hardest part so it’s far more important to think about the long-term maintenance costs rather than the initial build costs and times.

Predictability and stability

The move from a commerce stack vendor to microservices means you can no longer rely on the commerce system as your predictable front-end layer – your front-end team needs to deliver the predictability and stability. If you don’t execute this correctly, the freedom to create a custom storefront might turn into a burden, so instead of agile, your ecommerce ecosystem can become fragile.

Support

If you’re considering a switch to headless commerce, you should bear in mind that you need to build a seamless and scalable front-end that won’t freeze during high-impact sales seasons. If you don’t take care of the basics up front, your team will be preoccupied with fixing and maintenance instead of focusing on delivering the best customer experience.

The good news: All of these challenges can be addressed with a Front-end Platform as a Service approach, which is beneficial for businesses as it eliminates support, scalability, and stability concerns. It’s a cost-effective solution that brings long-term results.

Removing the silos between commerce & content

People are buying experiences today, not just products. According to a study by Walker, by 2020, customer experience will overtake price and product as the key brand differentiator. Knowing that 87% of shoppers now begin product searches online, companies that want to stay in the game must prioritize delivering top-notch shopping experiences.

Back in the day, that was extremely difficult due to the fact that marketing and ecommerce teams worked in separate worlds with different goals in mind. Marketing teams were focused on customer engagement, while ecommerce teams cared about sales and revenue.

These differences were reflected in technology as well. Marketers typically rely on CMS and marketing automation tools, and commerce teams depend upon the ecommerce platform. This resulted in a disjointed experience and sometimes confused customers.

Now it’s up to companies to choose a digital commerce architecture that provides an optimal customer experience. According to Gartner, there are three approaches:

1. Commerce-led: The front-end experience is built on the ecommerce platform.
2. Experience-led: The front-end experience is built on the digital experience platform (DXP) or content management system (CMS).
3. Headless (or API-oriented): APIs are used to pull content and functionality from the ecommerce platform and CMS into a custom front-end or front-end platform.

Gartner's Three Approaches to Digital Commerce Platform Architecture and How to Choose Among Them

Source: Gartner (September 2017) The Three Approaches to Digital Commerce Platform Architecture and How to Choose Among Them, Refreshed 14 May 2018, Published 28 September 2017.
Figure 1. The Three Approaches to Commerce Architecture
https://www.gartner.com/document/3809365

Let’s look at each of these in more detail.

Commerce-led experiences

In this approach, the ecommerce platform owns the direct interaction with the consumer, meaning it’s responsible for delivering the front-end experience. This is optimal for creating the best purchase flow, merchandising and order management efficiency, but due to the tightly coupled front-end with the ecommerce system, companies don’t have the agility to move quickly enough to keep up with customer expectations.

Another disadvantage is that brands are restricting their front-end options to the vendors’ templates and functionality, while these commerce systems are optimized for a more traditional product catalogue experience, they’re not ideal for delivering content-rich experiences that enable brand storytelling.

 

Commerce led experience architecture advantages

Content-led experiences

The content-led model requires a marketing-centric approach, as the front-end is built on the CMS. This approach helps brands craft content across touchpoints and engage customers with content-rich experiences. Again, this approach means that the front-end is tightly coupled to a backend application, limiting the business’ agility and flexibility.

 

Content-led experience architecture advantages

 

Traditionally, brands opted for either commerce-led or experience-led approaches. However, the major drawback of these approaches is that they force brands to prioritize either commerce or content, when in reality, both are equally important. Add to this the fact that all of the front-end and backend systems are tightly glued together, which makes it slow and painful to implement changes to the customer experience.

Faced with the fact that customer-centricity will become imperative in the upcoming years, brands and retailers have been on a quest to find a solution that meets customers’ needs at every touchpoint.

Enter headless commerce.

Headless commerce experiences

The API-lead or headless commerce approach doesn’t force you to pick between commerce and content – you get the best of both worlds.

The front-end calls on APIs to expose commerce functionalities (like product information, user profile information, cart, and checkout), while the CMS is in charge of delivering content and assets. By decoupling the front-end, you get the freedom to deliver faster, more engaging digital experiences that seamlessly weave content and commerce throughout the customer journey with a best-of-breed approach.

Main characteristics of this approach:

 

Headless commerce experience architecture

How do you ensure a customer-led approach to your headless architecture?

It’s important to note that the headless approach requires a new front-end built on headless and serverless principles, as plugging a monolithic front-end into an agile backend will mitigate the agility and flexibility advantages. It will also limit you to predefined tools, frameworks, templates, and layouts.

For example, using a commerce system as the front-end and layering it onto a decoupled CMS would require a heavy redeploy of the entire commerce system for major front-end changes, and prevent you from moving fast enough to keep up with today’s connected consumer. A customer-centric approach to headless requires an agile, decoupled front-end layer that eliminates all these constraints. A good sniff test is to ask yourself, is there any application logic in my front-end solution? If the answer is yes, then it’s not a customer-led approach and you won’t get all the benefits of headless.

How do you go headless?

With all this information under your belt, the natural next step is considering a migration to a headless commerce architecture. Here are the key steps that marketing and ecommerce teams need to understand in order to contribute during the migration process.

Mind the gap – The best starting point is to take a step back and analyze your current experience. List what the current platform offers, what it doesn’t offer, and decide on your priorities. This will give you a clear picture of what the best approach is for your business. If agility and a better customer experience are high on your list, then headless commerce is the right choice for you.

Understand the needs of your customers – This is the perfect time to think about your customers’ needs, both internal and external, and to identify what best-of-breed solutions you’ll need to create your roadmap. Make sure there’s alignment on the future state architecture so products and platforms are chosen with both internal and external needs in mind.

Select your front-end solution – Once you decide to go headless, you need to decide what your new head will be and whether you’ll build vs. buy. Build vs. buy is a recurring debate in the enterprise software landscape, but “buy” has won time and time again.

Create a timeline – Start with your new front-end, as that’s what the customer cares about and it will have the biggest impact on revenue and engagement (the customer doesn’t care if you replatform to a new commerce system on the backend). From there, swap out legacy backend systems with microservices over time as you’re ready. Since you’ve already built a decoupled front-end at this point, the customer experience won’t be affected when you swap out backend systems.

Organizational impact – Every transformation affects the organization in some way. During this process, it’s essential to set up clear expectations for every role and to ensure that both content and ecommerce teams are on the same page, with one goal in mind – creating a unified, seamless customer experience.

The best thing about switching to a headless platform is the fact that you can do it gradually, with incremental changes that won’t affect your day-to-day operations.

How to build a decoupled front-end

Launching a decoupled front-end means building the actual front-end experience, as well as taking care of everything that goes under the hood, like hosting, securing, scaling, and integrating the front-end experience.

If you decide to embark on the headless commerce journey, you have two options: Building a custom front-end from scratch or building it on a Front-end Platform as a Service.

Building a front-end that scales isn’t easy. Brands may think that creating the actual experience is the hardest part of the equation. However, that’s not the case.

Building the underlying infrastructure and integration architecture to scale in the long run, as well as providing ongoing support for the decoupled front-end, are the biggest challenges when building a custom front-end in-house.

Looking for quick and easy solutions, companies often get stuck with an in-house solution, burdening their front-end team with maintenance and support issues. Furthermore, as the site grows, and the custom front-end can’t keep the pace, a lot of ‘point solutions’ become prevalent in the code. This undermines the central architecture and increases the complexity and interdependencies within the code. Thus, the freedom that you were striving for in the first place disappears.

A Front-end Platform as a Service approach eliminates support and scalability concerns. It offloads the stress of hosting, scaling, securing, and monitoring your front-end so that you can focus on building a differentiated customer experience.

Impact for front-end stakeholders

Launching a Front-end Platform as a Service will change the day-to-day activities for your front-end team, enabling them to focus on innovation and strategic activities:

  • Frequent releases without impacting quality or stability
  • Fast customer experiences with light-speed loading time
  • Integrations that enable internal collaboration, but at the same time have the power to fully unlock the value of third party systems
  • Confidence in peak traffic load and response times
  • Focusing on features and experiments that delight customers

Questions to ask before choosing a headless front-end

Going headless requires significant changes. When choosing a front-end solution, make sure to ask the right questions, such as:

  1. Is the presentation layer calling APIs? The answer should be a clear yes.
  2. Is any application functionality coupled to the front-end? If there’s any commerce or content management logic coupled to the front-end, then you won’t get the agility and flexibility benefits of headless commerce.
  3. If you were to change a backend system, would it impact the front-end? The answer should be no. If it’s not, we’re not talking about a headless solution.
  4. Does the front-end solution embrace a serverless model? This allows your team to offload undifferentiated activities so that they can focus on what impacts the bottom line – the customer experience.
  5. How will the front-end infrastructure be built and maintained? There should be infrastructure in place to host, scale, secure and monitor the front-end to accelerate the build and not eat away at maintenance resources.

The headless commerce future is now

The explosion of growth and adoption of connected devices and digital touchpoints has resulted in disjointed customer experience. To unlock the opportunities from this major shift, companies must focus on unifying the brand experience across touchpoints.

The headless approach was born with the idea to solve the problem of disconnected experiences. The ability to experiment, learn, adopt the latest web innovations, and make changes in the front-end without disrupting the whole ecosystem lets you deliver engaging digital experiences that lead to increased conversions and customer loyalty.

The best path to headless commerce is bringing together best-of-breed solutions that are independent of one another but can integrate seamlessly.

By choosing a Front-end Platform as a Service that can reap the benefits and address all the challenges outlined above, you can create a unified customer experience that will translate into increased ROI. Only an ever-evolving front-end platform can deliver next-gen experiences.

Ready to start mapping your migration path to a headless approach that unlocks agility and enables a better customer experience? Download the Headless Commerce Playbook.

Get the Playbook Now

Leave a Reply

avatar
  Subscribe  
Notify of
Resource ad

Subscribe to the Mobify Insights Blog

Stay in the know on the latest in mobile commerce so you can effectively engage your customers and drive revenue.

Related Articles