Headless eCommerce in 2020

Headless Commerce — A game changing architectural shift in how businesses compose their technology stack and sell goods and services online.

Let's learn what headless commerce is, it's different flavours, and what advantages it gives commerce businesses in 2020.

A new era

Last decade, a new breed of headless Content Management System (CMS) and hosting providers, redefined how websites were designed, built, and consumed. We now know this as the Jamstack.

For content and data, headless really means many heads. The seperation of backend (body) from frontend (head) allows for unlimited, varying, and evolving frontends that are all powered by APIs.

Business units work best when the software they rely on to do a good job is designed in a modular and composable way, a canvas to solve unique business requirements. Headless architecture gives developers the backend logic they need to build reliable solutions for any frontend, and marketers control over the customer experience.

Before we get into all things headless, let’s take a quick look at the approach of traditional commerce platforms. This way we’ll understand how and why headless eCommerce came to be.

Traditional commerce platforms

Traditional commerce software was developed to help physical retail stores sell online. These platforms were architected to replicate, and then migrate an entire physical store, online.

The differences between Commerce Platforms and Commerce Infrastructure.

As a result, these platforms were developed as large, vertically integrated applications that essentially became commerce focused Content Management Systems.

Below is a simplified view of a traditional monolithic commerce platform. Platforms come with a borad set of features but also strong assumptions in regards to how your business operates and what tech stack your developers should use. These platforms can often be expensive (if businesses want to do anything custom) and typically require experienced developers to be able to build custom solutions alongside them.

With these traditional commerce solutions, developers are sometimes forced to sacrifice flexibility, maintainability, speed, and control when building commerce projects. Why? These platforms are usually locked down (closed source), are not developer friendly (limited API coverage), or have big complex code bases for developers to work with (deeply coupled architecture).

Now for something a little different.

Headless Commerce

Cut from a completely different cloth, Headless Commerce refers to the modern approach to commerce architecture, whereby the frontend elements of desired commerce functionality are decoupled from the backed commerce logic. True headless commerce allows for both decoupling of the front and backened, and the ability to bring your own best of breed providers for specific services (content API, search API, email API).

At the core of headless commerce are APIs, which allow developers to easily and quickly pipe commerce data to any frontend channel/device/framework. Commerce APIs make it easier and faster for developers to build custom purchasing experiences and create integrations between other services in a business's technical stack.

For businesses, headless commerce means greater business agility, faster iterations on ideas and designs, the ability to experiment on purchasing journeys, lower barriers to innovation, deeper customizations and the ability to offer personalized purchasing experiences.

Why is Headless Commerce good for Developers?

In 2020, high performing eCommerce websites need to be experience rich pages, with tailored features, modular architecture, and are on brand at every touchpoint.

A headless commerce architecture gives the developer the freedom to build unique experiences on the frontend, without locking them into proprietary technologies that hurt performance.

Below are a few examples of what a developer can do with a modern headless architecture that would otherwise not be feasible with a traditional commerce platform:

• Building landing pages with built in checkouts that convert customers at the highest level of intent
• Plugging commerce functionality into an iOS app with a few lines of code
• Creating a PWA with the same code for mobile and desktop
• Designing custom checkout experiences (from storefront to receipt) that reflect a brand’s true identity
• Run A/B tests on different checkout designs to optimise conversions
• Add commerce into any existing website or DX platform
• Go from creating a proof of concept, to a live site in a number of days
• Integrate 3rd party APIs for Shipping and Tax, or sizing calculators into your cart and checkout

With the advancements in IOT, AR, VR, and retail tech, eCommerce developers need total freedom to quickly test different channels, designs and experiences with their customers.

Commerce.js lets developers do this with ease. Our APIs can be integrated into any tech stack, platform or device, meaning businesses can move faster and get closer to the expectations of their customers.

What makes Commerce.js special?

Firstly, Commerce.js is not a platform but insead, Commerce Infrastructure. Our API was initially an internal tool to help us build checkout designs super fast for clients. We have designed our APIs from the developers standpoint to reflect the complete commerce life cycle, so much so that we are one of the only headless commerce providers that have the concept of a Checkout API.

