Shopify: What exactly is ‘headless’ eCommerce?

Shopify Headless Ecommerce
Back to all articles

Let’s take a minute to throw the buzzwords and industry jargon aside. What exactly does ‘headless’ eCommerce mean, and how is it relevant to your business?

The technology community loves a buzz phrase - and eCommerce is absolutely drowning in them. Whether it’s AR, VR, AI, ML - there’s a new silicon valley brainchild knocking at the door constantly, so it’s no wonder that we’re all in a bit of a spin. The new kid on the block is ‘headless’ - it’s a phrase that’s all over LinkedIn, being thrown around flagrantly in meetings, conferences and strategy documents.

There appears to be a bit of a drought of accurate, simple information on headless development though, particularly in the context of eCommerce. So, let’s shine some light on what headless development is first - and then, how it’s being used to build headless online stores.

The theory: Where did the term ‘headless’ come from?

So, to properly understand the term ‘headless eCommerce’, we need to take a short trip into how modern web development systems work.

‘Headless’ is not an eCommerce term

Although not exclusively, web systems are traditionally made of three, closely coupled components that work in tandem with each other. These components will often live within the same single system architecture, and they’re usually:

  • Piece 1 - A database system - This is the piece that houses the website’s raw data. In basic terms, this generally (but not always) a table-based system that stores the actual system information that is being created, read, updated or deleted.
  • Piece 2 - A logic system or framework - The logic system is the portion of the system designed to connect the database and the front-end system together - and it’s the slice that controls creating, reading, updating and deleting information depending on the instructions that it receives from a user, (passed to it through the front-end or templating system). It can also interact with other, remote data sources - not just the database in it’s own architecture, which it is usually very closely coupled with.
  • Piece 3 - A front-end, or templating system - This is the visual system that is actually rendered to the world. When you access a website via a browser, you’re looking at the data passed from piece 1 (database) by piece 2 (logic framework) through to piece 3 (templating system) and then requested and rendered by the web browser.

In most traditional builds, all of these things combine under a single framework (for example, Magento, Django, Laravel - or as a SaaS product, Shopify) and development needs to be run in a way that works with the patterns of that particular framework, and within the restrictions of its native capabilities. To help finalise this point, all web systems experience some degree of what we call ‘coupling’ - which is where one part of a system is linked to, or dependent directly on another. To ‘decouple’ elements is to implement them in a way that they can interact together, but logically, don’t depend on each other, which makes software systems much more flexible into the long term.

(A caveat here - for software engineers, the above is going to come across as an incredibly simplistic reduction of how web applications work. I know this, but anything more might muddy the water right now!)

So, now we know how standard web applications tend to work, we can put it simply:

Headless development is the practice of separating a web system’s user-facing templates from its data systems, into one or many freestanding, independent front-ends. This is done to enhance website performance, create simpler data access for any new systems that consume that data, and remove all of the structural, design and flexibility restrictions imposed by traditionally coupled systems.

Congratulations! It’s a mouthful, but you can now accurately explain to your senior management team what headless web development is. Next, we’ve just got to learn why it might be useful.

The practice: What’s the business benefit of going headless?

‘I just took a 4-minute, principles of web systems lesson, but I don’t know what for’. I hear you. Let’s talk about the practical business benefits of running an online store through a headless architecture.

Advantages

  • Flexibility - One of the most obvious advantages is the increase in design and development flexibility. Removed from the other parts of the system, the front-end component can look and behave in a way that is completely unique. Limitless opportunity for amazing digital experiences.
  • Agility - Businesses with headless websites can react to market demands, and implement ideas with a dimension of agility that just doesn’t exist for non-headless systems. This is because the data doesn’t live connected to the front-end - it can be accessed and repurposed within the same (or different!) systems without having to roll an entirely new system.
  • Other digital ideas - Multiple ‘heads’ can access the same back-end for different use cases. If you want to roll out a mobile app or new service, you can just write another front-end to connect to the logic block, and access it in a way that is completely appropriate to the new implementation. A mobile-app might not need the same data as the rest of the suite.
  • Performance - Splitting the front-end system out from the back-end means that you can build blisteringly fast user experiences. These front-end files take very little to render if built properly, so page load is absolutely rapid, and that really counts when customers want to spend big.
  • Development speed - Once the system is built, front-end development can actually be pretty rapid. It’s not dependent on any of the other parts of the system, so changes can be pushed through isolated from the logical parts - introducing a hugely streamlined technical workflow. It also means that the front and back ends of the system can be worked on in parallel in a way that separates the two concerns - good for stability and speed.

