Headless

What is headless commerce?

You’re here to learn more about what this new-fangled headless commerce thing is everyone has been talking about. Is it worth it for you to look deeper into for your store? Is it too complicated? What even does it entail?

There are a lot of questions about what headless commerce is, and it can seem complicated or overwhelming, but in reality, the technology behind headless is pretty straightforward to understand.

So my goal here is to tell you more about what headless commerce is from a birds-eye-view so you will have a better idea of how it works and what you want to dive deeper into. Let’s begin!

Just simply explain wtf headless commerce is, please…


I’ve definitely said this myself before, so don’t worry, you’re not the only one. To set ourselves up for success here, let's get as non-technical as possible. 

Headless commerce is when you take the frontend of your ecommerce store (the part your customers interact with) and separate it from the backend (all of those pesky admin tasks and programs* that are always in need of attention? Fulfillment, subscription services, customer service portals, etc.  Yea - that’s what I’m talking about, all of that). Headless commerce is the separation of those two technologies. 

*Note: headless does not mean that these backend programs go away or stop bothering you, it just means that you now have the ability to make different choices for the programs that run your store instead of being stuck with whatever comes with your platform. you want to use.

Simple enough? Good. Now, you’re probably now wondering why in the hel..heck anyone would want to do that? 


By “going headless” (which is what the cool kids are calling it nowadays) you can provide your customers with a better shopping experience because you, the merchant in charge, is able to create your ideal storefront without any limitations. 

The not-so-detailed history of headless commerce


Let’s take a quick step back in time. At some point in a not-so-distant past, a traditional commerce user of some capacity was frustrated with their platform limitations and went to work on figuring out how to be less frustrated!

Okay, so I actually have no idea how it came about, historically speaking, but essentially headless commerce was born out of frustrations with traditional commerce platforms.

Traditional commerce platforms (sometimes referred to as legacy ecommerce), are what you may know of as “all-in-one” platforms such as Shopify. These platforms make it super easy to get your ecommerce store up and running quickly. However, once you start to scale your business, it becomes difficult to change things as you’re now stuck with what that platform thinks is the right way to go. If they decide that you should not customize xyz part of your store, then you won’t be doing that no matter how much you want to.

So - headless commerce was born because merchants were frustrated with these limitations imposed on them by traditional commerce platforms and wanted the flexibility to choose what suited them and their stores. Bam - a headless history.

How to talk the headless commerce talk

Let’s lay down some terminology here that we’ll use throughout the rest of the article so that you can easily follow along and talk the talk when it comes to headless commerce.

  • Frontend: this is what your customers see when they visit or interact with your website.  
  • Backend: This is the part of your online store that your users do not see. It handles all of the complex logic that is needed to run your storefront and holds all of the functionalities together so that your store can run smoothly. These are things like your review systems, order management, fulfillment program, taxes, product catalog, etc. 
  • CRM (customer relationship management): This stands for customer relationship management. It is the software system that helps manage your company's relationships with your customers (current and potential). It helps you stay connected to them and streamline the communications process. 
  • CMS (content management system): the software used to manage your digital content. It allows you to create, edit, and publish any content across your website. 
  • CDN (content delivery network): A CDN helps to make sure your website (and the content you have just created for it) is accessible to anyone who wants to see it regardless of where they are in the world and what device they are using. With shoppers being spread out across the globe, a CDN will cache the content to create faster loading times, thus allowing everyone to view and interact with your content quickly.
  • Headless checkout: This enables a shopper to initiate a checkout from anywhere, such as your storefront, a promotional email, an Instagram post, an article, etc., just by the click of a button. Using a headless checkout will often give you additional features that go above and beyond the standard features included in your platform. 

Benefits of going headless 

Now that we got the key definitions out of the way, let’s dive a little deeper into the benefits of going headless. 

