Brands across all industries are daydreaming about how a headless architecture might impact their ecommerce operations. In response to rapidly changing consumer demands, headless architecture offers a unique combination of powerful tooling and development freedom that often seems too good to be true. While these can be benefits of going headless, far too many organizations commit to costly and time-consuming headless builds without knowing exactly what they’re getting themselves into.
To help you decide if migrating to a headless architecture for your ecommerce storefront is right for your business, we’ve gone back to the basics and unpacked everything you need to know about going headless.
What is headless architecture?
Headless architecture decouples the front-end experience from the back-end operations of your ecommerce storefront. Headless architecture is often referred to as “API-first” since the front and back end communicate to each other through an API layer.
The biggest advocates for headless architecture cite a few common reasons for migrating. First, going headless can enable you to create multiple front-end experiences that cater to a variety of customer touchpoints. On the back end, merchants can use their preferred CMS, CRM, or DXP on an almost plug-and-play level. There’s also (usually) no vendor lock-in, which allows you to swap services out on the front and back end whenever your business needs evolve.
How headless architecture works
The easiest way to explain how headless architecture works is to revisit the more traditional, or monolithic, approach to building an ecommerce storefront.
A monolithic architecture operates off of a single codebase, which means that any change you make to the front end directly affects the back end. In some cases, this means that integrations with social media platforms or other third-party vendors may not work seamlessly with the rest of your ecommerce experience. In others, you may not be able to make the changes you want on the front end of your monolithic setup because of restrictions on the back end.
Unlike a monolith, a headless architecture allows you to make changes to front end elements such as the user interface or design without impacting the back end. This decoupling can give you a much clearer path to creating custom ecommerce experiences that are dynamic, performant, and can scale with your business as it grows.
Why go headless in ecommerce?
Back in 2021, three McKinsey analysts wrote that omnichannel experiences are essential for a retailer’s survival. To say that the demand for omnichannel experiences has only intensified in the time since would be a massive understatement.
In response, merchants are stepping up to the challenge by building increasingly sophisticated tech stacks that allow them to build ecommerce experiences that are not just omnichannel, but also more personalized than ever before. These experiences are also expressive across different buyer touch points on mobile, web, and voice, just to name a few.
This is something developers have craved for years. Headless architecture gives them implementation flexibility and full control over a modular, customizable architecture. Developers can also extend their capabilities beyond tightly coupled, out-of-the-box limitations that you’ll find in a more traditional architecture. While making this transition requires a lot of legwork from teams across your entire organization, there are several tangible benefits to leveraging a headless architecture for your ecommerce storefront.
What are the benefits of headless architecture?
The biggest advocates for headless architecture tend to cite benefits such as improved site speed, increased creative control, and flexibility to integrate with your existing services. In fact, we cited all three of those benefits in a previous article. However, we also believe that the biggest benefits of headless architecture extend far beyond those features.
At Shopify, we believe the benefits of headless architecture fall into one of three categories: connectivity, optionality, and innovation.
Connectivity. A headless platform enables you to use systems that are designed to talk to each other and seamlessly integrate with third party systems.
Optionality. Headless architecture allows you to choose which capabilities you use and determine how you want to build your commerce stack.
Innovation. Both the connectivity and optionality of Shopify allow you to innovate with the most scaled solutions in the market, and pursue your own innovation roadmap.
These benefits are compelling, and they’re often tempting enough to make even the most level-headed CTO want to drop everything and start migrating to a headless architecture immediately. But before you make that decision, you should take a closer look at the potential pitfalls of doing so hastily.
What are the risks of headless architecture?
The benefits of headless architecture can be limitless. But there are also a few risks associated with going headless that contradict what many vendors promise to new customers. While they may not be deal-breakers, it’s still important to understand what you’re signing up for when you commit to a headless ecommerce build. Let’s discuss a few of the biggest risks of headless architecture for your ecommerce business.
Increased complexity
Headless architectures can introduce increased complexity compared to traditional monolithic setups. TechTarget explains that rather than running a query and putting the results into a form element, headless applications need to assemble that information and then store it in an API.
In response, your client-facing front end has to make a request, authenticate the response, interpret the results and render the text box on the user’s display. All of this requires more code at each step of the process, which increases the likelihood for errors along the way.
Performance overhead
As your stack of headless applications becomes more sophisticated, so too do the number of API calls and data transfers. This combination can result in latency and reduced responsiveness, while also increasing the chance of creating failure cascades.
To mitigate these risks, merchants need to dedicate more resources to maintain a headless infrastructure than you may need for a monolithic architecture. Excessive API calls and data transfers can result in latency and reduced responsiveness. Before you add a service or application to your stack, take a closer look at how much infrastructure overhead it may add to your team’s workload.
Increased development and maintenance overhead
Managing multiple front ends and ensuring consistency across them can increase overhead and require additional development resources. While headless architectures can streamline development in certain aspects, managing multiple front ends and ensuring consistency across them can introduce development and maintenance overheads.
Going headless with Shopify
It’s no secret that a fully custom headless build can give you a unique level of development control and freedom. It’s even less of a secret that a totally blank slate can lead to ecommerce experiences that deliver below-average performance and create more headaches for your customers.
Shopify’s headless solutions have empowered thousands of merchants to choose the right tools for the job while also extending their capabilities with a composable stack of technologies optimized for commerce. Our headless solutions include:
Storefront API, Shopify’s headless API layer
Hydrogen and Oxygen, Shopify’s official development stack for headless commerce
Storefront API
Storefront API is the foundation of Shopify’s headless platform. It’s agnostic to all frameworks, devices, and service platforms. This gives developers the freedom to use the tools they already love and experiment with new technologies.
Storefront API gives merchants access to the full breadth of Shopify’s ecommerce capabilities, including:
Optimized cart
Product and collection pages
Search and recommendations
Contextual pricing
Subscriptions and other B2B functionalities
Developers often use Storefront API to build with frameworks such as Next.js, Gatsby, and Astro. However, development teams can use any development framework they prefer, deploy to their favorite hosting service, and then hook into any best-of-breed systems that have an API.
Hydrogen and Oxygen
Shopify’s official development stack consists of Hydrogen and Oxygen. Together, they provide a clear path for building dynamic and performant headless commerce sites on Shopify that can scale infinitely.
As we alluded to earlier, Hydrogen is built on top of the React-based Remix framework. Hydrogen is an opinionated development stack, but it’s also modular, which enables you to accelerate your development timelines without making compromises on performance and maintainability. Hydrogen also includes a rich library of commerce-optimized components, hooks, and utilities that are preconfigured for Shopify’s APIs.
Ecommerce storefronts built with Hydrogen can be hosted by any cloud hosting provider you prefer. However, the easiest and fastest way to deploy a Hydrogen storefront is Oxygen, which is Shopify’s globally distributed hosting solution. Oxygen is rendered at the edge with more than 285 points of presence around the world, offering development teams full deployment control. It’s also included in any Shopify plans at no extra cost and guarantees peak performance and uptime across the globe, while keeping costs down for businesses.
Key business considerations for going headless
Beyond any technical considerations, it’s critical for merchants to understand the business implications of going headless. Although we’ve unpacked several benefits for migrating to a headless architecture, many Shopify merchants find they can meet their customers’ needs with an Online Store with Liquid.
To help you determine which is best for your business, here are just a few of the traits of merchants who may choose to build with Liquid over tearing things to the studs with a headless storefront.
Online Store with Liquid
Although this is not always the case, we find that an Online Store build is best for merchants with little to no internal development support and inflexible development timelines. These merchants generate significant revenues, but also not enough to justify a full headless build.
Overall revenue: $250–100 million in revenue
Online revenue: Less than $20–50 million in revenue.
Internal development resources: Typically utilizes an external agency for all development services
Budget: Less than $1 million
Timeline: Less than 6 months
Headless Storefront
Merchants with large technology budgets, strong internal technology teams, and flexible development timelines are more likely to choose (and benefit from) a headless storefront. They also usually generate significant revenues that make it much easier for the organization to absorb the costs of a full headless build.
Overall revenue: $50–150 million in revenue
Online revenue: Greater than $50–100 million in online revenue
Internal development resources: Established internal technology and product teams with a strong vision and appetite for solving complex problems
Budget: $1 million or more
Timeline: 6 months or longer
Make the leap into a headless future
Deciding to adopt headless architecture can be a turning point for your business. Although the path toward a headless future isn’t straightforward, headless architecture can give you an unmatched level of development and design control that empowers you to deliver the right content to a wide variety of customers. More importantly, headless commerce enables you to deliver those experiences to customers when they need them the most.
Ready to explore a headless build with Shopify? Get in touch.
