Headless Commerce

What is Headless Commerce?

Headless commerce architecture is the decoupling of the front-end presentation layer of a website from the back-end E-commerce functionality. Developers can utilize their front-end technology of choice to deliver high-quality content experiences, and plug in an E-commerce solution on the backend that manages all commerce functionality.

For brands, it’s easy to see how headless commerce can provide more options when it comes to E-commerce platforms.

Headless solutions enable brands to make changes quickly to stay current, which is vital in today’s retail landscape. Businesses are competing for mindshare and battling the rising costs of customer acquisition.

Let’s look at the three models for structuring an E-commerce business:

1. Monolithic.

This is where E-commerce started, in the days when hardware and software were inextricably linked. For instance, if you buy IBM hardware you must use IBM software. The industry has since evolved from this model.

2. Commerce-led

This strategy uses a commerce platform front-end for UX and checkout, but APIs for data orchestration across a more robust infrastructure.

Businesses then often implement a PIM, ERP and OMS for product information management, accounting and customer integration, and inventory management across channels.

3. Experience-led

This strategy decouples the E-commerce platform from the presentation layer, so businesses can use popular content management systems (CMS) like WordPress, digital experience platforms (DXP) like Drupal, progressive web apps (PWA), or custom front-end solutions for unparalleled experiences that increase brand value perception and drive to checkout.

How headless commerce works

Just as with a headless CMS, a headless E-commerce system works by passing requests between the presentation and application layers through web services or application programming interface (API) calls.

Headless Commerce vs. Traditional E-commerce

1. Traditional E-commerce

 Many brands still use a monolithic strategy, and many agencies still recommend it for enterprise and well-established businesses.

The downsides to a monolithic strategy are slow go-to-market timelines and high development costs. This delays innovation.

Upsides to a monolithic model are full platform control for the IT department  which may come in handy if an E-commerce strategy or site experience needs extreme customization.

2. Headless E-commerce

Headless commerce meets businesses where they need commerce functionality. Brands can deliver API-driven experiences through a CMS, DXP, application, device, or custom frontend

With headless, brands can create commerce experiences in other platforms using powerful APIs.

From highly customized react.js or angular sites to a CMS, it’s possible to integrate even the most complex commerce requirements with beautiful work. Brands don’t have to compromise content to combine it with agile, flexible E-commerce.

Open SaaS is a SaaS platform architecture choice. It includes the following:

• High or unlimited API call volumes.
• Multiple endpoints.
• Well-documented developer documents.
• A heavy focus on API development in product roadmap make.

Benefits of Headless Commerce for Online Merchants

Content- and experience-led strategies using headless commerce can provide brands with:

1. Advanced technologies to create visionary, fast websites.
2. Flexibility and familiarity for developers.
3. Complete ownership over site architecture
4. Marketing effectiveness for innovation without hurting back-end processes.
5. Speed to market for international and omnichannel GTMs.
6. Conversion rates and lower customer acquisition costs.

Additionally, headless commerce opens up a world of possibilities with brands that are looking for a content-led strategy to begin with.

1. Advanced technologies to create visionary, fast websites

In a headless environment, brands can test new technology. Because the front-end is decoupled from the back-end, developers are free to create as they please instead of being tied to the confines of a traditional CMS.

Headless allows for more flexibility in content delivery because you can connect a CMS, DXP, or Internet of Things device (IoT) that is specifically designed for creating content- or experience-led commerce. You can then swap out the front-end without affecting the backend operations.

A headless E-commerce platform houses content centrally and is able to deliver it anywhere via API. This method allows for a much faster delivery than traditional E-commerce platforms and lends itself to a better customer experience.

2. Flexibility and familiarity for developers

Headless commerce enables brands to choose the E-commerce platform that works best as the engine for their online store while also working with the frontend of their choice, be it a CMS, a DXP, a PWA or a custom solution.

If a development team has a certain technology or programming language they’re comfortable working with, headless allows them to keep what works with their workflow while streamlining their processes and developing efficiencies.