At its core, it’s about having greater control over your brand. Merchants, like yourself, wanted the flexibility to choose what they used and how they used it. However, headless goes beyond this. Sites with a headless framework see the following benefits:

  • Faster site speeds: Going headless can also result in faster site speeds which, of course, equals more sales because customers aren’t getting frustrated or leaving your site. 

    As you scale your store, you’re going to want to begin to implement additional programs that enhance your customer experience. If you are on a traditional platform, a lot of these features will begin to slow down your site as they need additional code implemented to allow them to bypass the traditional platform limitations. A headless solution doesn't need this additional code and therefore does not cause slower site speeds. 
  • Reduce friction for shoppers: When you separate the frontend, you have now created an easier way in which you can develop/change what your customers interact with on your website. This is related to your store design, branding, theme, product images, etc. You are now able to control all of this.

    With this newfound power, you are able to create different customer experiences that reduce shopping friction. These can be advanced filtering for finding products by a variety of categories, mobile-enhanced product page designs, the purchasing process journey, etc. All of these things can create fewer areas for the customer to abandon their shopping and move faster to the checkout. 
  • Increase your margins: Directly speaking, implementing a headless solution is not immediately going to give you back a ton of money (and we’ll talk about why that is in a minute), but it does give you the opportunity to increase your margins over time after the initial cost of development is out of the way.

    By having control over your backend programs you are no longer tied to what the traditional platform told you to use. This means you can find software tools that offer you better rates and deals. 

    Let's take your payment processor for example. Stripe vs. Braintree vs. Authorize.net etc., not all traditional platforms allow you to use whatever you want here. And sometimes, by being with a specific traditional platform, you end up in a rate bucket that you are unable to control. With headless solutions, you can chat with any payment processor company and find the right fit and rate for you. Some companies even negotiate better deals for ecommerce stores that have high monthly sales.

    Negotiation leads to better rates, and better rates lead to higher margins without having to increase the cost of your goods. Hence headless allows you to increase your margins. 
  • Create Progressive Web Apps (PWAs): PWAs are web applications that use the latest web capabilities to deliver a native app-like experience to your customers. This allows you to create dynamic, faster, and personalized mobile experiences. 

    Many traditional platforms don’t allow for the implementation of PWAs at all, so wanting to implement something like this is only possible if you’ve gone rogue - I mean headless.

How to know when headless is right for you

While I (and many others) think headless commerce is the future, switching from a traditional commerce approach to headless commerce can come with a time and money investment. 

Here are some of the reasons why it would make sense for you to make the switch:

  • You’re already frustrated: If you’re already creating workarounds or are getting frustrated with your inability to add/adjust features across your store then you’re probably ready to look into a headless solution that will work well for you.

  • SEO is a primary traffic channel: If your site is heavily dependent on organic traffic, then going headless means you can do more to optimize your site speed (and site in general) for organic visitors. As mentioned above, page & site speed are factors in your Google Ranking.

  • You are the queen/king of content: If you have a lot of blog posts, guides, videos, and landing pages, then going headless means you can have a designated headless CMS and a faster CDN, which will make creating, managing, and deploying content updates faster.

  • It’s time to get personal with your customers: Whether you are just looking to create a dynamic and consistent experience across every channel you sell on (from your own site to Amazon or Etsy) or are looking to incorporate additional personalization features for your customers, going headless will give your development and marketing teams a lot more control over key customer touch points. 

Excited yet? We are too! But - as with anything that involves new technology, you do have to assess what some of the tradeoffs are before you start throwing money at it. 

Gotta spend money to make money! Right? 

Now, I hope that I have done such a good job of explaining headless that it seems very simple and easy to implement. However, because I respect you, I’m going to be brutally honest - it’s actually not that simple right out of the gate. There are a lot of decisions you’ll have to make throughout your headless journey and the time and monetary commitment associated with this is going to be your biggest tradeoff at the start. 

It’s still new - but you’ll be way ahead of the game

As with all new technology advancements, it takes time for it to become mainstream. This means that right now all of the “pieces of the headless puzzle” are not just sitting there in one location (although this is coming and we’re definitely helping to spearhead this initiative, so stay tuned!). This makes it more difficult to find out what tools you need, what various software brands offer these tools, and how you can easily assess which one is right for you.

The technology to connect all headless together is still emerging which is why, despite making things easier in the end, decoupling the current system is still a bit complex. Even by just reading this article you are already leaps and bounds ahead of your competition. Headless is a proactive solution to the future of ecommerce. By being forward-thinking and putting in the time and energy now, you will be rewarded by already being ahead of the technology curve.

It will take time to implement