Here are a few reasons why we think Commerce.js is the best solution for developers and businesses to build and grow with.

Developer first

We built Commerce.js to be a developer-first commerce infrastructure, with a heavy focus on the developer integration experience. The goal here is to streamline tedious commerce logic that developers would otherwise have to deal with if they were to roll-their-own solution and use a bloated open source solution.

Going beyond great API design and documentation, we’ve built tools like helper functions into the API, which helps the developer when integrating. For example, the helpers check if a discount code is valid and give updated totals to display to the customer. These helpers make integrating and developing on top of our API significantly easier and faster for developers.

API design

Commerce.js is the only commerce SDK and API with concepts based around the pre, during, and post checkout phases. This is a departure from other generic CRUD APIs, and gives developers more control during each phase of the checkout/ purchasing cycle.

    // Check if a quantity is available for a line item
    Commerce.checkout.checkQuantity();

    // Did the customer enter a valid pay what you want price?
    Commerce.checkout.checkPayWhatYouWant();

    // Get the running totals for this checkout
    Commerce.checkout.getLive();

    // List all available shipping countries for a checkout session
    Commerce.checkout.localeListShippingCountries();

    // Set a new tax zone for this order and recalculate totals
    Commerce.checkout.setTaxZone();

Balanced approach

We have a harmonized approach to building an commerce infrastructure, keeping both the Business and Developer in mind.

We are very aware that Commerce.js a developer tool that is ultimately not used by developers. This is reflected in our design of our Dashbaord, keeping things clean and organized for the admin user.

Flexibility

One of the benefits of an API-first infrastructure is how and where it can be used. Commerce.js can be used to create a full commerce web or mobile store, or to quickly spin up micro sites and targeted checkouts for campaigns. It can be used as a standalone commerce solution, or with an existing platform to introduce deeper levels of customization and control to a commerce website.

Grounded

Our approach to commerce is bottom up, meaning we are with you on the ground level, helping you to develop solutions and scale your business from day one. We see a lot of headless commerce platforms offering a top down approach, which soely cater to enterprise businesses, that's not Commerce.js.

Join our developer Slack community here.

Commerce.js welcomes businesses of all sizes into the world of headless commerce. We’re driven by helping new businesses reach customers in innovative ways, as well as educating developers in smarter ways to build commerce businesses.

How do businesses benefit from using Commerce.js?

Commerce.js is for those commerce businesses and D2C brands who feel restricted by traditional commerce platforms. Commerce.js acts as an infrastructure replacement for businesses, leaving developers more time to focus on the business, and less time on tedious eCommerce logic and maintenance.

Customization

More than ever, brands need to be able guide their customers through the purchasing experience in a way that makes customers feel human, organized, and delighted with their decisions.

With Commerce.js, brands can embrace their personality at every touchpoint using the frontend framework or content platform of their choice.

We’re excited to see how businesses embrace the ability to customize their commerce from storefront to receipt, including checkout.

See demo site

Control and speed

It’s competitive out there. Businesses need to move faster and be smarter than ever before in order to win customers hearts and minds. With Commerce.js, businesses can decide when and how to make changes to their storefronts, carts, and checkouts. Development teams can employ continuous deployment practices with Commerce.js, as they would with other tools and platforms in their tech stack.

Experimentation

The experimentation tactics we use in product, marketing, and sales can now be applied specifically to each commerce purchasing phase. Commerce.js helps businesses quickly test what is resonating with customers, personalize geo-specific pages/campaigns for different markets, or validate if removing an input field on a checkout is valuable.

Scalability

Headless commerce inherently allows businesses to independently scale their frontend from the commerce backend. This becomes powerful when running high traffic promotions and campaigns, and gives businesses more time to focus on marketing and support.

Extendability

Perhaps one of the most powerful aspects of a headless commerce is in its ability to connect to multiple frontends seamlessly. This allows businesses to use one system across all channels, for example; web, mobile, kiosk, IOT, AR and VR. All can be powered by the same eCommerce engine.

Getting started

If you’re a developer and want to get started, you can start right from the command line, browse our developer docs or check out our Next.js starter kit and demo store.