What is headless commerce?
If you’re a business owner with an ecommerce site that’s growing sales and want to take your success to the next level, you may wonder what all this jargon means. What you want is a headless commerce definition that clears the confusion.
If you haven’t spent the last decade building technologies to support digital commerce, the term “headless commerce” may seem opaque. And you’re not wrong. Dirk Hoerig, a very technical founder of Commercetools, coined it in 2013, describing it as follows:
“Headless commerce basically describes a technical pattern where you separate all of the experience layers in a shopping application — the product information, photos, videos, add-to-cart button, everything that you see and interact with as a consumer — from the underlying functionality.”
Do you get it now? If not, it’s okay. Dirk even admits that if he knew headless commerce would take off as it has, he would have chosen a better name.
So let’s explain it again in simpler terms.
A headless ecommerce platform simply separates the backend system of your ecommerce store from the frontend presentation layer, i.e. what your customer sees. What this means is that the logistics and operations of your store, like order processing, payments, compliance, inventory, and more, are all managed separately from the actual digital storefront. This is what’s called a decoupled architecture.
Why does this matter for you and your customers? Creativity.
Consider your ecommerce store right now. You likely have a website where you create pages about your brand and your products. For visitors ready to buy, you have product sections and pages that let them view and checkout from within your site.
This is great. You’re participating in the way commerce is evolving in the 21st century. But just like most technology in the 21st century, change happens fast, and those that stay ahead of the curve tend to be the first to reap the rewards. Just having a simple ecommerce site that looks like every other one doesn’t cut it anymore.
What this means is that ecommerce sites today have to compete on all fronts to win sales and keep growing. The little details matter. Site speed, colors, copy, visuals, interactions and animations — everything needs to be on point today if you want to stand out and win, and headless technology is one of the best ways to make it happen.
How headless commerce works
For brands, using a headless commerce platform and separating (or “decoupling”) their backend logistics from their site empowers them to take their digital customer experience to the next level.
We say “digital customer experience” because you’re not limited to a website when you use a headless commerce solution. You can reach customers on:
- Smart TVs
- Video games
- Voice-activated virtual assistants
- IoT platforms
- And more…
Likewise, your website can go leaps and bounds past generic ecommerce sites. Instead of using templates for your product pages, you can create fully customized shopping experiences. The limit really is your creativity (and your technical prowess, but more on that later).
The main takeaway is that certain processes must happen when you sell to customers. There has to be technology to process the order, update inventory levels, manage shipping, and more. If all the processes take place separately from a single ecommerce website, you can sell virtually anywhere, or anywhere virtually.
Now that we have a clearer understanding of headless commerce, let’s compare it to traditional commerce models.
Headless commerce vs. traditional commerce
Flexible frontend development – you don’t have the platform’s limitations or inefficiencies to implement your vision
We’ve emphasized that taking your ecommerce business headless gives you more freedom. You have more control to craft the digital experience your customers have with your business. Let’s illustrate it with an example.
Take Nike: Browse their site. Look at how their home page is laid out. Then take a look at some of their more creative pages that outline collection lines. Perhaps you even want to go to their customizer, where you can build your own custom shoe. The power behind their site is that it’s headless. They’ve also leveraged the freedom that headless provides to dominate the mobile-first buying market. They were fast movers, recognizing that most consumers were using mobile apps. So Nike took their mobile experience to the next level by reimagining what a buying experience on your phone could look like. It’s no surprise they’re recognized as leaders in the industry.
Now take, for example, a site not made with a headless commerce platform. Jim Taylor Saddlery makes hand-made custom horse saddles for real cowboys and people that just want to feel like one. Their site is made with a simple WordPress template and a Shopify-templated ecommerce store. It covers the basics of an ecommerce store, but it doesn’t stand out from the rest.
The difference between headless commerce platforms and traditional ecommerce platforms is that you can create a fully customisable frontend. You’re not limited to a content management system’s (CMS) capabilities or premade templates.
In this way, you can customize and personalize your site the way you want it. Now, let’s unpack that further.
Customization and personalization – powered by the extensive use of APIs in headless commerce
With a traditional site, you can build a site how you want it, as long as it stays within the confines of what’s officially possible. But if you want to add your personality to your site and truly differentiate yourself from competitors, you can use a headless commerce architecture.
As we covered, headless commerce separates the core functionalities of a commerce site from the CMS. When you want to connect the two together and, for example, add a way for customers to checkout, you do so using application programming interfaces (API).
An API is a middleman that handles the complicated instructions that connect the front end and back end. Let’s take a real-world example of a restaurant to illustrate what an API is, as shown in the video below.
What’s the point of using an API? One of the strongest benefits of using APIs is site speed.
Speed and adaptability – traditional commerce sites (built with builders) are heavier and slower
The strength of a headless commerce site is that you only use what you need to get your site up and running. What does that mean? You don’t need fancy templates or plugins to customize your site.
A web designer may argue that they don’t need a headless site to make a snazzy site — but what they will need is a lot of bloated code and functionalities that put a strain on your site speed. And if you want a site that performs well and drives sales, you need a fast site.
Google takes site speed seriously. They don’t want to serve their users clunky, slow sites. It’s widely known that Google punishes sites that are slow.
Headless commerce doesn’t have templated frontends
Another key difference between headless commerce and traditional commerce sites is how you build your sites. Often, with traditional website builders, you can’t create a commerce experience without using templates or plugins to get started. Rarely do people hard code a site from scratch using HTML and CSS.
That overconfident web designer in the last section may build an identical site to yours, but customers will notice that yours loads incredibly fast.
The APIs you use can swap out the information on the page that needs to change when a customer clicks something. It only pulls what’s necessary, where a regular site would need to reload an entirely new page. These kinds of implementations are commonly referred to as progressive web apps.
Headless requires technical know-how to build
A key strength of headless commerce is that you can build your site exactly the way you want it, while still keeping the core functions of a commerce site intact. To harness this strength, however, you do need a knowledgeable developer to build your front end.
The developer can use different headless platforms to build the front end and use their APIs to connect it to whichever commerce service they use.
Once the developer does the custom work, they can package up different sections to act as templates for non-technical team members like marketers. It’s common to have friction between marketing teams and developers because marketing teams want to move fast and make changes to the website, where developers are fielding different requests and have to prioritize.
When developers “itemize” website sections, it’s straightforward for marketers to go in and create new pages or re-use sections. They can do so without the risk of breaking anything, either. They can ask developers if they need a different section created for a page. But that request is much easier to execute because the developers don’t have to sweat creating an entirely new page.
In this way, headless commerce reduces friction between marketing and developers.
Headless commerce: how you can benefit
Speed (lighter code, better user experience)
One of the benefits of headless commerce sites is that they’re lean. And speed is incredibly important to conversion rates. As many as 47% of customers expect a website to load in two seconds, and 40% will abandon a website that takes more than three seconds to load.
Likewise, if you want to attract customers through organic channels like Google (and you should because 39% of the total ecommerce traffic comes through search engines), you need to have a fast site. Your search engine optimization (SEO) efforts are severely stunted if you have a bloated site with a plethora of plugins and applications installed.
Lastly, if you want to deliver a high-quality custom experience without causing any friction for customers, a headless solution is how you do it. Their ease of use with your site will quickly be reflected in your conversion rates.
Security (reduce dependency on other services)
Another core strength of using a headless solution is its security. As mentioned, since headless sites don’t need third-party plugins or templates to function, they are safer.
Usually, if you want to build a headless commerce site, you just need the platform to manage the commerce backend and APIs. Many also offer front-end applications, but if not, you can use common front-end content management systems.
You only need two platforms. Compare this to a regular website that may require 30+ plugins to manage everything from security to form builders, email integrations, and creative animations. With so many third-party applications that have their own privacy policies, it creates vulnerabilities for your business.
Full coverage (built specifically for your use case)
When you use templates or pre-built sites that aren’t headless, you have to carry around the extra weight of things you don’t need. But with a headless content management system and commerce platforms, it includes everything that you need for your site and nothing else.
You don’t need a fancy or expensive templated site or a library of Shopify subscription apps, BigCommerce subscription apps, WordPress membership plugins, or Magento subscription plugins to offer creative interactions. You can build them yourself with your developers and deploy them, confident that they don’t bring extra code baggage with them.
As you build out the different sections of your website, you’ll find yourself reusing sections and changing the content. This way, it’s easy to make changes while still staying on-brand. You don’t have to worry about messing up the spacing or sizing of different elements.
The point is your ecommerce platform is your own and only includes the tech stack you want and need.
Maintenance speed (solve your issues faster)
With headless commerce, solving issues is much easier because the application is light. And because APIs call forward the information from the backend to populate what customers see, if something isn’t working correctly, it’s easy to tie it back to the API delivering the information.
This is in contrast to a page that crashes, not giving any indication of what’s wrong.
Likewise, if you’re reaching out to support from your commerce platform, you don’t need to wait for support representatives to answer, then validate your problem, create a ticket so someone solves it, and then put you in a queue.
With a headless commerce system, you can quickly diagnose issues and get them solved by your own team. Further, while not unheard of, issues are less likely to arise with a properly implemented API, developed in such a way to be easy to deploy new pages or edit existing ones.
The gist? With headless commerce, you’re building a more resilient online business.
Vision and freedom (don’t wait for features; deploy updates independently)
A traditional commerce site relies on the platform hosting it to release the features it needs to run. All traditional commerce platforms will have the essentials, but as we’ve mentioned, if you want to get creative and build a unique site that stands out from the competition — both from design and performance — you’ll need to adopt a headless commerce approach.
If you want particular features for your site like unique animations or dynamic product pages, you don’t have to wait for a traditional platform to build them. You can enlist your developers to build them out internally and deploy them quickly.
In other words, you don’t need to wait for a feature to be delivered. Instead, you can add whatever you think is necessary at any point in time.
While traditional commerce certainly isn’t going anywhere, and may be suitable for the needs of a small business starting out, headless commerce will be the future for those looking to evolve. Indeed, once you get big enough, you’ll want more customization options, especially in the fast-moving world of ecommerce, where winners are quick to experiment and strive to maintain a futureproof competitive edge. Look to the winners in the commerce space, and you’ll find companies like Nike, Under Armour, Kirkland’s, and more.
Companies like these can stay ahead of the game because they’ve ditched traditional commerce platforms in favor of a faster and more creative way to keep up with how customers buy. By adopting a headless CMS system, progressive web apps for mobile, and even custom applications for IoT devices, these brands are reaching customers in new and creative ways. And they’re winning because of it.