Headless Commerce is the Future of Mobile-first Shopping

Headless commerce is predicted to go from buzzword to tech stack staple this year, so it’s the perfect time to brush up on the considerations that should be top of mind when thinking about going headless.

Table of contents

Introduction
What is Headless Commerce?
Benefits of Headless PWA
Examples of Headless Commerce in Action
How to Get Started with Headless Commerce
Envision your Customer Experience With Headless Commerce

Headless commerce is predicted to go from buzzword to tech stack staple in 2021 and beyond. As your organization starts to think about leveraging a headless solution to reach goals and meet customer expectations, there are some fundamental questions and considerations that you need to understand.

Use this article as a foundational tool as you graduate from traditional eCommerce solutions to deliver a modern customer experience. This guide covers the basics, including the technical components of a headless build, how both your team and your customers will benefit, and how to get started.

In this article, you’ll learn:

• The fundamentals of headless commerce, such as frontend and backend components, including progressive web applications (PWAs) and static site generation.
• The benefits of a headless PWA (plus real-world examples) including boosted eCommerce KPIs, tech stack flexibility, and cost benefits.
• Key considerations to think about when you are ready to go headless including resource planning and build vs. buy.

Introduction

Standards are constantly evolving for online shopping. Today, an easy checkout process, personalized experiences, mobile optimization and so much more are what’s expected. Buying behavior has also changed drastically in 2020. More people are shopping online because of the pandemic, creating new traffic patterns, demand, and strain on web stores and supply chains.

New technology continues to set the bar higher for merchants, and customers take note of who’s paying attention. Shoppers don’t want to feel as if they’re a number: Over 70% of customers say they expect companies to understand their unique needs and expectations, a Salesforce report found. And in the era of D2C, consumers value transparency and two-way communication in addition to their expectation of a seamless shopping experience.

It all circles back to one thing: creating the best customer experience possible.

Headless commerce enables retailers to do just that—provide a better customer experience. Using a decoupled frontend and backend allows merchants to be flexible, communicative, and consistent for their consumers.

But before you can determine if headless is right for you, it’s important to understand how it can benefit your brand. In this guide, we’ll explore what headless commerce is, how it can solve some of the biggest challenges eCommerce brands face today, and how to move forward with your own headless build.

What is Headless Commerce?

Headless commerce is an eCommerce website architecture that consists of a separated frontend and backend. Your website’s frontend elements, or your storefront, run separately from the backend systems, including your eCommerce platform, OMS, CRM, and more.

With headless commerce, retailers can make updates to the frontend of their storefront without changing backend codes or updating the system. The same can be said for the reciprocal: Retailers can make changes to the backend of their site without interfering with the frontend. This means any adjustments to your site or tech stack are less risky and allow you to stay ahead of the curve without enduring costly upgrades or long downtimes.

The frontend and backend of your site communicate through an application programming interface (API), making this fluidity possible. The BigCommerce definition of an API is: “A set of functions that allow applications to access data and interact with external software components, operating systems, or microservices.” APIs allow developers to communicate with various systems and make “calls” and “requests” to send and receive information or to manage data.

Merchants leverage headless commerce for a variety of reasons:

• Improved eCommerce KPIs and performance
• Tech stack flexibility and tool optionality
• Mobile-first optimization that works across devices
• Maximized frontend customization

Many of these benefits can be enhanced by the components of your headless build and the type of storefront you choose.

Components of a Headless Build

Several entities fuel the backend and multiple-output possibilities for the frontend of a headless build. These components make it successful:

Backend Components

Order and customer data management are key components to success for all eCommerce stores, headless or not. You can approach this in your headless backend by leveraging an eCommerce platform such as Shopify Plus, or in a custom build with individual backend services, including an order management system (OMS) and a customer relationship management (CRM) system. By selecting a headless commerce solution that allows you to keep your existing tech stack you can preserve your data management, processes, and checkout functionality.

Your content management system (CMS) and product information management (PIM) solution are a vital part of your backend. Product and content management will be key to editing the pages and product information your customers interface with.

