Introduction to Headless E-Commerce: The 2020 Guide - Basics of Headless E-commerce

Introduction to Headless E-Commerce: The 2020 Guide - Basics of Headless E-commerce

To better understand headless e-commerce, we need to understand it in terms of its historical context. 

From the high street to the department store to the mall, and then the super-mall, bricks-and-mortar shopping evolved throughout the 20th century. In this century, ecommerce has taken prevalence as the new, more convenient way to shop (it’s older than you think, though; Boston Computer Exchange launched back in 1982 as one of the world’s first ecommerce companies). 

In the last two decades, the rise of platforms like PayPal, Amazon Prime and Etsy have made ecommerce increasingly easier to use for both retailers and consumers - and the trend is exploding. 

Shopify launched in 2006 and has steadily grown to become the ecommerce platform of choice around the world. Yet, with retailers today increasingly expanding their customer reach into multiple countries with different languages and currencies, and with new technology constantly disrupting the e-retail environment, the use of Shopify or similar platforms as an all-in-one ecommerce solution has shown some limitations and a resultant need for a further evolution of ecommerce. 

Which brings us to the rise of headless commerce, headless ecommerce agencies and next-gen shopping - but is it for you? If you’re reading this, chances are that you’d like to find out.


What is headless e-commerce?

In the case of any ecommerce retailer, there is the front-end and the back-end. The front-end is what the customer sees on a PC, smartphone or tablet screen; it’s where they interact with the online store. The back-end is the technological architecture that drives and underpins the front end of the application - this is where the retailer or their ecommerce developer builds, runs and updates the commerce part of an online store - things like PCI compliance, payment processing and order capturing. 

Traditionally, ecommerce applications were all-in-one, meaning that both the front-end and the back-end sat on the same application, in what is called a full-stack or monolithic structure. With headless ecommerce the front-end of the online store - which you can think of as the “head” - is detached from the back-end; in this context, the “body”. This gives the retailer more freedom in the way their online store looks, works and serves customers.

These days, a growing number of brands understand that it's becoming increasingly important to invest in an outstanding digital brand experience for their customers - termed a “digital flagship store”; an online store that feels like a unique and engaging online experience and is tailor-made for the brand; different from any competitor’s online offering. 

In order to create a digital flagship store, developers are pushed to the limits of their skills,  because a unique digital experience relies heavily on the integration of high-quality media content - all-angle product images, blogs, content widgets, videos (a growing trend) and animations. Headless is where you get to play with all of these things to create a more dynamic customer experience.

The headless structure allows a different application or applications, and different technology, to drive each end, with Application Programming Interfaces (APIs) allowing them to still “talk” to each other and work with each other. At the same time, changes can be made to the front-end without anything needing to happen at the back-end - read more about that means here - which ultimately allows the retailer to deliver a faster, more responsive experience to their customers than the traditional ecommerce apps allow. 

In essence gives retailers the best of both worlds - the reliable, trusted ecommerce foundations of a Shopify SaaS solution, combined with the best-performing applications working at different facets of the front-end. Importantly, a headless retail brand is also optimised for seamless integration into eBay, Amazon (a headless giant in its own right) and other shopping platforms - essentially any platform, solution or service which has an open API connection.

Why go headless?

The headless ecommerce architecture

In ecommerce as most people know it, the architecture that underpins the commerce solution encompasses both the front- and back-end but, in headless commerce, the front-end customer experience is completely separated from the back-end technology infrastructure, in a kind of mutually amenable divorce. 

This allows the “designer” end of the retailer’s team, which creates the customer experience, and the “development” end, handling the e-commerce infrastructure, to make changes and updates without waiting upon the other party, or impacting each other when they do make changes to their end. This provides greater flexibility and less co-dependence in terms of running the ecommerce portal overall.

A more flexible customer experience

The freedom of creativity that headless enables allows developers and designers to create a more  varied and responsive experience for the end-consumer via multiple touch points. 

The customer experience at the front end can be designed without any of the constraints you would find if it was housed within, for example, the templated Wordpress front-end. Also are developers able to use next generation image formats and AR/3D models to deliver a strong customer experience.

These days, there are a lot of new tools for the implementation of a headless CMS: arguably the most impressive being Contentful; Adobe Experience Manager (enterprise DXP / personalisation platform); Amplience and several more - here’s a good list, with links.

The major ecommerce platforms like Shopify Plus, Magneto, BigCommerce and Moltin have acknowledged the evolution of these tools and have made allowance for their platforms to become "open" with the use of API’s. For example, here’s how the Shopify Storefront API works (do have a look into BigCommerce and Rachio as well).

