How to Get Started With Headless Commerce

The Evolution of Headless Commerce

Think about the last time you spent your hard earned dollars on a purchase from a website that looked like the examples below. I am sure it must have been in the late 90s to early 2000s; and for good reason. They lack engaging content to capture your attention; the website usability is poorly designed for search and catalog browsing; and frankly, it looks like kindergarten-grade scrapbooking on a blank Word document. No one today would be enticed to visit these websites, let alone trust them with their credit card information to make a purchase.

This is a prime example of how customer shopping expectations have changed over the years. Customers are demanding more and more from their digital experiences, and if you want to drive revenue and brand loyalty, you must keep up. Luckily, the commerce technology world hasn’t remained stagnant either. Vendors have evolved to incorporate new cutting edge technology that not only helps to create more engaging shopping experiences, but also grants exponential flexibility to bring your unique brand vision to life, with ease. This is as a result of countless brands beginning to leave traditional eCommerce platforms behind and embracing Headless Commerce instead.

Chapter 1: What is Headless Commerce?

Headless Commerce has slowly deviated from being just an eCommerce industry buzzword towards being a widely adopted architecture across top brands such as Nike, Tesla, Amazon, Walmart, United Airlines, Carnival, you name it. Anyone who’s anyone in the eCommerce industry has heard about Headless Commerce at least once, but what does it really mean?

Simply put, Headless Commerce refers to the decoupling of the customer facing frontend presentation layer of your eCommerce experience, from the backend commerce engine. Without diving too deeply into the technical depth of this concept, the Headless Commerce APIs which lie at the center of this decoupled architecture, allow your team to manage your store and deliver content without relying on changes being made in the backend. This is game changing for businesses who are committed to rapidly designing, deploying, optimizing differentiated and user -friendly commerce experiences.

If you haven’t already adopted a headless approach you may be wondering how it would differ from your current eCommerce strategy. Prior to the deployment of Headless Commerce, if you weren’t building an in-house solution yourself from scratch, the only other option was to choose fromlegacy platforms such as Salesforce Commerce Cloud, SAP Hybris, Oracle ATG, Websphere Commerce, etc. When brands first started embracing digital these vendors were leaders in the market, so if you’re using one of the companies, you made the right choice for you at the time.

However, overtime we have seen these legacy platforms become less and less capable of keeping up with new customer demands. These platforms were built as all-in-one bundled packaged offerings with all the standard eCommerce functionality needed to run your solution. As a result, they are configured with many interdependencies within the backend of the system in order to be fully functional and therefore are more rigid by nature. The business impact of this rigidity means that with each change you make to a discrete functionality, it is likely that it will require extensive QA testing and a full system integration by developers in order for your change to be implemented. This can be costly and time consuming and would not be ideal for businesses who need to make rapid changes.

Conversely, making changes with Headless Commerce solutions are quick, easy, and prevent less risk of breaking code in the backend that could cause your solution to be down for a period of time.

Chapter 2: Benefits of Headless Commerce

Apart from the ease of changes, Headless Commerce provides a variety of benefits to customers, as well as employees across all departments of your business.

Director of eCommerce: Create and offer seamless omnichannel shopping for better customer experiences

As a Director of Digital, there are a variety of reasons why you would want to launch another storefront or channel. Whether you need to launch a new product line, sister brand, or spin up a new touch point to capture a different audience, your commerce platform shouldn’t limit you. A headless architecture grants you the freedom to deploy multiple sites and touchpoints, all using a single solution, in days rather than months. This aligns well with business initiatives to outpace competitors and spin up new instances first. But customers also get an added bonus of a unified experience across the website and other touchpoints.

eCommerce Merchandizer or Marketer: Design content rich experiences to cater to each customer’s personal needs