Your hosting service is what delivers your storefront to your customers’ browsers. Hosting services take your website’s underlying HTML, CSS, and JavaScript files and make them available online.

You likely have a slew of third-party applications that allow you to provide enhanced functionality and a better user experience to your customers. Those apps will feed into your headless build as well. By leveraging APIs, the headless build may even override the page load speed “slow down” effect often associated with third-party apps that use a heavy codebase.

Frontend Components

Your frontend is what your shoppers interface with. One of the biggest draws to headless is that it allows you to manage one frontend codebase for all devices. There’s no longer a necessary codebase separation of mobile, desktop, and so on.

Custom Storefronts

The ability to customize your storefront to fit your unique brand and your customers’ needs is another prominent advantage of headless commerce. Custom storefronts function independently. It can offer a higher level of customization as a result because it’s not held to rigid templatized storefronts.

Many merchants get to a point in their business where the templates that were once appealing need to evolve for a brand to meet its potential. This is especially prevalent in growing teams as more people work on the website daily. Without customization, likely, you’ll eventually run into a clunky user experience or process bottlenecks.

Customization allows for your shoppers to have the most logical interaction with your catalog and brand identity, beyond—or building on—what a template can offer. Shopify Plus is an excellent example of an eCommerce platform that can support you even as you grow. For instance, when your brand reaches a need for customization, you can keep your Shopify Plus backend and leverage a headless commerce platform such as Nacelle to enable a brand-specific interface on the frontend only.

Progressive web applications (PWAs) are one of the up and coming types of storefronts that enable a smooth, lightning-fast experience for your customers and eradicate some of the pain points associated with running a website.

Progressive Web Applications (PWAs)

More customers than ever use their mobile devices to shop. In fact, global eCommerce revenue is projected to reach $3.56 trillion by 2021, with an average year-over-year rate of over 33%.

Headless commerce combined with a PWA storefront enables retailers to provide the experience of a native mobile app, without the dissuading factors that could prevent people from using it, such as the need to download an app and use storage space.

Progressive web apps are facilitated through the web using technology like HTML, CSS, and Javascript. It takes the best features of native mobile apps and makes them accessible through a browser. PWAs are mobile-first, yet can be accessed across all devices and browsers.

Some PWAs harness advanced functionality to offer an even more innovative experience for shoppers.

Historically, when a new visitor clicks to go to a website, the request is sent to a server that gathers the HTML and sends it back to the user’s screen. Each page change is another server request and each of these requests can require several seconds of load time.

Enter static generation. To combat these long load times and repetitive requests to the server, static generation uses statically generated HTML files of the website before visitor requests come in. As a new shopper requests the website, they are met with a fast-loading, prebuilt site without needing the server to configure it.

If your store sees a large number of site traffic consistently, surges in visitors around Black Friday or Cyber Monday, or if you partner with another retailer or influencer that could result in a high volume of traffic, a headless PWA using static generation is a great solution to manage the traffic influx and site performance.

PWAs can also use a single page application (SPA) which allows an entire storefront to load only once and never again. This gives the app-like feel with sub-second page load speeds. PWAs that have the functionality of SPA and static generation decrease latency and can change pages within milliseconds.

Benefits of Headless PWA

Before the creation of headless commerce, there was a clear need for an alternative system that allowed for greater agility, more customization, and faster load speeds. Let’s take a look at a few of the ways headless commerce solves some of the most significant pain points associated with traditional eCommerce architectures.

Improve eCommerce KPIs With Better Webstore Performance

If page load speed, product discoverability, and overall performance across devices have been a longstanding issue for you, and you’ve tried the quick fixes, adopting a headless commerce solution can mitigate those challenges.

With headless commerce, retailers have the ability to produce the excellent customer experience that’s expected today. The reliable, ultra-fast functionality that decreases the latency of your website will directly impact your eCommerce KPIs.

In fact, a one-second delay in page response can cause a 7% reduction in conversions, and a report from Kissmetrics found that 52% of customers say that fast page loads are essential to their loyalty. On top of that, if customers can browse through your product catalog quickly and seamlessly, your average order value (AOV) is also likely to increase.

Headless commerce improves key KPIs, including:

• Conversion Rates
• Average Cart Sizes
• Average Order Value (AOV)
• Return On Ad Spend (ROAS)

Not only will a slow website negatively impact your shopping experience and drive away customers, but it will also harm your SEO ranking. Back in 2018, Google announced that site speed would become a ranking factor in mobile search, meaning a slow website could hinder traffic coming to your site.

Tech Stack Flexibility & Optionality

Flexibility and optionality in your tech stack are key parts of reaching your brand’s potential. It’s also the gateway to creating easy scalability as you grow in the future. A flexible tech stack consists of various microservices that are the best in their respective field, from various vendors who are completely dedicated to the success of their respective tools.

A flexible technology stack is a best-of-breed tech stack. While the tools in your tech stack can often integrate nicely with each other in this scenario, code is not shared and an issue with one will not affect the others. You can pick the best options and make changes to your tech stack without risky overhauls and migrations. This allows you the freedom to easily add and eliminate tools without seismic aftershocks to the rest of your operation. And as you grow, the fluidity of your tech stack allows for easy scalability.

An all-in-one package that’s trying to be everything, simply cannot compete with the level of excellence found in best-of-breed tools. All-in-one solutions are—as the name suggests—one solution or suite of services from the same vendor. Typically, smaller organizations or merchants new to eCommerce gravitate towards these one-stop-shop bundles. However, larger companies or businesses planning to significantly scale in the next 3 to 5 years will likely be better served by a best-of-breed approach to their tech stack.

A best-of-breed headless strategy also enables your development team to use a modern workflow. This includes popular tools like version control, unit tests, and CI/CD pipelines that allow your team to use the best technology to build the website your brand and customers need. One decision that will completely shape the trajectory of your headless commerce strategy is deciding between an all-in-one or best-of-breed approach.

Cost Benefits

The upfront cost of a headless commerce solution will depend on how complex your build is and the maintenance required. However, a headless solution could be less expensive over time without costly data migrations or system upgrades and maintenance.

Traditional eCommerce architectures are typically on the lower end of the cost spectrum because they can be built without custom features. However, there’s a high risk of technical debt that could make them cheaper, the short-term solutions more costly in the long run. Even in the short term merchants may see cost savings with a best-of-breed approach as they offload obsolete apps and reallocate that budget.

Mobile-First Functionality

Mobile has quickly become a leading channel in eCommerce. As of July 2020, mobile accounts for more than half of global website traffic. Plus, as media buying on platforms like Facebook and Instagram encourage more mobile traffic, this channel is only getting bigger.

Moving forward, all the tools in your tech stack should be optimized for mobile on some level. If you’re putting marketing dollars towards ads on social media, you’ll want to prioritize this as soon as possible. Your ads can get people to your site all day long, but if visitors bounce immediately upon arrival because of an underperforming website, your return on ad spend will plummet.

Maximum Customization

For D2C merchants to be successful, they need to be able to not only tell their brand story but have it resonate with their audience. An alignment of beliefs, values, and products will ultimately garner lifetime customers and brand loyalists. Be it a message or product, customization is a key part of this equation.

Headless commerce is prime for building customization opportunities through custom storefronts and the flexibility for your team to make updates to your frontend without a need for developer assistance on the backend. This is especially prevalent with your CMS. Third-Party CMS solutions exist to make management and operation intuitive for most, not just code-savvy individuals.

In addition to curating your store in a way that perfectly displays your catalog, an accessible CMS supports automation and scheduled publishings. Meaning, gone are the days of inconvenient manual updates for events such as sales that start at midnight.

Is Headless Commerce Right for Your Store?

Although headless commerce is flexible and accessible on any device, it’s not necessarily the right solution for every brand. When deciding if headless is right for you, consider the following questions.

Does your storefront struggle with high volumes of traffic or slow page load speeds?

• Are you focused on keeping your long-term costs down?
• Are you working on optimizing for conversions?
• Are you striving to be mobile-first?
• Have you outgrown your existing tech stack’s capabilities?
• Do you want to be able to manage content without a developer?

Examples of Headless Commerce in Action

