Headless Commerce Explained: Definitions, Use Cases, and Roadblocks

Predicting the future is hard, but we can always follow trends to get an idea. For eCommerce, the trends reveal that providing a frictionless customer experience is a must for companies that wish to stay relevant in 2021 and beyond.

In fact, according to Gartner's Magic Quadrant for Digital Commerce, "by 2022, organizations using multiple go-to-market approaches for digital commerce will outperform non-commerce organizations by 30 percentage points in sales growth."

To successfully use multiple go-to-market approaches, brands should consider following the headless approach. With headless commerce platforms becoming more common as we approach technological maturity, it has become easier for brands to deliver converting commerce experiences cost-effectively. 

The thing is that the omnichannel approach, and the convenience it brings, have shortened the customers' attention span. For instance, remember when Amazon started selling through Amazon Echo devices, and consumers swooned and marvelled at Amazon's innovation? 

Now, customers are used to it.

The good news is that not all eCommerce brands have remained stuck in their website-shaped shells. Some have embraced headless commerce platforms like Gumroad to sell, upsell, promote, entertain, and even use digital signage, in-store augmented reality apps and more.

In this article, we're diving head-first into headless commerce. This post also ties in with a webinar we recently conducted with Snipcart and ZipWhip that shows you how to build an eCommerce website. You can find the video below. 

The Three Types of eCommerce Platforms

• Traditional eCommerce (Or Monolithic): Traditional eCommerce platforms were the first platforms in existence and linked both hardware and software as well as backend and front-end, making it impossible to customize websites after a certain point. 

• Commerce-led Platforms: This platform uses a commerce platform like Shopify Plus as a front-end that enables checkout functions but leverages APIs and other tools like ERPs and CMSs to manage customer data and inventory.
  
  
• Experience-led: Here is where most headless commerce solutions lie. This platform decouples the eCommerce platform from the presentation layer, enabling eCommerce stores to use a CMS like Agility CMS, a progressive web app builder, or another front-end solution to build better customer experiences.

What is Headless Commerce?

Headless commerce architecture is similar to headless CMS architecture because a headless commerce solution can store, manage, publish, and pull content from other applications headlessly. In other words, you can pull in content from anywhere and push it out to any front-end.

With commerce in the equation, retailers and wholesalers can benefit by extending their experiences and products to new channels. A legacy CMS couldn't display products and complete checkouts on a digital sign or smartwatch, but a headless commerce solution can.

Learn More: What is a Headless CMS?

What Makes Headless Commerce Different from Traditional Commerce?

Traditional eCommerce and headless eCommerce have a series of key differences. To dispel the doubts about them, let's take a closer look at both types of eCommerce platforms. 

	Traditional eCommerce	Headless eCommerce
Front-end development	Front-end tied to the backend.	The front-end and back ends are decoupled, and you can use any front end. You can use APIs to connect different front-ends.
Speed to market	Need to set a different site for each channel	Build once, publish anywhere mentality.
Potential for customization	Predefined by the platform.	Enables greater customization for both admins and users.
Adaptability	Not adaptable due to its coupled nature.	Enables a best-of-breed approach and almost infinite adaptability.
Ease of making changes	It takes time to edit the code and deal with the sometimes massive databases.	Easy to change and personalize using APIs
Omnichannel capabilities	Very limited	Omnichannel-ready
Integrability	Too many plugins will grind your CMS to a stop.	Integrations work through APIs and don't affect your headless platform's speed.
Need for IT	Content editors can build experiences on their own	You'll need a dedicated IT team unless you're using a hybrid headless platform.
Personalization	Hard to personalize without plugins.	Built-in personalization engines A headless platform enables the creation of different experiences from scratch.

Why Is a Headless Commerce Platform Important in 2021 and Beyond?

A headless commerce platform doesn't just allow you to sell on more channels and devices. 

With a headless eCommerce platform you can:

Deliver 1:1 Personalized Experiences