3. Speed to market for international and omnichannel GTMs

Combine all of the advantages above and now apply them to the process of launching in new geographies or launching micro-brands.

Once you have the system setup, a headless solution is easily replicable across the board, optimized for international SEO and connected to the overall data orchestration infrastructure.

4. Conversion rates and lower customer acquisition costs

Headless is an effective way of reducing these costs because your brand can use a content- or experience-led strategy to draw in organic traffic instead of relying on paid advertising. Dynamic and smooth customer experiences also help increase conversion rates.

5. Complete ownership over site architecture

With headless, some of the parts of the system are decoupled (the frontend from the backend). On a headless platform, the content management application and content delivery application environments are separated for greater control.

One reason brands turn to headless is because they already have a frontend solution they’re happy with, and they just need more from their backend system.

Headless Commerce Use Cases

The most common reasons for using a decoupled SaaS E-commerce platform in combination with a separate frontend solution are:

• PCI Compliance mitigation: Less work for IT teams, as the SaaS provider takes on the risk.
• Checkout security and fraud protection: Same as above. Less work for IT teams as the SaaS provider takes on the risk.
• Open architecture and extensibility: Utilize pre-built integrations with ERPs, CRMs and more, or custom build your own with additional APIs and SDKs.

1. Custom solutions

For many, the reason to choose headless is because they have big ideas that no one system can provide out of the box.

Headless can allow them to keep the customization and lose the cost and upkeep. Headless can provide them the open SaaS experience that’s the best of both worlds. APIs enable the flexibility they need to think beyond the limits of any one platform or technology and seamlessly connect systems in a more modular fashion.

2. Content Management System (CMS)

When the headless approach is paired with a CMS, it makes for a powerful combination. In these cases, the E-commerce platform is decoupled from the presentation layer, so a brand can use popular CMS solutions like WordPress, DXPs like Drupal, or custom frontend solutions for unparalleled customer experiences that increase conversion:

• WordPress

WordPress is the CMS of choice for more than 25 million websites around the globe.

WooCommerce was for a long time the only serious player in that market. However, WooCommerce’s drag on site speed as well as high-cost for security and implementation (WooCommerce is an open source solution) have pushed would-be users to lower-cost SaaS E-commerce platforms.

• Drupal

Drupal is considered a leading enterprise CMS solution.

One of the main reasons why Drupal is preferred by enterprise organizations is its security. Drupal is designed for custom development.

Whereas in the WordPress community, folks like to use plugins (hence the BigCommerce for WordPress plugin), those in the Drupal community like to custom build. As a result of custom build versus plugins, Drupal often doesn’t have the same site load lag times as WordPress — and it can handle a much larger volume of content. Other than that, some designers, developers and editors just plain prefer Drupal over WordPress.

• Adobe Experience Manager

Adobe Experience Manager (AEM) brings together a CMS and digital asset management (DAM) in a single place. It’s a comprehensive solution for building websites, mobile apps, and forms, directly alongside marketing content and assets. It has native connections to Adobe Creative Cloud, making it easier to get content to market faster and create the personalized experiences.

AEM features a CMS, DAM, digital enrollment and forms, and managed services. Together they offer a number of benefits:

• Create faster with native Creative Cloud connection: Make it easier for creatives to create, marketers to approve and publish, and both teams to work together better.
• Do more with smarter digital asset management: Save time by editing, optimizing, and delivering them, too — all from one platform.
• Eliminate tedious tasks with asset automation: Use AI to automate tagging, cropping, workflows and distribution — doing in minutes what used to take hours.
• Engage more customers with rich media delivery: AEM’s AI and machine learning brings hidden opportunities and answers to everyone with the click of a button.
• Build Lifetime Value: Deliver digital experiences over the lifetime of your customer that build brand loyalty and drive demand.
• Be Consistent Across Channels: Deliver amazing content across websites and mobile, to in-store and beacons.
• Get Timely and Personal: Deliver and manage experiences that are responsive, relevant and social.
• Sitecore

