5 Common Types of Headless Ecommerce Implementations

Buzzword alert, what’s headless again?

While the term “headless” has been used to describe a variety of architectures, they all share the idea that there are two different architectures: the body, which refers to the database, server, and applications that work behind the scenes to organize data (product descriptions, pricing, and order histories), and the head, which consumes this data and is only concerned with visually presenting the interface (sometimes called the presentation layer”) to the user.

To simplify, the head (or “front end”) dictates what the user can see and the body (or “back end”) holds the information that supports it.

In a traditional system (or “headful”, if you will), these two architectures are delivered together as one entity. Like Ikea flat-pack furniture, everything you need is bundled in one convenient package, including the instructions and an allen wrench. Sometimes that package is already sitting on the server (static); while other times it is created on the fly by an application (like Magento or OroCommerce) or by a SaaS platform (like BigCommerce). The server then autonomously delivers files with formatted information (HTML) and formatting instructions (like CSS) to the viewer’s browser.

The concept of headless implementation, however, refers to a system that manages and organizes content without the need for a connected presentation layer. Like the horseman from Sleepy Hollow these systems are riding around town without their heads.

In this article we’re going to talk about 5 common types of headless implementations used in ecommerce and the advantages and disadvantages of each.

Headless Ecommerce Implementations Are Anything But Sleepy or Hollow

As always, your individual use case should drive the type of headless implementation you choose.

Progressive Web App (PWA)

A progressive web application takes the part of the code that deals with routing (the paths to content) and presentation (creating the HTML or DOM) and pushes it to the browser. This self-contained browser-application sends and receives data (not formatted for viewing) to and from the back end application.

Progressive web apps can be great for stores that have large numbers of shoppers on mobile devices because they:

• Economize data transfer. PWAs only have to load once: when you first visit a PWA-based web site. Then, when you change pages or views, it only asks for a small amount of raw data. Because most PWAs use a special language that allows them to receive precisely the data they need (GraphQL), they can really speed up a high-traffic site for those with slow connections.
• Smooth out poor connections. While you’re on mobile (especially if you’re in a vehicle), your connection to the internet goes up and down, as you have undoubtedly noticed. The PWA’s service worker smooths out those interruptions, giving your users a better experience.
• Look and feel like phone apps. You can even save them to your device so that it launches like an icon.

Downside to PWAs

PWAs are most effective when they can pre-load most of the data the user will need. This doesn’t work well for sites with very large catalogs because it is impractical to save that much data on the user’s device. Also, if you make changes to the site more often than the user visits, the user may have to reload the application each time they visit the site, which essentially defeats the purpose. Finally, checkout requires an active connection so, even if the user’s experience is fast while shopping because of cached data, checkout might be long.

Content Management (CMS) Integrations

CMS integrations are especially useful when your user experience is highly content-driven and you have invested in a WordPress or Drupal implementation. Razoyo has done a number of these implementations where clients love their WordPress site and have marketing and merchandising staffers who need to be able to make changes to the site quickly. The pain of changing everyone over to another system is just too much for the organization to handle.

Integrating an ecommerce platform like Magento or BigCommerce to an existing CMS can make it quicker and easier to implement ecommerce. It also allows your content and media folks to continue using the tools they love on WordPress. Another advantage that we just experienced is that you can change front ends (we recently migrated this site from WordPress to Hugo and then just plug ecommerce back in, easy peasy. No need to migrate products, accounts, order histories, or any of that!

Downsides to Headless CMS

The biggest downside is that there usually is not a way to easily set up your catalog, categories, and other product-related data without putting work in on both ends. BigCommerce has a nice solution to this for WordPress in the form of a plug-in and Razoyo has launched several of these sites.

Social Platform Integrations

Another form of headless is used when your users are primarily shopping on a social network, like Instagram or Google. While social media platforms have offered ways to promote products by connecting to your catalog and promoting them on your social media account in the past, customers can now purchase them directly from some social sites or apps.

Downsides to Social Checkout

The biggest downside to this option is losing some control over the user experience and analytic data. While the platforms offer data, it may not be the analytic data you are most interested in.

The shopping experiences you can create with these platforms are also limited to what the platform offers. However, they are generally in line with the overall experience of the platform and, thus, the best.

While some merchants may decide that social platform selling is their primary customer experience, most will find it works best in combination with more traditional ecommerce platforms.

Just A Buy Button

The embedded buy-button is one of the most flexible solutions offered. The button can appear on any page: a blog post, a content page, in a video, or anywhere you can embed a script tag online.

Technically, this is the solution Razoyo uses on our web site. BigCommerce provides the ecommerce platform and handles the checkout process. Since we only sell a few items in our Shop Online, it works out well. However, embedding buy buttons on a large scale could be tedious.

Dedicated Front End Platforms

Recently, a few platforms have emerged that are front-end only platforms. ShoGun, for example, was a company offering drag-and-drop design interfaces for Shopify and BigCommerce that has now launched ShoGun front-end.

Account management, pricing, catalog management and transaction processing are all handled by the back end as with the other types of headless. However, they allow you to add additional content and media to products and pages in a way that is very easy for designers and non-technical users to get the hang of.

The downside, of course, is that the additional data and designs are now in a paid, third-party system. That being said, I believe this is what the future holds. Front end platforms will specialize in their specific process while back end systems will do the same.

In conclusion, the days of the compelling need to have a back end system that serves up a front end are over. Long live the headless website!

images by Heidt of Media