• London

    Sweeps Building, 6-7 St Cross Street,
    London. EC1N 8UA

  • New York

    419 Park Ave South, 3rd Floor,
    New York, NY 10016

Headless Commerce Using Shopify Plus

Growth Secrets|05.08.2019

What is Headless Commerce?

An e-commerce website is generally made up of the part a customer sees (the “front end” or “head”) and what the business uses to manage the website (the “back end”). More often than not, both the front end and the back end are powered by the same system, such as Shopify.  This makes the day to day running of things easier, but it also means you are using one system for multiple purposes, rather than a single-purpose system for each business need.

This is normally an advantage; having one system makes everything simpler to run. But sometimes you need a level of extreme flexibility on the front-end that is not catered for by the back-end system. To achieve this, you need to use two or more systems that are optimized for each function. Information is passed between systems via an Application Programming Interface (APIs). This concept is known as headless architecture because the e-commerce platform has no ‘head’ and instead communicates with the front-end via APIs.

An API is essentially a set of functionality and features which process and output data - allowing applications to communicate with one another.

Headless in one sentence

Headless architecture is the decoupling of the front-end and back-end of an application with each end powered by different technologies and interconnected via a series of APIs, thus allowing the total optimisation of each system without compromising on the exchange of data between platforms. 

Reasons to consider Headless

Migrating your website to a headless architecture is expensive because you are building and structuring your flow of data from the back-end to the front-end from scratch whilst introducing and maintaining multiple systems. If you want to go down the route of headless commerce, the pros need to outweigh the cost, time and effort. Headless isn’t right for everyone, so we wrote this guide to help you decide if it’s right for you.

You want design/UX flexibility

This is usually the reason given by merchants wanting to explore headless. It’s true that headless affords more flexibility when designing your customer experience but it would be similar to say building your own house is flexible. Yes, you have free reign, but at an enormous cost and undertaking. You need to know that you have the knowledge and experience at your disposal to make a success of these complex architectures.

Constraints aren’t a bad thing; they are needed if you wish to benefit from systems that have been built over many years to be best-in-class. Shopify is a good example. Yes, there are sometimes limitations, but these are few and far between and don’t affect 80% of businesses. Even when they do - usually a Shopify Partner like us can help out.

With that said, you can build exceptional experiences with a headless architecture. The ‘presentation layer’ can be built in a lightweight, modern front-end framework and built from the ground up for your exact use cases. 

You have extreme performance requirements 

Modern front-end technologies are lightning fast as they don't rely on the traditional way of sending and receiving information from a server.  

It’s the difference between buying a BMW or Audi, versus buying a Ferrari. Yes, you will get extreme performance, perhaps more than you need. It will be more expensive and not just at purchase but for all ongoing maintenance. It’s not always convenient for the day to day and everyone you know will gossip about it.

Using headless as a solution to optimize performance can be extraneous because, with all e-commerce platforms, including Shopify, there is a lot that can be done to speed up a store. It's only worth going down that route once and performance should be a secondary way to justify a headless build.

You want to expand your digital touchpoints 

Customers expect to interact digitally with your business and that used to just mean you needed a website. Now there are many other digital touchpoints to consider: Progressive Web Apps (PWAs), mobile apps, marketplaces, billboards, POS, voice search and so on. Having the content, catalog and business logic re-used across all these touchpoints makes sense, which has led to the rise of ‘headless’ platforms for both commerce (product catalog, order management and so on) and content (managing content that should be replicated across all platforms). 

Commerce platforms are sometimes called commerce-as-a-service, an example would be Shopify or Magento with a headless configuration. Content management systems are sometimes called content-as-a-service, examples are Contentful, Prismic and maybe even Adobe Experience Manager.

You need a PWA

Progressive Web Applications (PWAs) are another big trend and are difficult to achieve using a Shopify theme.

A PWA is a way of providing native app-like features through your website, without the user having to download an app through the app store, such as Google Play or Apple store.  Instead, the website in the browser asks the visitor if they want to download the website as an app. With a PWA, your website...

  • Works offline, for the most part, after the initial load using Service Workers.
  • Can be added as an ‘app’ icon on a smartphone home screen with a customizable splash screen.
  • Is extremely fast as most content is pre-loaded.
  • Can trigger native push notifications, which can be used for marketing purposes.