For growing retailers, headless commerce is a secure solution to accelerate growth and create dynamic customer experiences. Here are a few real-world examples of headless commerce in action.

Ballsy

Ballsy is a D2C men’s skincare line that offers a variety of products, from body wash to boxers. The brand was growing rapidly with their Shopify Plus storefront coupled with various JavaScript widgets and third-party apps.

These integrations slowed the site down tremendously. As we know, slow websites hurt conversion rates, and Ballsy needed a solution that was not only going to speed up the site’s latency drastically, but that would continue to grow with them.

• 28% increase in conversion rate
• 1s website load time
• 22 days from inception to launch

After launching their new Nacelle-powered storefront with PWA technology, the men’s skincare brand increased its conversions by 28% in three weeks. This jump in conversions was due to improved page load speeds—from 15.8 seconds to 1.4 seconds— and a decrease in page-to-page load speeds—from 16.5 seconds to 42 milliseconds.

Best of all, customers received a faster shopping experience with the same storefront they’ve been browsing since the beginning. Because Nacelle integrates with 30+ eCommerce apps and various platforms, Ballsy matched their new storefront with their old storefront design exactly.

Something Navy

Something Navy, a popular fashion, lifestyle, and media brand, launched a new D2C eCommerce storefront using headless PWA technology.

Before going headless, Something Navy partnered with Nordstrom to bring an exclusive clothing collection to fans. The highly-anticipated collection debuted on Nordstrom’s website, and within one hour of launching, crashed the website due to high traffic volumes.

After this same scenario happened on four separate occasions, it became clear that an alternative resolution was needed. The brand needed a website that could accommodate high traffic volumes while offering an excellent customer experience to their eager customers.

• $1M sold in 30 minutes after going live
• 100K unique sessions
• 34ms page-to-page load speed

Adopting a headless architecture was a no-brainer for the fashion brand. After launching their new Nacelle-powered headless PWA, within 30 minutes Something Navy sold over $1 million in clothing and supported 100k unique sessions without a glitch.

In addition to accommodating high traffic volumes, the new Something Navy storefront saw a 1.4-second website load speed and a 34-millisecond page-to-page load speed. Not only is Something Navy’s new eCommerce site incredibly fast, but it’s equipped to handle an influx of sessions and future collection releases.

Privacy Pop

D2C brand Privacy Pop is an innovative player in the sleep space, offering indoor bed tents for adults, children, and even pets seeking seclusion during bedtime, naptime, playtime, and alone time.

Once I discovered how headless commerce could impact our eCommerce success, I knew we needed to go headless.” – Danny, CEO, Privacy Pop

Privacy Pop was driving traffic to the site with its marketing efforts, but once visitors landed on the site, they were met with a slow and underperforming website. Privacy Pop’s product pages were extremely slow to load because of the long list of product colors and patterns in their catalog.

• 21% increase in conversion rate
• 9% increase in AOV
• 190% uptick in pages per session

The Privacy Pop team sought out Nacelle after researching the detrimental impact slow page load speeds have on eCommerce KPIs including catalog exploration. After launching a new Nacelle-powered headless PWA, Privacy Pop saw a 21% increase in conversion rates, an 8.7% increase in AOV, and a 190% uptick in pages per session with an impressive 38ms page-to-page load speeds.

How to Get Started with Headless Commerce

If you have decided headless commerce is the right solution for your brand, the next step is deciding how you will approach your build. There are a few key considerations at this phase, including choosing between a “build or buy” approach and assessing your development resources to decide if they have the capacity to handle implementation and maintenance.

You will need developer support, either by outsourcing the task to an agency or by building in-house with your development team. It’s also important to note that when going with a headless commerce platform, not every solution has the same requirements.

Backend Infrastructure: Build vs. Buy

When adopting a headless commerce approach to your store, there are two options to choose from: a custom build or a headless commerce platform.

A custom build is a self-contained entity that’s completely separate from the eCommerce platform you currently use. This separation offers a high level of customization as merchants have full control over their build’s look and functionality.

However, few brands taking on a build for the first time fully account for the backend system that needs to be in place to be successful. And the resources required to complete and maintain the project are almost always underestimated.