As mentioned, going headless is not a fast and monetarily conservative option. It can take anywhere from 4-8 months, and maybe even a year depending on the size of your business to get your store on a headless solution. Time is money! So 4-8+ months of development (whether that’s in-house, agency, or contractors) will cost you money. The actual amounts vary, so I won’t quote it here (and will soon write an article for you about this in more detail) but as you do more research, make sure to ask around about what the low and high-end cost expectations are for your store size.

Andddddd, to answer your question before you even ask it - yes, you can still run your store at the same time as you are developing, so you won’t have to actually shut down shop completely. That is a good thing to know that money will still be coming in during this time so you won’t be totally left in the cold. 

Two quick tips for starting your headless journey

Because of this great relationship we have built over the past 2,066 words, I’m going to give you a couple of quick tips to make sure you start off on the right foot.  

  1. Choose the right infrastructure to build your site:  Yes - it is hard to always make sure you’re making the right decision the first time. Remember, the world does not end if you need to make a switch down the line, but financially it could be a concern so it would behoove you to try your best to choose the best infrastructure the first time.

    In order to do that you will have to do some research* on what is the best infrastructure to build on, and it will vary based on your store and needs. For now, the ideal way to figure out what works best is to talk to people. 

    Talk to headless developers and agencies. Talk to other store owners who have moved headless. Get an understanding of why they made the decisions they did and let them know what you ideally want. There’s a big chance that they made a couple of mistakes you can avoid and they can point you in the right direction regarding what tools to start looking at. 

    *Note: I will give you some deeper research into this topic when you’re ready for it (and when I can write it all down). Subscribe to the newsletter to stay tuned! 
  2. Developers can make or break your trust in technology: If you’re not “techy” (which is 100% absolutely and completely totally acceptable) it does not mean that you are going to have an issue moving to headless, it just means that you will need to make sure you truly trust the developer or agency you are hiring to help you through this process. 

    When you move through the research phase (which we’ve discussed above), make sure to ask them about their development process. Ask a store owner if they hired someone internally or used a freelancer or contractor. What do they recommend and why did they pick the route they went? 

    If you’re interviewing developers and agencies ask about pricing estimates (low and high). Make sure to get a list of 2-3 customers they have worked with who would be willing to speak to you about their process of going headless and why they chose this particular company/developer to help them in this process. ask them if they would hire them again and if so, what would they change?

    This will give you a good basis for knowing that you are choosing the right developer to start this new relationship with.

    Pro Tip: We highly recommend Chris Collinsworth of bigcto.com. He has developed a lot of successful headless commerce solutions and enjoys taking people from their traditional platforms into this new world. 

By doing both of these things above, you are going to have a head start on your headless journey. You’ll be able to assess what programs and costs are best for you and allow you to allocate your funds accordingly. 

Investing time and money upfront into headless is unavoidable, however, if you like spreadsheets (and even if you don’t), try your best to make a list of what your current costs are for the services, tools, and software you are using and begin to look into where you can lower these costs when you have the ability to finally be free from the traditional commerce shackles and, of course, expect an uplift in sales because your new store is beautiful, personalized, functional, fast, and all around amazing! 

What does a headless commerce tech stack look like? 

Great question! And, may I also say, I’m super proud of you for sticking with me through this so far.

The beauty of going headless is that you will have a lot more control over your shoppers’ experience and the software tools you choose to use. This can make your life and your shoppers' lives easier. 

A headless ecommerce tech stack

A headless commerce stack consists of multiple components that you can switch out*. 

*Note: Remember, this is a high-level intro to headless commerce. There are other areas in which you may be able to finagle some cool new tools, but for now, we’ll stick with this.

  • Backend infrastructure
  • Custom frontend 
  • CMS
  • CDN
  • Checkout
  • Payments & payment processor
  • Search
  • Reviews
  • Support
  • CRM 
  • Email / SMS 
  • PWAs

Don’t be overwhelmed by this list quite yet. Just because you’re going headless doesn’t mean you have to completely get rid of everything you currently have and find all new things, especially not right away. If you like your current CRM, for example, there’s a VERY high chance you can keep it. Same goes for any one of these areas listed above. Over time, as you get more familiar with what does/doesn’t work with your growing store, then you start to change things out. Start with what is most important to you now and evolve over time. 