PWAs rely on traditional web technology such as HTML and CSS to power the styling of content but also relies heavily on JavaScript to power the content delivery and offline interactivity. We use Nuxt.js for the website front-end, which includes an out-of-the-box PWA implementation - which uses Node.js and Vue.js as dependencies. There’s a lot more to be said on this, but not in this post. What you need to know is that the same modern technology that is used to power a headless implementation makes developing PWAs easier on Shopify.

You want to explore the Internet of Things 

Another trend is ‘the Internet of Things’(IoT). The internet becomes connected to everyday devices like your fridge, car, thermostat, watch and so on. 

In e-commerce, most of the innovation in IoT will relate to the supply chain, such as GPS tracking of deliveries so consumers know exactly where their orders are and when they’ll arrive. 

It could be that IoT will change how consumers shop… imagine a future where your fridge can order your milk and your interactive mirror is an interface to order clothes.

An e-commerce platform that sits at the center is a huge advantage. Going headless is a way of centralizing e-commerce features, data and logic such as CRM, orders, payments and inventory into a ‘wheel and spoke’ architecture, where all back-end systems and customer touchpoints revolve around a central e-commerce platform.

Reasons to Avoid Headless

You want to keep project costs low. With all the extra workshopping, development and complexity, you’ll be dealing with a much larger project.

You want a phased launch. With headless, you need to build out the whole architecture including the front end in one go. Traditional Shopify builds allow you to get started with an MVP website that you can build on whilst trading.

You don’t want a high ongoing cost of ownership. You'll be maintaining a codebase that requires a deep skill set, therefore you will need agency help or a developer with experience in Node.js and React/Vue as well as the Shopify ecosystem.

You want to utilize the Shopify App ecosystem. You will be able to integrate apps into Shopify but will require a custom approach based on unique requirements - there is no such thing as a  "plug-and-play" install. The apps will also need to have APIs for all the features you want to use.

You and your team like the theme editor in Shopify. You will no longer be able to use the WYSIWYG editing, versioning and previewing features within Shopify. Instead, you’ll be changing content on your content platform and previewing through a sandbox version of your website.

You want to upgrade your platform with new technologies every few years. Shopify Plus is always rolling out new features, such as multi-currency. These will not be available to you unless you build them into your front-end at a further cost. This also includes all the other tech components in your architecture like Nosto, Yotpo, and other front-end marketing solutions.

Traditional Vs Headless Architecture

Traditional E-commerce Architecture

What the customer sees (the “front-end”) and what the business sees (the “back-end”) are often part of the same system, one such as Shopify. Content management; the updating of pages and products, and commerce management; the updating of orders, all happen in the same system. 

Bigger companies have the option to use an ERP (Enterprise Resource Planning) system as a single source of truth across the organisation which helps with operations such as purchasing. The website connects via API integration with the back office layer.

Headless E-commerce Architecture 

In the brave new world of headless, the multiple ways in which a customer interacts with your business sit together on what we call the ‘Customer Experience Layer’ aka the CX Layer.

Content management and commerce management happen in specialist systems within the Service Layer.

Then for the bigger businesses, the CX and Service Layers integrate into the Back Office Layer. Usually, this is an ERP system that is used for inventory management, CRM, purchasing, finance and production.

CX Layer

Website - the ‘front-end’ aspect of the build constituting of all the HTML, CSS and JavaScript along with any frameworks used for generating complex interactive functionality. These might include frameworks like Next.js (React) or Nuxt.js (Vue.js) to scaffold a modern web application. 

PWA - Progressive Web App, a type of superfast mobile-first application delivered through as a website using traditional web technology. This is an alternative to a standalone app you would typically install from the App Store.

Native mobile app - any native iOS / Android apps you have.

POS - Point of Sale, so any in-store systems used for handling customer orders.

Voice commerce - a nascent example of new touchpoints customers might have with your business. Headless architectures allow you to build new touchpoints separately to the content and business logic present in the service layer. 

You may have many other digital touchpoints. Amazon and other marketplaces you sell through would also sit on the CX layer. Your commerce platform then connects to each, so you can enjoy one place to maintain your product catalogue despite selling through multiple channels.