As an eCommerce merchandiser or marketer, you will be consumed with increasing the interest in shopping with your store. This could be determined by how you place your products on the website, the special offers you display, and what you use to generate website traffic. Updating and optimizing your pages can be difficult with traditional eCommerce platforms, because you are limited to built-in content management systems (CMS) that don’t grant you the flexibility to lead with content rich experiences. With a headless architecture, your solution is separated from your CMS, which makes it that much easier to personalize your shopper experiences with content rich pages, as well as artificial intelligent-powered search and merchandising.

IT Executive: Support emerging technologies for the scale of your business

As an IT executive, you are committed to support your business as it continues to scale. The problem is, as it scales, your business will have to continue to adopt new technology and double-down on performance to ensure that it is still delivering at it’s existing calibre. With traditional platforms, scaling has been difficult and costly because of the coupled nature. You are forced to update everything at the same time, and oftentimes, integrating new technology is expensive and time consuming. A Headless Commerce approach future-proofs your architecture so that you can continuously iterate and add new technologies and applications without having to rehaul your solution every year.

Developer: Reduce technical debt for your development team

As a developer, you want to be able to support your technical initiatives without the hassle. However, with traditional eCommerce platforms, there is quite a bit of unwanted development work to complete your tasks. This means not meeting your company deadlines, keeping up with business teams needs, and getting to new initiatives late or even not at all. After a while, these delays start to reflect poorly on you and your manager. With a Headless Commerce architecture, frontend developers have the freedom to make changes without ever interrupting backend developers; while backend developers spend less time on development, updates, and maintenance, reducing overall technical debt.

Business Executive: Control your budget and reduce your overall total cost

As an executive keen on predicting and maintaining a reasonable budget, cost is always going to be one of the largest considerations for your eCommerce investment. Though all-in-one legacy platforms tend to offer attractive prices, over the years we’ve come to realize that there are always more hidden costs than expected after you complete your implementation and begin to optimize your solution. The cost of making changes often supersedes your initial implementation costs that you had only expected in year 1, which ends up blowing up your budget year over year. Due to the reduced technical debt of a Headless Commerce solution, you can easily track and predict how you spend your money as a business while also reducing your overall total cost of ownership.

Of course, this is not an exhaustive list, and many companies continue to choose Headless Commerce today for a variety of reasons. 

Take the Director of Digital solutions at Harper Collins for example. She was aware of the globalization needs across the HarperCollins brands but also wanted to ensure her team had the flexibility to swap out vendors as they needed based for a variety of reasons. Their traditional platform made it very difficult to make changes and support their multi currency and multilingual needs. When they switched to a Headless Commerce solution with Elastic Path, they were able to spin their solution as simply as they would with Shopify, but still personalize to their exact needs to satisfy their requirements and duplicate those efforts across multiple channels.

Let’s take a look at the example at another Elastic Path customer named Teilor. The Chief Product Officer at Teilor, was faced with a dilemma when COVID-19 hit. Their online presence did not offer the same engaging, customer-first experience as customers had grown used to in store. As a luxury fine jewelry brand, she was looking to move to a solution that could bring their high end in-store experience online. She chose Elastic Path for a Headless Commerce solution because of the ease provided to replicate their brand identity with a content rich frontend experience at speed. 

Of course, these may sound great for these other companies but I’m sure you’re still wondering if choosing a Headless Commerce solution will be right for you.

Chapter 3: Getting Started With Headless Commerce

Here’s a quick criteria checklist that you can use to evaluate if you and your business will be best suited with a Headless Commerce solution. If you check at least three of these boxes, including checkbox 1 and 2, you are ready to skip to the next section and find out how to get started.

STEP 1: Understanding if Headless Commerce is right for your business

Here’s a quick criteria checklist that you can use to evaluate if you and your business will be best suited with a Headless Commerce solution. If you check at least three of these boxes, including checkbox 1 and 2, you are ready to skip to the next section and find out how to get started.