In this new structure the bedrock functionalities of these big platforms can be used in a  ‘decoupled’ way, while ecommerce retailers are freed up to keep pace with the rapid release of new technology, which is seeing online shoppers interacting with e-retailers via an increasing number of new front-end channels - connected devices; Amazon dash buttons; smartwatches; interactive mirrors et al. Who knows how we will shop, digitally, in five years’ time? 

Going headless is a way of preparing for the future of shopping today, because it
can integrate ecommerce with new technologies as they arise.

Less complicated and therefore better performing multilingual stores

A big reason why retailers are starting to cotton on to a headless CMS is that the traditional applications provide limited possibilities for multilingual stores, which big online retailers need if they’re serving a regional, continental or even global market. Yes, there are plugins like Langify, but these tend to affect site speed, and speed is important for SEO reasons; having a faster ecommerce site gets you a better Google ranking and thus more hits on your website, which in turn drives up SEO. 

Using only the traditional big platforms, retailers can still set up separate ecommerce stores for the different language groups they cater to, but it involves a huge amount of extra work because every single change, alteration and update to one ecommerce store must be repeated across all the others. 

A headless ecommerce store, on the other hand, is able to use a separate CMS for its translation purposes; one that is far more powerful than you would find in the traditional ecommerce platforms. Going headless allows online retailers to more easily handle multiple languages without having an effect on overall site speed. Headless ecommerce can also incorporate multiple currencies quite seamlessly.

Overall, going headless gives you more control over your website

Traditional ecommerce platforms are easy to use, which means that almost anyone can start and run an online store. By contrast, headless ecommerce is a more advanced and technical property to set up, but once running it gives retailers more control over, and freedom in creating, their ecommerce offering. It sets them free from the limits of the big platforms’ pre-set front-end templates. It also gives them multiple front-end contact points with customers, beyond the limits of their own conventional website.

With headless ecommerce, retailers can:

  • Deliver content on any channel, with APIs enabling their ecommerce platform to integrate with current or new additional sales channels, as they pop into existence.
  • Quickly incorporate new technology into the front-end without any impact on,
    or requirements from, the back-end.
  • Set up multilingual, multicurrency online stores relatively quickly and update them with less time required.
  • Be more in tune with the customer by leveraging their previous purchases or behaviour through A.I. to make helpful recommendations in a variety of ways - a very basic example of this is when streaming services say Because you watched…  or You might also like. More detail on the benefits here

The benefits of headless e-commerce versus traditional:

Headless ecommerce

Traditional ecommerce

Setting up multilingual, multicurrency online stores relatively easy

✔️

Better performing (faster) multilingual stores

✔️

A flexible customer experience

✔️

Requires little time to incorporate new technologies

✔️

Uses the best-in-class specialized software

✔️

Delivering content to any channel from one CMS

✔️

Requires little development skill and time

✔️

Compatible with most “plug-and-play” or “click-and-drag” CMS software 

✔️

Use of predefined design templates

✔️


Here’s a visualisation of how headless Shopify architecture differs from the traditional Shopify Plus architecture: 

Using the traditional Shopify architecture for one country, with all content being managed within one Shopify store:

Headless E-commerce on Shopify Plus - traditional store setup

Using the traditional Shopify architecture for multiple languages and currencies, with content being managed across multiple Shopify stores:

Traditional Shopify architecture for multiple countries

And now, headless. Using Shopify’s headless e-commerce architecture for multiple countries, with all e-commerce data being managed in one Shopify store, while all textual content and imagery - for all languages - are managed on one Contentful platform (or a similar headless CMS):

Shopify Plus Headless Setup with Contentful and Gatsby

What are the trade-offs of headless ecommerce?

Yes, indeed there are. For one thing, moving across to headless ecommerce involves a bit more investment in terms of infrastructure and developer capacity; converting an online store from traditional to headless means restructuring and rebuilding the flow of data from the back-end to the front-end from scratch. That takes specialist developer skills and time, both of which cost money. 

A variety of apps can be installed into your headless site but it’s no longer simply a case of
“plug-and-play” or “click-and-drag” - every single update to change the front end experience of your store (excluding basic images and texts) will require a developer to implement thanks to the added complexity of headless architecture, and the need to know which are the most suitable apps to build your front-end. 

