How to use headless commerce for innovation in eCommerce

Photo by rupixen.com on Unsplash

If you’re still using a legacy e-commerce platform, you might be leaving a lot of money on the table. That’s because your current software possibly limits you in creating shoppable moments at trending and emerging consumer touchpoints.

Today’s buyers embrace shopping on mobile, through voice assistants, and in self-service kiosks. The longer you stay with a traditional desktop-locked online store, the more of your customers will buy from your competitors.

Just take a look at your online store stats. Perhaps over 50% of your web traffic may already come from mobile. At the same time, your mobile conversion rate can’t be nearly as good as desktop. If you see that consumers are visiting your store on mobile yet aren’t converting, it’s time to move to headless commerce. It can help you close your mobile conversion gap and experiment with new sales channels.

Let’s look at what headless commerce is, how it works, and how you can implement it without hiring an Amazon-grade engineering team.

Why choose headless e-commerce over traditional?

To stay competitive, you now should consider the shopping experience to be your product as much as the goods you sell. In this view, you can’t rely on your e-commerce platform to take care of it anymore. It’s time to get the responsibility for keeping up with customer expectations back to your team of tech experts.

With headless commerce, you get full control over your customer experience across all touchpoints. You're no longer constrained by templated user interfaces provided by the platform. Your brand becomes flexible and able to adapt to the ever-changing customer needs fast. You get a chance to catch emerging engagement opportunities and create shoppable moments that you’d definitely miss with a legacy e-commerce system.

Now, let’s consider what makes headless commerce such a flexible and powerful tool. Knowing how it works will help you understand how it’s different from traditional e-commerce websites.

How does headless e-commerce architecture work?

A headless architecture is a relatively simple concept. As illustrated in the diagram, the whole e-commerce application consists of a set of decoupled systems–frontend and backend that communicate via an API.

The term headless refers to the e-commerce application that runs on the backend of your online store (server-side). It can represent a headless CMS, or an e-commerce platform engine, or a set of custom microservices with third-party integrations. This single backend app encapsulates and executes all of the business logic and stores data.

Instead of a user interface (UI) that should have served its ‘head’, the headless backend app has an application programming interface (API). The API enables connection and data exchange between the backend app and an arbitrary number and type of user-facing applications (frontends).

The agility of headless architecture comes from the separation of the frontend from the backend. Numerous user interfaces can be developed, added, removed, and updated independently from the backend app and each other. All they need to become a part of the entire system is to call the API of the backend app.

Headless architecture gives you the green light to quickly update customer-facing functionality and content based on your business needs. It makes it possible to change user interfaces safely without any harm to the underlying business logic and workflows of your e-commerce application. And vice versa, the entire backend can be modified or even replaced without breaking functionality on the frontend, as long as the new system provides the same API.

To implement headless commerce you’ll need a vision, an engineering team, and a UX/UI designer. At first glance, it may seem to be too complicated for a small or medium-size retail business. It also may seem that going with headless e-commerce would be much more expensive than installing and customizing a traditional e-commerce platform.

But is that true?

How can you implement headless commerce?

Earlier headless commerce was a prerogative of corporations having in-house engineering teams or smaller digitally native brands. Now, it’s mainstream. It’s affordable for any merchant wanting to keep up with customer expectations, deliver innovative shopping experiences, and experiment with different sales channels.

Today developers can use a variety of open-source frameworks, pre-built code packages for e-commerce apps, and special development kits (SDK). The advancement of technologies democratized custom e-commerce application development and sped it up. It means that headless commerce is not about building homegrown software from the ground up anymore.

Building a headless e-commerce app now can be equal in cost and complexity to customizing an open-source CMS or third-party e-commerce software. But, it gives you a future-proof system with lower maintenance costs and higher conversion potential. To estimate the scope of work, you should know that building user interfaces will anyway be on you, but you’ll be able to use some off-the-shelf options for the backend app.

How to approach e-commerce app development?

As desktop and mobile remain the main online sales channels, your first task will be to create a system that performs effectively on both. Luckily, you don’t have to create a separate mobile app for this. Instead, you’ll build a single progressive web application (PWA) that will provide a slick storefront for all devices.

PWA is a browser-based app that shows users different interfaces depending on the platform and device they access it from. You shouldn’t confuse it with shrinking your website to fit a small screen. It’s rather about providing a native app-like user experience through the mobile web.

To build a PWA you’ll hire a frontend developer working with one of the popular frameworks, such as Vue, Angular, React, or Flutter. Alternatively, you can look at the UI SDKs provided by e-commerce platforms that support headless commerce. After you have a working PWA, you’ll be able to add more interfaces that are relevant to your business niche.

What will you have on the backend? Here are three options you can choose from depending on the specifics of your business and the resources you have:

• Build a set of custom backend microservices. This option is the closest to the “build it” approach and would be most complex. Hiring developers that specialize in building e-commerce PWAs can simplify the task.

• Put together comprehensive 3rd party solutions. This implies that you make a mix of external services and your developers rather focus on integration and building API than creating custom services.

• Commerce as a Service (CaaS). This option is the closest to the “buy it” approach and would be the fastest but costly. You’ll go with an almost ready-made backend app and a developer that will connect it via API to your custom PWA.

It’s interesting that e-commerce platforms that have provided traditional solutions for years, now rolled out their headless alternatives. They see the future in the CaaS model as a way to keep up with the agility and customization merchants need.

Are Shopify, Magento, or BigCommerce headless e-commerce platforms? Yes. Now they allow your developers to plug in their cloud e-commerce engines, such as Shopify Plus or Magento Commerce, on the backend of custom UI apps. They even offer their own user interface SDKs, such as Magento PWA Studio or Shopify SDKs, to assist you with the frontend development.

The downside of CaaS is that available subscription-based solutions have quite a high price tag. That said, this model removes most of the e-commerce app development work and offloads the maintenance of the backend systems from retailers. We’ll definitely see more and more retailers implementing headless commerce using a given platform vendor’s APIs.

Where to find independent e-commerce developers?

It’s not necessary to hire an in-house engineering team to implement headless commerce unless you’re going to become another Amazon. Hiring independent developers for this job is a good option especially if you’re on a budget. However, it may be challenging to find really good and reliable specialists without spending much time on vetting.

We at Proxify can help you staff your engagement, and enlarge your team of tech experts. Having many highly-skilled and trusted e-commerce developers in our network, we’ll recommend a specialist with the most relevant skills and experience. And it won’t take us long to find them. Simply reach out to us, and you’ll start re-platforming your online store in a matter of days.