• Your team is willing to trade off a pre-built, templated storefront with out-of-the box functionality in favor of being able to create a differentiated, customized experience for your customers.
•  You have a dedicated in-house technical team or are willing to work with an agency or system integrator to help create and launch your new solution.
• You want to rapidly and continuously make design changes on the front-end.
• You want to adapt to a sell-everywhere strategy to drive conversion across more customer touch points(e.g. Web, mobile, In store, self-checkout, curb-side pickup, AR/VR, etc.)
• You want to support the unique needs that can come along with running multiple business models, selling regulated goods, and accounting for customer specific pricing, product assortments and configurations.
• You want to eliminate downtime for updates and increase website performance.
• You want a seamless developer experience and the ability to leverage a variety of languages and frameworks.
• You want more advanced functionality that plugins can’t provide without painful customization.
• You want seamless developer experience for implementing and customizing functionality.

Step 2: Understanding how Headless Commerce Architecture differs

As you would have learned earlier in this guide, a Headless Commerce architecture decouples the frontend and the backend for optimal design flexibility. Therefore, if you make the switch, you would be consciously choosing to leave traditional all-in-one platforms behind, and adopt a modern solution where the frontend “Head” is connected to the backend commerce functionality, through commerce APIs. You can see these differences demonstrated in the diagram below.

From the diagram on the right, you can see a true Headless Commerce solution will still come equipped with all the needed commerce functionality to run your store such as inventory, promotions, catalog, cart, and checkout etc. However, rather than having your platform rigidly bolted to your website, like in a traditional legacy solution, Headless Commerce solutions grant your marketers, merchandisers, and developers, the freedom to continuously iterate your unique experiences across as many customer touch points as you’d like.

This will be key in enabling your marketers and merchandisers to not just fulfill, but exceed your business’ goals year-over-year. With the power of Headless Commerce, these teams are granted the flexibility and control to build more engaging, brand-centric experiences that convert quickly, and more often, and thus lead to higher revenue growth.

Though this can sound great, we also understand it can also be a little bit confusing. Some of the most common questions often asked are, “Now that you’ve removed the “head” to make it headless, where do I find it? Do I have to build it? How do I do it?” This is where a lot of people tend to panic. Determining how the actual shopper experiences is connected to the backend and then, brought to life, can seem complex. We understand and that is exactly why we made it simple. Read on to discover the 3 main frontend “Head” options that you can choose from, to bring your Headless Commerce solution to life:

Step 3: Understanding the frontend storefront options you can choose from 

Before we jump into the various frontend “Head” options that you can choose from, you will need to understand that one option will be better for you based on:

• The size of your business
• The level of in-house resources you want to utilize
• Current skill set of your dev team
• The number of stores you have across your business
• The number of channels you want to deploy across
• The type of products you carry (simple/complex)
• The level of churn
• The size of your marketing/merchandising team
• The level of innovation you want

As we introduce you to the three main options, you will also find some of the key considerations for choosing the right one for your business.

Frontend Options

1. Frontend-as-a-Service

A Frontend-as-a-Service (FEaaS) is one of the newer services on the market. This technology allows you to build and design your features, and their functionality such as grid layouts and carousels for your product, using minimal coding. If you choose this option, you will utilize an agency or your FEaaS team to carry out your first time implementation of your frontend with your commerce solution. Once that is completed, your team of marketers, content creators, and merchandisers will have the flexibility to innovate and make updates without reliance on your engineering teams. Examples of FEaaS include Frontastic, Mobify, Moovweb and Mason.

A Frontend-as-a-Service is going to be better suited for businesses that:

• Have 1 one 2 stores they want to manage
• Have a team of marketers and/or merchandisers that want control
• Want to rapidly innovate and make changes Want to deploy experiences across multiple channels (Voice, Vending, POS)
• Want utilize little to no on in-house technical resources to manage the frontend
• Doesn’t have multiple teams across regions they have to manage
• Doesn’t want strong analytics within the solution

2. Digital Experience Platform

A Digital Experience Platform (DXP) is a more advanced and fully integrated experience designed to enable the composition, management, and delivery of digital experience across different journeys. DXPs have expanded from traditional CMS to focus on more connected and consistent experiences both across internal teams and consumers. If you choose this option, you will utilize an agency, SI partner, and/or in-house technical team to build and carry out the first time implementation of your frontend with your commerce solution. From there, it is usually best that you have a dedicated in-house team to manage the frontend solution. Examples of DXPs include: Bloomreach, Acquia, and Adobe Experience Manager.

