Published
Aug 10, 2022
May 24, 2023
min read
Headless commerce is having a renaissance moment, emerging as a popular development methodology to build faster and more performant eCommerce sites. But what is it exactly, and why is it the lingo du jour of every eCommerce director? To answer that question, we have to look at how eCommerce storefronts have been traditionally built. Shops were tied to monolithic systems that control both the frontend (what the shopper interacts with) and the backend (responsible for business logic, order management, inventory, etc.). Headless technology decouples that experience by separating the two systems and connecting them with widely available APIs, a way to transfer data back and forth.
To put it simply, headless operates by having a backend speak to the frontend via a system of APIs passing through vital store data that interacts with your shop. As a brand, you have more creative and technical flexibility when you separate the two technologies and build something entirely from the ground up.
Headless operates by having your backend speak to the frontend via a system of APIs passing through vital store data that interacts with your shop.
‘Headless’ architecture is often referred to as a “composable” approach where you can pair the best technologies together to support your business. In other words, separating these technologies frees you from having a single technology or “monolithic” (i.e., Shopify or BigCommerce) dictate how you build other aspects of your business. Monolithic systems can help companies run leaner and simplify operations with a unified platform running everything from content, payments, inventory, and marketing but offer less flexibility, especially as a business matures and expands globally. Conversely, a composable approach pairs the best tech across the spectrum for your business. Ultimately you get to choose the tools to shape the needs of your business.
There are considerable benefits to going headless, starting with technological advantages. Since you own your own technology stack and choose the tools to build your eCommerce storefront, performance will naturally improve. Many headless framework providers like Pack and Shogun offer their solution as a PWA (progressive web app), an app-like experience on browsers. One of the most significant advantages of PWA builds is faster page speeds and reliable performance, meaning less likelihood of buyers bouncing after visiting a product or collection page. Headless storefronts tend to perform faster with page speed load times, even across mobile devices. When you’re handling millions of page views per month, this has considerable benefits for any brand.
Customizing your content strategy gives you more flexibility around URL structures, metadata, and overall information architecture. Monolithic platforms like Shopify lack custom editorial workflows for larger teams. A separate content management service such as Contentful or Prismic allows brands to create content for each sales channel and publish content seamlessly with a series of API-powered content modules. Paired with a custom headless front-end, an independent CMS is a powerful way to control targeted messaging and have a unified brand voice across all channels.
Another advantage of headless beyond the custom tech stack is the limitless possibilities in designing your own storefront. With headless, you can use proven frameworks like React and component-driven design to power unique experiences for each type of customer. Create high-converting landing pages for all kinds of customers. Design beautiful shopping experiences with complete flexibility beyond the rigid nature of pre-built themes you typically find in Shopify or BigCommerce. Of course, many brands are perfectly fine using a custom theme built for their needs within a monolithic platform like Shopify, so you have to weigh the pros and cons before committing to a fully customized store design on a headless build.
For many smaller brands, the initial investment for migration and full buildout of a headless project is a prohibiting factor for not making the switch. Because of the technical nature of headless builds, you have to invest in development personnel, agency partners, and increasing software costs, which can go up considerably from your annual marketing budget.
Your engineering team is responsible for the upkeep and quality of your storefront. Headless builds require ongoing maintenance beyond the initial buildout. Unlike Shopify, headless sites require an independent approach to care and future updates.
Brands selecting an agency partner should also factor in the initial investment for a complete headless migration and buildout. Headless projects can cost anywhere from $150k-$400k+ (note: pricing is entirely relative to each market served) depending on the agency partner you select to help you with migration, design, and engineering.
Typical plug-and-play app ecosystems in the Shopify app store don’t work as well for a headless solution. Many require reworking or rebuilding integrations, often costing the brand more in the development time needed. Think of the apps you need to run your business across upsells, product reviews, UGC, insurance, customer support, and many other systems your brand needs to connect to fully power your eCommerce experience. All of those connections require reworking through APIs. Luckily, headless frameworks like Pack or Shogun offer many prebuilt integrations, saving brands considerable time and money.
Yes and no, depending on who's asking. Let’s say you’re a sub-$20M DTC brand with a small product catalog and simplified business model of selling directly to customers via a Shopify storefront. Headless is overkill and unnecessary for growth. Plus, you wouldn’t want to deal with an engineering team to maintain and update your storefront.
For global brands with differentiated business models (wholesale distribution, D2C, retail & POS, etc.), complex business workflows, and dedicated teams across content, marketing, and engineering, headless might be right for you. There’s no right or wrong answer, but you should consider the cost-benefit analysis before taking the leap. It requires investments across technical planning, architecture, and dedicated engineering teams to manage and maintain everything.
LaunchPack is a headless as a service platform built for growing brands on Shopify Plus. It combines a powerful product experience and content management system in one easy-to-use solution.
DesignWhat defines great product design and why is it essential discipline for companies to adopt?
ShopifyShopify recently rolled out a massive set of new product updates and announcements for their latest Winter Editions. As Shopify Partners, we’re incredibly excited to get our hands on some of the latest announcements and test out new platform capabilities. Here’s a list of some of our favorite new product updates.