Service Layer

CMS - Content Management System, in this case, a headless one (also known as a content platform or content-as-a-service). This is where content such as pages, navigation, store settings, blog posts and API permissions are defined. It is also where the content is added, edited and removed. The content can be pulled through to each touchpoint on the CX Layer, for example; a returns policy page on the website could share the same copy as the POS receipt and the iOS app.

E-commerce Platform - Shopify, Magento and Salesforce Commerce Cloud are all examples of e-commerce platforms that support headless. Customers, orders and products are managed within the platform and in some cases, it’s where payment is processed. Shopify’s native checkout can be used even in a headless architecture.

Back Office Layer

ERP - Enterprise Resource Planning, the main component of the Back Office Layer is an ERP like Netsuite or SAP.  It is a ‘source of truth’ for things like inventory levels, locations, customer data, purchasing and finance. Smaller businesses may use their e-commerce platform as a lightweight back office.

Shopify as a Headless Architecture

When you have a headless Shopify implementation, what you’re effectively doing is dismissing the theme layer, therefore you need to know the implications of this:

No more theme editor

With headless, you are foregoing the simplicity of the native Shopify theme editor, which means:

  • No WYSIWYG editing
  • No theme previewing
  • No native customer accounts
  • No access to navigation link lists
  • No ‘sections’ functionality, unless you build it into your front-end
  • No version control via different themes
  • No plug and play Shopify Apps

You’ll need to integrate services like Nosto, Klevu and Yotpo directly to your front-end by building integrations to their APIs. This is a considerable task.

Building from scratch

We talked about headless being the equivalent of building your own house. It requires a lot more thought, experience, planning and a considerable amount of back-end and client-side knowledge of Shopify’s API than going with a conventional architecture.

Building a custom front-end brings great flexibility but it does mean rebuilding functionality you’d expect to be out of the box in a normal e-commerce set up.

Without building a custom app, you’ll have none of Shopify’s customer creation or management functionality. This customer experience would need to be built from scratch by leveraging the Shopify APIs. You’ll also have to build a custom and tested implementation for storing the contents of the cart and then passing them safely to the Shopify checkout. Obviously, this involves a lot of risks since it is not trialled by Shopify developers and the resources they have at hand to test edge-case scenarios will be much higher of that of a typical agency.

There are many other examples, where your website will require complex custom integrations which you normally wouldn’t need with a traditional e-commerce architecture. The extreme control you get from the front-end does bring benefits, but it’s down to your overall e-commerce strategy as to whether it’s worth it.

Should you go headless?

There is a lot of buzz around headless right now, which is not helped by the number of e-commerce agencies pushing it as a solution to everything. Headless is appealing to System Integrators and agencies because a) it’s fun to do new things and b) the systems are extremely expensive to build, so great for revenue.

If you are a brand with the means and needs to do this, it can be a good way of rationalising platforms and optimising known customer and operational pain points. As a rule of thumb, a brand needs to be doing $10m online before going down this route, not least because a headless enterprise-level e-commerce project is going to come in at $100-500k.

Making a success of headless commerce with Shopify

If you’ve read all the above and still want to do it, here’s how to make a success of your headless project:

  • First, define “done” what does a successful project look like?
  • Workshop the user journey, for both your customers and your own e-commerce team, involve as many of your stakeholders as possible. 
  • Decide on the systems to integrate and the languages/frameworks to use.
  • Create QA/UAT/load/pen testing plans, ensure all areas of the solution are fully scoped with user stories and acceptance criteria.
  • Ensure you have the necessary access to resources such as professional services contacts, development resources and developer documentation for all systems and APIs.
  • Ensure that all internal business stakeholders such as finance/marketing/content teams have confirmed their needs are met  BEFORE you build anything.
  • Ensure you have a dedicated team and a clearly assigned project leader. 
  • Headless projects are likely to include many suppliers, so choose your team management and communication tools carefully, consider software such as Asana or Jira.
  • The same goes for stakeholders - any e-commerce project touches many parts of your business so pay special attention to communication.

Check out our favourite examples of headless commerce powered by Shopify here.

Try Shopify for free today!

How can we help?

Get in touch to discuss your e-commerce ambitions and we’ll help you get there.

Get in touch