A Digital Experience Platform is going to be better suited for businesses that:

• Have multiple stores, often across multiple regions
• Want to rapidly innovate and make changes
• Have an extensive repository of assets
• Want to deploy experiences across multiple channels (Voice, Vending, POS) Have teams of 7-20 marketers and merchandisers managing each store
• Are willing to invest in an agency or in house team to manage their frontend Want to be able to implement brand variation across channels and regions
• Want to be able to have strong centralized control of brand standards but also grant teams to control within template guidelines
• Want to be able to vary the control it grants to stores across their regions
• Want to be able to make templates that teams have to adhere to
• Want strong analytics within the experience Want to be able to do A/B testing within the experience

3. Custom Build

A custom built frontend tends to be built from scratch by in-house frontend developers who leverage popular frontend frameworks such as React, Angular JS, Next JS, VueJS, and follow JAMStack architecture and philosophy. As it suggests, if you choose to custom build your frontend, you will require your in-house team or hired agency to build and manage it for you.

We tend to not recommend going down this route unless your business:

• Is newly formed or small Has a small team managing it
• Doesn’t anticipate frequent changes in product assortment
• Only needs PDP, PLP and home page to make your website
• Doesn’t want to deploy to different channels or regions

We typically only recommend this option if you have a very simple product assortment that doesn’t change often and you’re not interested in constant interaction. However, if you want to be able to leverage asset management and content management for your marketing and merchandising teams, we strongly recommend integrating with a Content Management System (CMS). This integration will allow you to achieve the same things you would achieve with a Digital Experience Platform(DXP) explained in Option 2, without the overall management of the solution.

At Elastic Path, we do not sell full frontends, but we do offer reference store starter kits that your teams can leverage to build upon and integrate with. You can also view all of the different frontend partners that Elastic Path can help you with integrating with filtering by “CMS” on the hub.

Chapter 4: How Do I Implement My Frontend With My Backend Software Vendor?

Now that you understand the multiple “heads '' you can choose from, how do you implement it? Good news - there are several options for bringing your commerce vision to life - you can leverage your in-house technical team, or hire an agency or system integrator to carry out your implementation. If you’re the type of business that is familiar with handling similar technical projects, then utilizing your in-house team will be the right choice. Otherwise, we recommend speaking with your commerce vendor of choice about the structure of your business and your business requirements to help you choose the right agency or system integrator. Here are a few questions to consider when evaluating integration partners:

Now that you understand the multiple “heads '' you can choose from, how do you implement it? Good news - there are several options for bringing your commerce vision to life - you can leverage your in-house technical team, or hire an agency or system integrator to carry out your implementation. If you’re the type of business that is familiar with handling similar technical projects, then utilizing your in-house team will be the right choice. Otherwise, we recommend speaking with your commerce vendor of choice about the structure of your business and your business requirements to help you choose the right agency or system integrator. Here are a few questions to consider when evaluating integration partners:

1. What is the size of your company and its accompanying eCommerce project?
2. Do you require more frontend design work, backend functionality work, or both?
3. How do you foresee your ideal team composition? Are you looking for a specialist for some smaller areas, or do you need a full team to manage your implementation?
4. What are the different technologies you’re thinking of integrating? (DRM, CMS, React)
5. What are the most important criteria for your eCommerce experience? (Intelligent search, content rich experiences, multiple touch points)
6. What is your available budget?

Your answers to these questions will determine the type of business you should partner with to get your Headless Commerce solution and up running. At Elastic Path, our team will work with you to choose the best team suited for you, from a list of experienced partners who have carried out successful implementations.

Chapter 5: How Do I Choose a Headless Commerce Vendor?