How does it go together? A look at an example headless solution

This is not an end-all-be-all stack, (in fact, I’ve totally made it up), but I’ve so graciously given you a quick example of a headless tech stack that one could use. 

This is a list of various software solutions and tools that would be the face and the brains of your store. A setup like this would give you full control over your content management and how you deliver it, and let you pick the best partners to provide additional shopping experiences and increase your margins. 

  • Backend infrastructure: BigCommerce - where you manage your store (store settings, products, etc.)
  • Custom frontend: Next.js - drives the customer experience
  • CMS: WordPress
  • CDN: Fastly
  • Checkout: Rally - which includes payment add-ons like Apple Pay, PayPal, Klarna, crypto, etc. 
  • Payment processor: Stripe
  • Search: Algolia
  • Reviews: Trustpilot
  • Support: Gorgias
  • CRM: HubSpot
  • Email / SMS: Klaviyo
  • Faster site speeds: Vercel this is known as server-side rendering which means that when the user visits the webpage in the browser they will see the content quicker. (For this example, Vercel works well with next.js, but there are other options as well such as Gatsby.) 
  • Bonus - post-purchase offers program: Rally - the best in headless for increasing order values during checkout

Let’s dive into headless checkouts

I’m going to do a shameless plug here for Rally to chat about the benefits of a headless checkout system for your store. 

Reducing the friction for the shopper during the checkout process is a huge benefit to moving to headless. Offering a fast and device-optimized checkout experience can increase conversions (this means more money for you!). With Rally you can:

  • Offer modern payment methods like Klarna and crypto.
  • Integrate with BigCommerce, Swell, and custom builds (as well as more backend connectors coming super-duper soon).
  • Increase conversions and sales by offering 1-click checkouts.
  • Move the customer to checkout even faster with buy-now buttons on your products.
  • Increase average order values with post-purchase offers.

One of our clients, Luminas, took back control of their checkout experience by using Rally. They use BigCommerce as their backend infrastructure alongside a custom frontend, and Rally as a headless checkout solution. 

With this setup, the customer goes through the checkout like any other checkout, except it’s faster and at the end, they receive a post-purchase offer that is curated to what was in their cart. This last step of personalization, and an added discount to benefit the customer, has led to a 14% increase in overall revenue for the Luminas team. They are now raking in additional cash without having to increase their marketing budget or reduce their spending. Mo money mo problems? Nah - mo money mo revenue!

What have we learned?

That Rally is the best headless checkout solution! Duh!  Okay okay, in all seriousness though, what have we learned during our time together?  

  • A headless solution is what de-couples your backend systems and your frontend customer experiences. By doing this, you are free from your traditional ecommerce shackles and can spread your ecommerce tech wings.

  • “Going headless” (the cool way of referring to it) gives you - the merchant - much more control and flexibility over the experience you’re able to offer your customers as well as the ability to change out software tools & services to get functionality that better matches your needs.
     
  • This flexibility does come with an initial cost of time and money to convert to headless. It is not a super quick implementation. Patience is a virtue.

  • Take your time when assessing which developers can help you get there and the programs you want to use. You will thank yourself later for having done the initial research.

  • Moving to headless might not be right for you right away, but if you have a lot of content, are currently frustrated with your inability to scale your store, etc. then you are probably on the right path to getting started with your headless journey! 
  • You can still get the headless experience by implementing the Rally checkout without actually being totally headless. Chat with us to learn more! (shameless plug again - sorry not sorry 😉) 

As we continue to grow Rally and our headless partners, I will continue to do my best in providing you with the right resources to help you during this journey. Make sure to join our newsletter to get this news. In the meantime, if you want to test the headless waters and learn more about Rally's headless checkout, let the team know! We’re always stoked to chat about your options for increasing revenue. 

And with that, I bid you adieu! Till next time

January 24, 2023
Author:
Elizabeth Arnold
Director of Marketing
Twitter LogoLinkedIn Logo
Tags:

platforms, commerce, crypto, headless, checkout, one-click, web3, community-owned

Get the one-click checkout with post-purchase offers

Boost conversions
Open a new revenue channel
Build your way on traditional or headless