Disadvantages

The advantages are awesome - so why isn’t everyone running headless commerce systems? Simply put: money, time and qualified engineers.

  • It requires a rethink - Make no mistake, this a complete rethink for a development team and their technical culture. It’s driven by a deep commitment to a wider technology strategy, and is much more forward looking than just building a successful online store. It’s the central approach to answering a question like “How are we going to ensure our technology is faster, more flexible and more commercially competitive in the next 12 - 36 months?”.
  • Technical expertise - It takes a team with deep domain expertise to understand how exactly to build a high-performing, quality system that is split into different functional software components. These are not highly available skills, but they’re in demand, which makes them expensive to buy and maintain.
  • Highly custom - The solution that you’ll end up with is highly custom to your business - and although it’ll be perfect for purpose, any move away from the generic in software introduces both technical and people debt. Be aware of this commitment to your new platform into the future.

And as you can imagine, all of these things take time. And technical time costs. So headless commerce, really, is for high-volume, competitive businesses with deep pockets. The returns can be huge, but they’re generally proportional to the high initial investment.

Headless with Shopify

So, how do we build headless systems with Shopify? There loads of different ways to get this right, but the fundamentals look like:

  • Back-end access: You access the Shopify back-end through its excellent API. Currently this is a mixture of REST and GraphQL endpoints - but into the future, Shopify is committing specifically to GraphQL. The differences between REST and GraphQL are well documented, but not necessarily relevant here.
  • Logic & routing: If you want to introduce custom, sophisticated logic and routing, you’ll need a layer that controls this and passes the data through to the front-end templates. The complexity of this depends on your final use case, and how exactly each storefront and project needs to consume data from the back-end. An example of this might be a system that overrides Shopify’s pre-determined URL structure, which can only be done in a separate system.
  • Front-end templates: Front-end templates can then be constructed for any suitable product - be this a custom storefront, a mobile app, a smart device - all of which receive their relevant data through the custom logic system.

Should my store be going headless?

As is the answer to a lot of software questions - it depends. There are concrete cases for and against taking the headless route on your new project. In some cases, it’ll revolutionise your development workflow - but in others, the juice just ain’t worth the squeeze.

Here’s some of the reasons that might mean a headless approach is the right one:

  • We can’t work well with other technologies: It’s a huge headache to fold in new technologies or third-party systems.
  • We can’t work as fast as we need to: You’re moving more slowly than the competition because your systems are too tightly connected and inflexible.
  • Our system isn’t very quick, and we can’t make it quicker: Your storefront is sluggish and your analytics say that users leave before they’re supposed to.
  • We have problems creating highly customisable experiences: You can’t customise to the level expected of your price-point, sector or product.
  • As it stands, a mobile app is prohibitively expensive to implement: You can’t imagine building a native app - the data is too hard to access and it’s going to take a huge budget to implement something of quality.
  • We can’t be forward thinking - You want to build a unique experience completely separate to your current thinking (IoT products, smart technology, wearables) and your current setup means these projects all need to completely stand alone.

Any combination of the things above might indicate that headless could introduce advantages for your eCommerce strategy.

Who else has gone headless with Shopify?

Let’s take a look at some of the trailblazers who have already fully committed to headless commerce with Shopify:

Some very different applications by big players across a number of sectors. It’s real corporate buy-in and a meaningful statement of intent.

In closing

Hopefully that shines a light on what exactly ‘headless’ means and the context that it works in, in both a general sense and in Shopify’s world. To learn more about Shopify’s commitment to headless commerce, check out their mission here.

At By Association Only, we work on eCommerce projects for merchants across the world. We’re specialists in platform migration in the luxury, fashion and cosmetics sectors. To find out more about how we work with Shopify, get in touch at info@byassociationonly.com.