Custom headless backend builds can get merchants into a deep pit of technical debt and stunt the growth of companies if they don’t have the proper infrastructure. The right infrastructure is key for addressing requirements such as server rate limits and optimizing data structures for a PWA frontend. Skipping or slighting this backend codebase component will prevent you from reaching your desired outcome.

For example, if you use static generateration, you’ll need to address rate limits in your build. Most eCommerce platforms are geared towards the traditional formula of website traffic, where there’s one request every time a user views a new page. With a static build, you’re leveraging many API requests at once to preload the website so the user can browse with sub-second page load speeds. If you haven’t addressed rate limits in your backend build, your site cannot refresh to deliver the most up-to-date pregenerated files.

Data structures also require a thoughtful approach. Headless Commerce Platforms like Nacelle, have one API for your PIM, CMS, and other entities. If data structures are not properly handled in a custom build, it could require multiple APIs and add complexity and confusion to your codebase.

A custom headless backend infrastructure builds typically requires a minimum of 5,000 developer hours, not including unforeseen roadblocks and project delays. Maintenance costs to support the build’s consistency will require 3 full-time developers and more optimized data structure requirements such as internationalization, and content and commerce merging. And this is all on the backend, there are additional requirements for building a complementary scalable frontend.

Outsourcing and using a headless commerce platform supply your store’s proprietary indexing system with a high-performing connection to your backend. This gives merchants the ability to scale with ease and ensures that your customers have a smooth experience from start to finish.

Headless platforms like Nacelle can work with your existing eCommerce store, and work with the tools your dev team needs, like the GraphQL API or connectors to Vue and React frameworks.

PWA Frontend: Agency vs. In-house Developer Team

No matter what you decide to do for the backend, it’s critical to have the right team in place to launch a successful headless build including the interface your customers see. From leadership buy-in to the right partner—such as agency or developer partners— assembling your team is critical. Even if you have a rockstar dev team in-house, you may decide to loop in an agency for frontend support depending on your build and brand’s unique needs.

It’s essential to assemble a dev team that understands the nuances of your specific headless build for maintenance purposes, updates, and more. Agencies have access to developers who have extensive experience with successful headless builds. These teams are experts at understanding the brand and business requirements necessary for success. Leading agencies for frontend headless builds include Zehner Group and Di! Agency.

Another bonus of partnering with an agency is the project management component. The organization and timeliness of experienced agencies create an easy path to project success.

Consider Data Migration

Adopting a headless commerce platform may seem daunting—and in many ways, it is a big project—but it’s important to note that not all headless commerce platforms have the same capabilities or requirements.

Data migration is something every dev team is concerned about when it comes to shifting store builds because it comes with its fair share of risks, such as data loss or incorrect transfer. Many headless solutions require a data migration of some kind. This requires dev teams to determine when and how best to migrate data in a way that mitigates errors and missteps.

A headless commerce platform such as Nacelle, on the other hand, does not require data migration of any kind. Merchants can bring product information from whatever eCommerce platform or backend systems they currently use to their new headless build. Nacelle, specifically, uses Nacelle Connectors to bridge your data so there’s no need to migrate to a new system. This allows for a faster go-live, zero data migration risks, and your team can continue with the processes and tools they know.

Envision your Customer Experience With Headless Commerce

Customers are shopping in ways we never thought possible, even just a handful of years ago. Now more than ever, it’s imperative that retailers stay on top of user experience trends. eCommerce merchants that prioritize the customer experience will see a significant ROI.

The headless architecture is an excellent solution for retailers who are not only looking to increase their conversions but also want to stay (or become) agile for whatever the future of retail holds. As the technology for eCommerce continues to evolve, and new sales channels develop, the right headless commerce solution can keep up with changes and updates.

The best part is, adopting a headless commerce platform isn’t as complicated as it might seem. A solution like Nacelle makes going headless easier and far less time-consuming and risky. Because Nacelle works with your tech stack—instead of requiring app and software changes—you can quickly get the headless experience and keep the tried and true tools you use currently.

Source: Nacelle