A headless solution simplifies personalization for companies in multiple ways. For instance, retailers can integrate region-specific payment methods and offer additional regional payment gateways without re-platforming. 

Also, since your backend stores the information multiple channels use, you can distribute personalized offers across devices based on your customers' actions on other platforms. 

Integrate With Third-Party Software

Traditional commerce platforms tend to be monolith solutions where if you want to add a new feature, you have to use a plugin that slows down your eCommerce store in the long run. For eCommerce retailers, a slow site means fewer customers. The headless architecture enables integration with best-of-breed software tools for improved performance.

Scale To New Markets and Segments

A traditional commerce platform doesn't allow customers to change language, much less enable content localization in their websites, which represents a barrier for users whose language isn't English or aren't located in an English-speaking country. A headless eCommerce solution allows marketers to offer automatic translation for users to give them a seamless storefront experience. 

Cut Down IT Costs 

Most headless commerce solutions use a SaaS business model based on cloud infrastructure. Commerce cloud platforms like AWS and Azure reduce maintenance costs and increase uptime without increasing your IT costs, especially when compared with traditional, monolith platforms hosted on-premise. 

Use Your Favorite Front-end

Since the headless architecture enables front-end developers to use their preferred front-end frameworks and libraries, the headless approach gives developers almost infinite ways of customizing the presentation layer. APIs make connecting the appropriate front-end layer a simple task. With a headless commerce platform, you can create progressive web applications (PWAs) that work seamlessly from your browser and single-page applications for your storefront.

Centralize Assets and Content

Ecommerce platforms are hubs where you can centralize and store your data. Still, with the headless approach, and its flexible backend, things get taken to the next level as it simplifies and streamlines content delivery to different platforms. Regarding content assets, Oulette says that Agility CMS' content models have been helpful when it comes to building shopping carts and product pages. He says

"A model is a component that you create in the CMS, and that is then linked to a React component. The cool thing about content models is that when you design your pages, you can come to this page, for example, your page and drag and drop models as you want."

Enable Content Display in Digital Signage and IoT Devices 

Recent research by the Journal of Advertising Research shows that digital signage can boost incremental sales by as much as 25%. When you consider how a digital sign can be used to engage a customer, that figure comes as no surprise.

Create Jamstack-based Digital Experiences

Creating a Jamstack-based eCommerce store will net you benefits you never thought possible to achieve with a traditional eCommerce platform. Even headless-ready platforms like Shopify Plus can't compete with the speed and ease of use Jamstack eCommerce front-ends can give you. With a Jamstack CMS, you can implement best-of-breed technologies using APIs to power your eCommerce content management and build a progressive web app. 

Deploy Quickly 

One of the main advantages of the headless commerce approach is that merchants can deploy commerce experiences to a mobile device, a PWA or any front-end to create engaging, native-like commerce experiences across different customer touchpoints. When asked about her opinion on the headless commerce approach, Flor Antara, Full Stack Engineer at Seattle-based ZipWhip, said:  

“I’ve created eCommerce websites for different clients with different kinds of solutions, and it was always a pain because there are so many things to take into account. Snipcart and Agility CMS are amazing because deployment was so fast and super simple to integrate with.” Flor Antara