Sitecore is another leading CMS used by organizations globally to create personalized digital experiences.

3. Digital Experience Platform (DXP)

A DXP is a type of software that enables companies to quickly digitize and provide an improved customer experience. Combining a DXP with a headless CMS solution results in a strong foundation.

The value in this partnership comes from the flexible API-driven content and its capability to integrate with other services.

Bloomreach

Bloomreach is a DXP. Large enterprise retailers are a perfect fit for this headless E-commerce CMS solution. Bloomreach offers a microservice / headless architecture and APIs to reduce IT complexity in powering an optimal customer experience from homepage to checkout.

4. Progressive Web Apps (PWA)

Progressive web apps (PWA) are web applications that use the latest web capabilities to deliver a native app-like experience to users. PWAs are web applications that are regular web pages or websites but can appear to the user like traditional applications or native mobile applications. PWAs combine the capabilities of websites and mobile software to create an immersive user experience that can lead to higher conversion rates and more time spent on site.

Big brands from Airbnb and Twitter to BMW and Starbucks are already using PWAs and seeing big results.

How headless commerce supports omnichannel retail

The idea of “omnichannel retail” means that a shopper can use the same online platforms to shop both online and offline, on any device, at any time. Since the primary objective of headless commerce platforms is to offer a seamless user experience across channels, these platforms are an essential component of the omnichannel retail mission.

Unlocking Flexibility: Examples of Headless Commerce in Action

It’s often very difficult to tell if a brand is using headless commerce as a strategy just by looking at it.

This will only become more so true as headless E-commerce becomes more mainstream and loses its URL redirect to a checkout page.

let’s look at a few headless commerce examples:

1. Burrow

Burrow is a direct-to-consumer furniture store, founded specifically to eliminate the hassles of traditional furniture shopping. They designed a modular product that was stylish and comfortable and could be affordably shipped to customers.

In addition to needing a powerful backend platform that could grow and scale with them, Burrow also needed to be able to customize their site quickly and easily. Their ideal solution was one in which templates didn’t limit their creativity and developers weren’t needed to make simple changes.

Since launching with their headless solution, Burrow saw a 30% increase in conversion rate in only two months and a 50% increase in site speed and performance.

2. Larq

LARQ is a seller of self-purifying water bottles, designed to solve many of the issues people have with traditional water bottles.

Headless could provide the customization that LARQ needed, such as giving them complete control over the content and customer journey. LARQ’s sites are run with BigCommerce as the E-commerce engine on the backend and a custom solution built with React on the frontend. This enabled them to control their regional sites (currently US, EU, UK and Canada) on one single domain.

LARQ was able to launch their E-commerce site in just two months. Since launching, they’ve seen a 400% increase in revenue year-over-year and an 80% increase in conversion rate over three months.

3. Louise Kennedy

Irish fashion designer Louise Kennedy uses WordPress on the front-end to host their products, blog content and merchandising.

This  allows them to use integrated payment options like Amazon Pay, PayPal One Touch, Apple Pay and more without having to do the interaction work themselves.

This saves time, saves money, increases security and allows for fast innovation and campaign launch to remain competitive in the industry.

4. Carluccio’s

Carluccio’s built a presentation layer (i.e. the site experience) on WordPress, then used  implement a headless commerce solution.

This allows a customer to stay on the same site (no subdomain) throughout the experience.

5. Canvas 1839

Like some of the other use cases we’ve talked about, Canvas 1839 soon found they were constrained by their own growth. Their platform, Shopify, also limited them in other ways that were specific to their industry, including what payment providers they could use.

In addition to wanting a platform that was vocally supportive of CBD merchants, they were also interested in a headless model because they wanted a quicker, more efficient development cycle for both their developers and marketers. They wanted their developers to be able to use tools like Gatsby, React and GraphQL to build the engaging front-end experience, while marketers could easily build and manage the content-heavy pages — all fully integrated to the rest of the website.