< Back to blog

Headless eCommerce in 2020

Headless eCommerce. Buzzword? Yes. Game changing architectural shift in how businesses sell goods and services direct to consumers? Also yes.

Let's walk through why headless eCommerce, and more specifically, Commerce.js is a better way to build an eCommerce business in 2020.

Ok, let’s get into it.

A new era

Over the last decade, we have seen how a new breed of headless Content Management System (CMS) has redefined how websites are designed, built, and maintained. This separation of back-end logic from front-end presentation, has been a welcomed advancement in modern web technology for both developers and businesses.

The same now goes for eCommerce, whereby a headless eCommerce platform gives the developer all the backend logic they need to build a solution, and lets them use any frontend they want.

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

Traditional eCommerce platforms

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

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

At Commerce.js, we view these traditional eCommerce platforms on a spectrum, with Shopify on one end, and Magento on the other (with many other platforms in between). All come with a slew of powerful features but also strong assumptions in regards to how your business operates and what tech stack your developers are using/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 solutions.

With these traditional eCommerce solutions, developers are sometimes forced to sacrifice flexibility, maintainability, speed, and control when building eCommerce projects. Why? These platforms are either locked down, are not developer friendly, or have big complex code bases for developers to work with.

Commerce.js vs Shopify, Magento, BigCommerce

Now for something a little different.

Headless eCommerce platforms

Cut from a completely different cloth, Headless eCommerce refers to the modern approach to eCommerce architecture, whereby the frontend elements of desired eCommerce functionality are decoupled from the backed eCommerce logic.

At the core are APIs, which allow developers to easily and quickly pipe eCommerce anywhere they need it to be. APIs make it easier and faster to build custom eCommerce experiences into an existing project or build a fully fledged eCommerce app from the ground up with your favourite tools and platforms.

For businesses, headless eCommerce means greater business agility, faster iterations on ideas and designs, lower barriers to innovation, deeper customisations and the ability to offer richer customer experiences.

Commerce.js Example storefront

Why is Headless eCommerce good for Developers?

In 2020, high performing eCommerce websites aren’t just simple product pages, carts and checkouts. They are content rich pages, with tailored features, modular architecture, and are on brand at every touchpoint.

A headless eCommerce platform gives the developer the freedom to build unique experiences on the frontend, without locking them into specific technologies.

Here are a few examples of what a developer can do with a headless eCommerce platform that would otherwise not be feasible with a traditional eCommerce platform:

  • Plugging eCommerce 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 eCommerce 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 tools like reviews or sizing calculators into your cart and checkout

Commerce.js SDK visual

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 API 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?

Commerce.js was initially an internal tool to help us build checkout designs super fast. It has been designed from the developers standpoint to reflect the complete eCommerce life cycle.

Here are a few reasons why we think Chec/Commerce.js is a better platform for developers and businesses to build on top of.

Developer first

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

Going beyond great API design and documentation, we’ve also built tools like helper functions, which help developers when integrating the API. 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 that much easier and faster for developers.

API design

Commerce.js is the only eCommerce 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 harmonised approach to building an eCommerce platform, keeping the Merchant 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 the Chec Dashbaord, keeping things clean and organised for the admin user. We’ve got some exciting updates coming soon as we continue to improve our dashboard experience.

Chec_dashbord_orderview

Flexibility

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

Grounded

Our approach is bottom up, meaning we are with you on the ground level, helping you to develop solutions and scale your business. We see a lot of platforms offering a top down approach, where you have to be an enterprise business to really consider it seriously.

Commerce.js welcomes businesses of all sizes into the world of custom eCommerce. We’re driven by helping new businesses reach customers in innovative ways, as well as educating developers in smarter ways to build eCommerce businesses. We get a kick out of helping businesses be custom from day one, and then taking them from their first $1 in sales to their first $1m and beyond.

How do businesses benefit from using Commerce.js?

Commerce.js is for those eCommerce businesses and D2C brands who feel restricted by other eCommerce 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, organised, 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 eCommerce from storefront to receipt.

Commerce.js | Example product listing

Control and speed

It’s competitive out there. Businesses need to move faster and smarter than ever before with modern tools. With Commerce.js, businesses can decide when and how to make changes to their storefront or 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 eCommerce purchasing phase. Commerce.js lets businesses quickly test what is resonating with customers, test geo-specific pages/campaigns for different markets, or test if adding more friction to a checkout is valuable.

Monday_motorbikes

Scalability

Due to the decoupled nature of Commerce.js, businesses can easily and independently scale their frontend from the eCommerce 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 eCommerce platform 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.

Extend Commerce.js

Getting started

Ready to dip your toes into the world of headless eCommerce? Create your free account with Commerce.js and Chec Dashboard.

If you’re a developer and want to get started, you can start right from the command line or browse our developer docs.

Want to know more about how Commerce.js can help with your next project? Get in touch!