It’s worth noting that given the recent popularity of the “Headless” approach, many vendors have tried to satisfy the need by creating ad hoc Headless Commerce offerings. This means not all Headless Commerce architectures are the same, and to understand which one will be the right one for your company, we have broken them down into two main categories: Retrofitted headless solutions and headless microservices solutions. 

Retrofitted Headless Solutions

You can think about retrofitted headless solutions as an all-in-one platform that has had its front end ripped off and connecting it with bolted-on APIs. With this option, you will still have your traditional eCommerce platform, nothing has really changed, but now you can customize the front end - you can make changes to the theme, pictures and anything that your customer sees. This may sound appealing, but please be aware that customers will often struggle to realize the benefits of a headless approach without using a system that was designed to be headless from the ground-up. We have found that most traditional legacy platforms that have their frontend removed, will likely not function as well. The backend technology was built to be intrinsically connected to a front end, so when you decouple them, it is challenging to force-integrate your backend seamlessly with a separate "head" You can think of this as buying a hard-top sedan, and then deciding you want to turn it into a convertible, by cutting off the roof with a saw - even with the most skilled mechanic, the resulting car will certainly be less than elegant. Examples of retrofitted headless solutions include: Salesforce Commerce Cloud, Magento, Big Commerce, and Shopify.

Headless Microservices Solutions

Conversely, Headless Microservices solutions are built from the ground up with APIs to provide flexibility on both the front-end and back-end. This allows you to pick and choose the functionality that you want for your business and compose them, rather than relying on something that's pre-built. For example, let's say you have a store and you want to implement something like price negotiations or order blockages because of unpaid invoices. This is specific functionality that you will have to implement in the backend and will require flexibility, that retrofitted headless can't provide without expensive and time consuming customizations. If you are interested in:

• High levels of flexibility in the build of the front end UI of your commerce experience in whatever front end language or framework best meets your business requirements, including modern Javascript frameworks and approaches like JAMStack;
• Ease of retrieval of data from the commerce components, for front-end developers to present it how and what they want;
• Adaptability across multiple platforms; 

Then a Headless Microservices solution will be the better option for you. Examples of Headless Microservices solutions include: Elastic Path, Commercetools and Commercelayer. 

Chapter 6: How does Headless Commerce from Elastic Path Differ?

Elastic Path provides the only commerce solution that combines the control of DIY, simplicity of Shopify, and enterprise scale. We do this by following a Composable Commerce approach.  Composable Commerce is a modern approach that enables business and technology teams to quickly and easily launch and continuously optimize unique digital commerce experiences by composing multiple “best of breed” solutions together into a complete experience that brings their unique business requirements to life.  

Unlike other Composable Commerce solutions, we are more than just Headless Commerce that powers innovative experiences.  Elastic Path provides the complete solution needed to rapidly turn commerce vision into revenue-generating machines.   We make this possible with our:

Elastic Path Commerce Cloud 

Elastic Path Commerce Cloud powers API-first, Headless Commerce microservices for every brand. Our composable, omnichannel architecture empowers brands to deliver any use case or experience with built-in core commerce capabilities, eliminating the need for messy customizations

Composable Commerce Hub

The Composable Commerce Hub is a re-invention of the traditional vendor marketplace that unlocks the benefits of the Composable Commerce movement for all.  It is the first and only open exchange of business solutions powered by an ecosystem of leading digital commerce providers. It brings together a robust library of Pre-Composed Solutions^TM, which are complete business ready experiences as well as Accelerators which include partner integrations, reference applications (aka "heads"), and pre-built extensions, into one central location. These assets are key to democratizing DIY commerce so that you don’t have to settle for rigid cookie cutter solutions. 

Composable Commerce XA™

Lastly, Composable Commerce XA^TM (experience assurance) is your secret weapon to reduce the risk of managing your multi-vendor commerce solutions. The offering combines proprietary monitoring technology and holistic issue resolution for commerce solutions composed for multiple vendors. 

If you’re interested in learning more about our Headless Commerce solution and how we can help you to achieve your goals, please feel free to get in touch, and we will match you with one of our technical experts to get your evaluation process started.