With headless commerce you’re free to create the front-end you really want but, but will you know how to? You no longer have the simple ease of using the big platforms’ app stores and theme editors; with freedom can come confusion, unless you have enough CMS and developer knowledge. You may need to look externally for that, which is where specialised s like ours - Europe’s leading Shopify Plus partner - can help.

In general, headless ecommerce is considered to be a good option for mid-size or large retail brands operating in multiple territories or countries and with a decent level of development expertise  hand; small one-person retailers shouldn’t yet see it as a rational investment unless they’re at a point of readiness to “scale up” and are prepared to spend money to make money.

 

Who’s riding the crest of headless ecommerce?

E-commerce is a very competitive space in which retailers must offer an integrated, flawless and uniquely customised shopping experience across a range of channels - so who’s getting it right?
If you’re thinking of going headless, these are some great case studies to examine:

  • Everyday brands you may not have known were headless include Nike; Lancome, and Under Armour.
  • Also look into Ace & Tate; Glossier; Daniel Wellington; Stox Energy, Miista and Easywalker - check out the subtle movement when you interact with a specific product. Stox, Mista and Easywalker are the work of our team here at Ask Phill. The tech stack we work with to create such sites is Shopify Plus, Gatsby and Contentful.
  • Online shopping will soon be predominantly mobile-based and Rothy’s, for example, has transformed its mobile site into a progressive web app (PWA’s load fast and twin website-level performance with the look and feel of a mobile app).

In looking at some prime examples of headless ecommerce, we mentioned our “tech stack” - the term simply refers to the combination of software products and programming languages developers use to create their web or mobile applications across the front- and back-end.

After more than a year of thorough research and experimentation, our team at Ask Phill settled on a preferred tech stack setup (Shopify Plus, Gatsby and Contentful). With this setup in place,we have been able to build content-rich digital flagship stores for a number of clients in the fashion, lifestyle and beauty industries. But why did we choose these three in particular?

We feel Shopify Plus is the most reliable ecommerce platform for us to use for our clients: it’s a cloud-based SaaS solution so it’s cost-effective (and it has a decent price point compared to other enterprise platforms like Salesforce or Magento); it constantly innovatives and it has a very open, headless-friendly API structure.

We use Contentful for CMS because it comes without predefined content models, so we have freedom to create the content models ourselves. It has a very uncluttered UI and provides site users with a beautifully simple user interface. Finally, it’s platform-agnostic, with an API that lets us push content in an instant to mobile, web or almost any other platform that comes along.

Finally, there’s Gatsby(JS); a site generator which can build a website incredibly fast, using only static files, rather than dynamic. It’s incredibly flexible for developers, and comes with a host of optimisations under the hood. All a developer’s favourite site- or app-building tools are incorporated, like React.js; Webpack, JavaScript, CSS and more. 

These are currently our team’s favourite tools to use in combination but, of course, we always have our eye on the radar for the next evolution in headless ecommerce technology, because the nature of technology is constant evolution.

So, are you ready to go headless? 

Yes - if, after consideration, you meet most of these points:

  • You feel it’s important to be prepared for future technological innovations within the retail space and to position your brand in the public eye as being “ahead of the curve”.
  • You’re either currently, or will soon be, catering to customers via multiple languages and multiple currencies and do not want the hassle and additional costs of running separate stores for each (let’s be honest, who would?).
  • You see headless commerce as an important strategy for providing your customers with a multi-channel content-rich experience that will engender ongoing loyalty and purchasing. Consider this: 80% of customers say that the experience a company provides is as important as its products and services, according to SalesForce
  • You understand the challenging nature of making the transition from traditional to headless commerce and the future maintenance involved - and can rely on sufficient internal or external development manpower.
  • You can accommodate a higher developmental cost, whether internally or by partnering with a headless ecommerce agency like ours. Keep in mind that the design and development of a headless solution on Shopify Plus starts around €45.000,- for a “standard” eCommerce platform - the price goes up depending on the complexity of functionalities.

If we’ve piqued your curiosity around headless ecommerce with this article and you’d like to explore the exciting opportunities it unlocks - or have a few more questions before you’d consider going headless - don’t hesitate to reach out to us:

You can do so by filling in our contact form, Email us at phill@askpill.com or call us on +31 (0) 20 261 5080. 

If you want to read more detailed information on headless e-commerce on Shopify Plus, check out our article focussed on the advantages of this setup in order to create multi-language Shopify Plus Stores and understand why we started building e-commerce platform using the Headless Shopify Plus architecture.

Have a project in mind?

Let's connect