What Headless E-commerce Means for the Future of Retail

Modern e-commerce platforms have greatly simplified the process of getting retailers online. Instead of waiting many months for custom development, most retailers can have something up and running relatively quickly.

But they are not without their drawbacks. Consider the challenges of national and multinational retailers with current e-commerce platforms.

Diversity

Picture a houseware or furniture retailer that sells products across an entire country. In all likelihood, people have very different purchasing preferences and behaviors, as well as style tastes from the East coast to the West. These can be affected by many factors, including the population, demographics and average incomes of their area, to even things like housing and weather patterns.

As a result, local storefronts will be modified to suit local markets. But why is it, then, that the homepage of the retailer's website shows the same sale and the same products to every single person that views it?

Speed

Now imagine how this challenge is amplified even further for a multinational retailer. Clearly local buying behaviors are going to vary greatly by country, and that can be somewhat solved for with international website versions (that still have the same issue above nationwide, however).

Picture an Italian manufacturer and retailer of high-end bicycles. Their data center is in Milan, and the site is beautiful and fast. At least it's fast to anyone in or near Italy.

But suppose a potential customer is visiting their website from the UK. The website is still beautiful, but now it's not so fast, because the data (code, images, inventory and product information) has to travel in order to be loaded via a local ISP. Though this may only be a couple of seconds, the delay is felt and the experience is lessened. And now imagine how the experience is for customers in America or Australia, with the data making its way around the world. What should be a premium brand experience becomes mediocre, and as a result conversions are negatively impacted.

A sample PageSpeed report may look like this:

Logistics

The reality is that not every retailer has the same distribution or fulfillment capabilities. Availability, shipping, delivery and pick up options can all vary by region, city, right down to the product level.

To account for this, most platforms have some form of app or plug-in capability. If you require custom logic, you can either bolt on a third party application or build one yourself. This is a versatile and powerful way of creating extensibility within a platform.

The downside however, is that each app or plug-in utilized adds processing time and complexity. If a retailer requires multiple different apps to calculate regional availability, inventory and real time shipping estimates then each one of these must load and process at runtime for each and every website visitor.

Here's what every page has to load as the apps pile up:

Under ordinary circumstances this is adding likely seconds to every page load, which has negative impacts on conversion rates as well as SEO. But then imagine how this is compounded during times like Black Friday or Boxing Week! One of our past clients had to stagger their Black Friday deals simply so as to not bring their hosting provider to a grinding halt!

Headless is the Answer

By way of quick reassurance, it's completely understandable if the term "headless e-commerce" sounds overly technical or confusing. It's actually a rather simple concept.

With traditional e-commerce platforms, the back-end server is where all of the products, customer and transaction processing happens. The storefront is the front-end, or "head", and it lives on the same server. Therefore its speed and functionality are all limited to what the server can provide, as described above.

Headless simply means separating the two. You keep your same e-commerce back-end to handle all the same functions. But you build a separate front-end, and instead of sitting on the same server, it's hosted in the cloud and pulls its data from the back-end (via APIs). Therefore your storefront ("head") can be completely tailored to however you want to build it.

See how Headless solves for the challenges listed above.

Diversity

By separating the front end, retailers can bake in complete layers of personalization, based on virtually unlimited data sources, and not hampered by the server's ability to process.

For example, a furniture retailer could tailor the homepage to visitors from the East coast to the West coast, promoting products that sell better regionally, even taking into consideration such datasets as local weather patterns or housing data (e.g. condo furniture in cities, farmhouse furniture in rural regions). And since there are usually different buying behaviors for new customers versus returning, the website front end can detect past customers and choose products and promotions to display accordingly.

Speed

A key advantage of a headless storefront is that it does not need to reside on a single server, and is therefore not limited by the travel time of data. Modern front end frameworks are statically generated, and thereafter deployed on a global CDN.

How a CDN works:

So going back to the example of the high-end bicycle retailer, while their business operates in Italy and their back-end processing can still take place in Milan, their front-end has many versions of itself hosted all around the world. Therefore, customers will receive a lightning fast version of their website, regardless of where they are geographically. And even if there's increased demand due to Black Friday, any processes can simply spin up more cloud resources, allowing the website to remain just as fast, regardless of the number of ongoing transactions.

Logistics

If you recall from the example above, the challenge with implementing multiple logistical rules is that it usually requires third-party apps, resulting in conflicts or site slowdown.

The shift in paradigm with headless is that all of this complicated logic can instead be built into the storefront. The e-commerce back-end can still hold all the products and process all the transactions, while the front end can be programmed to only show products that are available to the correct customers, based on their location or other data points. This has the added benefit of not frustrating customers in trying to purchase products, only to be told they are not available (to them) when trying to check out. 

Even essential site components that often slow down server resources - such as local inventory data - can be synchronized to a CDN. This allows a retail website of any scale to remain blazingly fast.

A Balanced Viewpoint

Candidly, there are drawbacks to upgrading to headless e-commerce. The most obvious is that it's more development-heavy; it's not as simple for example, as the drag and drop interface of a commercial Shopify theme. There are also increased complexities as you build out your architecture via microservices. 

However, in our experience the opportunity cost of a headless approach is more than worth the additional development and architectural requirements. Increased user experience, customer satisfaction as well as SEO and security benefits all merit the investment of upfront build resources. 

Just getting started on your headless e-commerce journey? Feel free to reach out.