Roadblocks To Headless Commerce Implementation (And Your Brand's Way Around Them)

While a headless system or a headless commerce solution might give you plenty of gains, a pure headless CMS might be too difficult to wield for most marketers. It won't serve your brand if it doesn't work for your marketers.

Is it marketer-friendly?

Marketers need to be able to preview content and products on channels like digital signage. A headless CMS will provide you with the capabilities to get your content to the right channels for commerce, but that doesn't mean that your team will be able to get the most out of it. 

That's because many CMS platforms are built for technical team members.

Agility CMS, on the other hand, has more than enough marketer-friendly features to make sure your team has everything it needs to get content in front of customers. Features like the Rich Text Editor with WYSIWYG, source view, and a built-in Image Editor for cropping, resizing, or other simple image editing tasks are user-friendly. 

When combined with the ability to link products to shared content using linked content fields, they make Agility the perfect fit for your commerce marketing team.

Is it easy to integrate payment systems?

Another roadblock you may face on the path to headless commerce success is the current infrastructure for taking payments on new channels. Integrating payment systems is crucial to a successful eCommerce strategy. Unfortunately, not every CMS platform has the right capabilities to make it easy.

The solution is cloud-based hosting that covers the entire digital commerce experience. Agility trusts Azure to handle this and you should too. Agility allows you to sell products or tickets from any platform with a seamless shopping experience. 

With Azure, for instance, your business has the freedom to build, manage, and deploy applications on a massive, global network using your preferred tools and frameworks.

Building a website with Headless CMS and ECommerce is easier than ever, thanks to the mature APIs, SDKs, and starter projects available to help you get going quickly. Building a website with Headless Ecommerce and Agility CMS brings you several benefits. Here are a few:

• More secure and reliable than traditional eCommerce
• Lightning-fast page load times
• Better user experience using modern front-end frameworks
• More control for developers to implement pixel-perfect designs
• Easier for marketers and editors to use CMS content to promote products online

Headless CMS, Ecommerce, and Website Frameworks

Choose your Ecommerce Platform

You have many options to choose from when composing the parts of your system. Along with Agility CMS, you can use Shopify, BigCommerce, or any headless eCommerce platform with a mature API. You'll see later why we prefer Shopify and BigCommerce 🧐.

Choose your Website Framework

You can choose any modern website framework to build your solution. Still, the most popular ones with the best examples are Next.js and Gatsby.js, both of which support Static Site Generation plus Dynamic Functions. They are the leading frameworks, but you can still choose Nuxt, Eleventy, or even Hugo - you won't have such a broad foundation to start from.

How It Works

Do-It-Yourself DevOps

Everything starts with your code. Websites built using headless technologies take content and data from APIs, "build" it into HTML pages and output it using a CDN. If you are setting up the DevOpsyourself, you'll need to write code that runs on a build server, pulls in content from Agility CMS, and eCommerce data from an API. 

That isn't very easy to set up - and can involve several steps. Luckily, hosting providers like Vercel and Netlify has greatly simplified this process.

The Faster and Easier Option: Vercel

Looking at the image above, it would seem that Vercel only eliminates 1 step from the DevOps pipeline, but it does a lot more. Connect Vercel to any git repo, and it will automatically build your code for you and do all the heavy lifting of pulling in the CMS content and eCommerce data. Then, whenever you change your code, it will automatically redeploy your changes. 

Netlify works similarly, but you'll see why Vercel has changed the game regarding eCommerce in a second.

Next.js Commerce

The Vercel team has built a project that works with multiple headless eCommerce platforms, including BigCommerce and Shopify. That project allows you to simply plugin the API credentials of your eCommerce platform, set a config variable, and you're off and running! 

The code below shows the example env configuration - change the COMMERCE_PROVIDER to use a different platform.

AGILITY_GUID=
AGILITY_API_FETCH_KEY=
AGILITY_API_PREVIEW_KEY=

# Available providers: bigcommerce, shopify, swell
COMMERCE_PROVIDER=

BIGCOMMERCE_STOREFRONT_API_URL=
BIGCOMMERCE_STOREFRONT_API_TOKEN=
BIGCOMMERCE_STORE_API_URL=
BIGCOMMERCE_STORE_API_TOKEN=
BIGCOMMERCE_STORE_API_CLIENT_ID=
BIGCOMMERCE_CHANNEL_ID=

NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN=

NEXT_PUBLIC_SWELL_STORE_ID=
NEXT_PUBLIC_SWELL_PUBLIC_KEY=

NEXT_PUBLIC_SALEOR_API_URL=
NEXT_PUBLIC_SALEOR_CHANNEL=

Next.js Commerce with Agility

The team here at Agility has taken that idea to the next level and forked the work from the Vercel team. Our project version brings the same eCommerce functionality and adds CMS content from Agility into the mix! This brings you the ability to feature products on blog posts, as well as full-page management. This code provides a rock-solid starting foundation for building your headless commerce website.  

Featuring Products

Give your marketing team the ability to easily create compelling content that features the products in your catalog. 

Here's an example of a blog post that's linked to a product:

This is how it looks on the website, with a product image that overlays the blog post image and links directly to the product's detail page.

 

The Next.js Commerce package is just the starting point - including order management, favourite products, and more.

Reach out to us to learn more about getting started with Next Commerce and Agility CMS.

 

Start Your Headless Commerce Journey: Set An eCommerce Store With Agility CMS, Next.js, and Snipcart.

Creating an eCommerce store with Agility CMS is simple because, with Agility, you can deliver content to any front end using any coding language via RESTful APIs, regular APIs and GraphQL, our open source SDKs, and Jamstack architecture. 

Agility CMS offers marketers built-in page management features, with which they can create, manage and organize pages using reusable blocks and sitemaps without relying on a developer.

Plus, Agility CMS enables you to integrate with the solution of your liking. In this case, we integrate with Next.js and Snipcart to create an eCommerce storefront.

Next.js is a front-end framework that enables developers to export individual components of an app and build applications modularly, reducing load times and enabling every eCommerce retailer to build and deploy their eCommerce solution in minutes.

Snipcart is a Jamstack favourite tool to add a shopping cart to your website and start accepting international payments in minutes. Snipcart is an eCommerce solution that allows you to use a Headless CMS and the front-end frameworks you love. It also offers a full back office management dashboard where you can track and analyze your eCommerce data.

To start, sign up for a free Agility CMS Account, set up your profile, and select the Blog with Next.js Starter Template. 

We'll use this template as a starting point because it uses features such as Native Page Management and gives you a basic structure for your Next.js website. Our Next.js and Agility starter is an example based on our recommended best practices.

To see how these three technologies integrate and help you create a blazing-fast eCommerce store go ahead and check our tutorial:  How to start with Headless Commerce.

You can also watch this tutorial where we're joined by Zipwhip's Full Stack Engineer, Flor Antara; Snipcart's Co-Founder, Charles Ouelette; and Agility CMS' VP of Product and Operations, James Vidler.

If you want to learn more about how your eCommerce content can go beyond your website and mobile application? Check out our guide to a winning content architecture strategy.

Agility CMS Headless Commerce Examples & Use Cases

You've already seen it in action when it comes to headless commerce. When you visit your local fast food restaurant and order using a digital screen, that's headless commerce in full swing.

But how else are brands taking the head off their eCommerce experiences?

Campus group Canada

Compass Group Canada is a global leader in contract food and support services, managing tens of thousands of meal plans for educational institutions and professional and leisure organizations. Thanks to Agility CMS, students and staff can quickly order meals on any device. Multiple stakeholders efficiently manage content, with secure user accounts for 75 content editors.

Using the Agility CMS, Compass Group is a new responsive site that houses all schools with an improved, easier-to-use portal and robust eCommerce capability. The new DineOnCampus.ca site dynamically updates the banner name and content offering based on the customer's province and school selection. The new site also provides a consistent layout across all individual school sites.

Visit Orlando

Visit Orlando is the official tourism association for Orlando, the most-visited destination in the United States. They are a registered not-for-profit trade association that represents moreover 1,000 member companies making up Central Florida's tourism community.

Before headless eCommerce was implemented, the staff had to manually issue tickets because their former site couldn't handle much traffic and would crash during busy times. Tickets also had to be processed in batches (once a day), and because of this, the staff was burdened with the workload while customers were upset that they couldn't purchase last-minute tickets.

Rolling out Headless commerce with Agility CMS, online revenue increased by 20%.

Most importantly, in December, the CIO and Director both remarked that they had taken a 4-day weekend for Thanksgiving for the first time in many years!