10 Concrete Benefits Of Headless eCommerce
Headless eCommerce is becoming a viable option for merchants who aren’t getting what they need from a traditional monolithic setup. While it’s not a silver bullet, there are a lot of headless eCommerce benefits that are powering this movement.
Clients have recently approached us with eCommerce businesses that started as simple Shopify, WooCommerce and BigCommerce stores. After several years of business, they’ve added a lot of plugins, modified their themes, and adopted 3rd party systems to try and customise their stores to their needs.
There are a few problems that usually surface with this approach. Firstly, plugins stop working or break parts of the site. Secondly, page load times start getting slow. Finally, the store becomes harder to manage and takes more time to perform simple jobs.
Pretty much every eCommerce store owner that’s worth their salt is on a million to squeeze more customisation, flexibility and performance from their store.
Headless eCommerce is a better solution to achieve these requirements. We’ll save you from the technical explanation of how it works, but in general, decoupling the eCommerce backend and store frontend cuts out interaction with the server and speeds the user experience up significantly. It also allows different, more dynamic technologies to create the customer-facing storefront without being permanently locked into one solution.
There’s a fair bit to unpack here. We’re going to break the benefits of headless eCommerce down into 11 bite-sized points:
Benefits of headless eCommerce
1. Speed
Fast websites keep users happy and browsing for longer. It’s a simple argument, but there’s so much evidence that it’s true. Users don’t want to wait around for things to load.
A super-fast, snappy website also unlocks some valuable SEO benefits. Since Google researched their User Experience algorithm update in July 2021, website owners with highly optimised sites have seen increases in traffic and ranking of their pages.
The problem with traditional monolithic eCommerce platforms is that as the catalogue grows, order history expands, and site functionality extends, performance issues start appearing. The database takes longer to return queries, heavy unnecessary javascript libraries weigh down the frontend payload, and the experience for users gets slower.
This issue compounds when the site receives large volumes of page views and orders. When the site has to handle thousands of queries in a short period of time, it can become sluggish.
There are plenty of reasons for eCommerce sites becoming slow over time. Going headless alleviate most of the issues. Building a custom frontend with a platform like Gatsby pre-renders pages as static HTML, CSS and JavaScript. There’s no interaction with a server, cutting out the middleman.
Explaining the speed of a headless site is a bit academic, but here are a couple of examples to play around with:
FreshOnline - Gatsby + Shopify + Prismic CMS
Saleor Demo - Next.js + Saleo
Next.js Commerce Demo - BigCommerce + Next.js
We built the FreshOnline store, by the way. The other two storefronts are demo shops but handy for getting a feel for the lightning-quick load times of headless eCommerce stores.
2. Multi-Language
Multi-language support is arguably one of the biggest benefits of headless eCommerce implementations. There are ways around this issue for monolithic solutions, but they’re difficult to manage and kind of clumsy.
If you’re a European eCommerce company, chances are you’ve struggled with multi-language issues in your store.
eCommerce platforms like Shopify provide some features for multi-language and multi-currency support, but as a company that serves a U.S. market primarily, it’s not a problem they’ve given enough attention.
Going headless allows your store to serve language-specific versions of your products and content based on the user’s country of origin. Companies like Netlify are getting ahead of this problem with new features like Netlify Edge.
Over the past few years, many excellent headless content management systems have hit the market. These platforms make managing multi-language content an organised task for shop owners.
3. Content Management Systems
Going headless with your eCommerce setup means you can manage your store’s content with a 3rd party CMS instead of Shopify, BigCommerce, or whichever eCommerce engine you’re using.
Having the option to plug in a powerful CMS like Contentful, or something familiar like WordPress can significantly improve your team’s ability to produce new blog articles and keep on top of content changes.
Calling back to the last point, having a more flexible and tailored solution for writing articles in different languages is a feature plenty of store owners need if they’re targeting customers across an entire continent.
4. You’re not locked in
A few months back we were approached by an eCommerce business owner complaining that his eCommerce company had just tripled their prices.
He was happy with his site’s design, its performance, and its configuration. He had spent years installing plugins, making tweaks and getting everything perfect, only to have the rug pulled out from underneath his feet.
Adopting a headless eCommerce architecture would have prevented this problem. If the eCommerce platform becomes unsuitable, you can connect new technology in its place without having to change the design or the customer experience.
Swapping eCommerce engines would require significant effort, but it’s completely achievable. In a way, replacing your website’s microservices is a kind of insurance policy against picking a technology that doesn’t fit perfectly.
5. Maintenance & Scaling
This benefit only applies to larger stores with large data sets and a decent amount of customisation. If this sounds like your store, you’re probably running a decent list of expenses to keep everything afloat.
Monolithic platforms tend to require a lot of maintenance to keep everything running smoothly. Bug fixing can be tricky because changes to the website’s front end are deeply connected to the back end.
Interacting with the eCommerce backend through an API reduces the number of moving pieces and ends up requiring a fraction of the maintenance.
A decoupled approach also means that the static files that make up the website’s frontend can be getting hammered by traffic without bringing down the backend. Headless eCommerce stores are ideally suited to large volumes of traffic and sales.
6. Flexibility & customisable
Our team was recently working on a bespoke monolithic Shopify theme and ran into a problem. The client wanted to use a plugin to handle her rewards. The plugin had its own limited templates that wouldn’t accept a whole lot of custom styling.
This scenario was a headache since we had already created a custom design for this part of the website before first investigating this plugin.
A headless implementation would have allowed us to build a flexible design and then call the rewards system data and functions through the rewards platform’s API.
The flexibility offered from headless stores is unrivalled in this regard. There’s no need to stick to templates or predefined layouts. The store’s design can be completely tailored to create the ultimate shopping experience.
7. Improved security
Adopting a frontend framework like Gatsby to power your store means users interact with “static” files. There’s no communication with the server when a user arrives at the store. All the HTML, CSS and Javascript files were created at build time.
This architecture makes it incredibly difficult for hackers or people with malicious intent to attack your site.
Since all communication with the eCommerce backend is happening via an API, any kind of data interception or unauthenticated backend access is much more difficult to execute than for a traditional monolithic setup.
8. Better developer experience
eCommerce platforms like Shopify and BigCommerce are proprietary software, meaning they’re owned by a company that won’t just release all the code to be modified. Understandably, they don’t want their code to be stolen and the platform replicated without permission.
As a result, they create a structure where the development community can create themes and templates. This “structure” is usually a pain to work with for developers that are used to doing things their own way.
Typically, there are restrictions around what can be modified and particular approaches to follow when coding a new theme. It’s these quirks that make for a frustrating developer experience.
On the other hand, developers can use popular frontend languages and frameworks to develop headless eCommerce stores. Frameworks like Gatsby and Next.js have huge ecosystems of extensions, libraries, plugins and tools that help build features that would be otherwise unachievable.
An excellent example of this argument is that Shopify only recently implemented support for git in its platform. Before this feature, multiple developers couldn’t be working on the same store simultaneously without the risk that they’d break the other person’s code and have to manually figure out which part of the code should take priority.
9. Progressive Web Application out of the box
Going headless with a framework like Gatsby or Next.js means your store can leverage Progressive Web Application features.
In a nutshell, PWAs are applications that run in the browser but can be installed. The biggest use case for a PWA is wanting to provide a native mobile app experience without having to build separate mobile and desktop applications.
PWA features are handy for eCommerce stores because they provide a mobile-first experience for users that lets them feel like they’re using a native mobile app. The apps are lightning quick and perform cool functions like sending push notifications.
10. One eCommerce backend but many storefronts
The decoupled nature of a headless eCommerce store means that it's no longer one backend to one frontend relationship. You've unlocked the flexibility to manage multiple collections of products in a single eCommerce engine, but spin up separate frontends (on different domains) and pipe your products in.
While this can be get a bit messy, it almost means you can test different product lines out with new stores without having to spin up and pay for additional stores.
Disadvantages of headless eCommerce
Talking solely about the benefits of headless eCommerce wouldn’t be a balanced review. There are some issues to overcome with this architecture, and it’s not the right choice for every business.
1. A lot of eCommerce plugins break
Most plugins contain integrated code that runs on the front and backend. Going headless with your eCommerce store breaks that connection. The frontend code isn’t running on the correct domain and won’t work. This disconnection typically breaks the correct operation of the entire plugin.
There’s usually a way around the issue. It requires finding a different service that provides an API. A custom frontend interface is developed and connected to the API, effectively re-engineering a headless version of the plugin.
The downside of this approach is it takes more effort and disqualifies your store from simply installing plugins.
2. More moving pieces
Going headless requires multiple services working together. Editing content is performed in a different platform to manage products and orders. Analytics needs to be reinstalled, and this is usually handled through another 3rd party platform. It’s a similar story for marketing and automations.
The result is a collection of systems that need to be managed. A lot of store owners aren’t troubled by this idea since they’re already running a dozen different services. However, for store owners that are just starting out, the idea of having everything in one place is more appealing.
3. Time to market
Creating a new Shopify store can take 15 minutes. It’s a simple as signing up, picking a pre-built theme and adding some content.
By contrast, headless stores need to go through a design process, then require a custom interface to be developed and APIs connected to pull in data from various sources. Even though the results tend to be better, the time required to get to market is much greater.
If you’re in a pinch to get your store up and running, a headless approach is probably not the correct choice.
4. High Initial cost
Headless stores our team have created have taken around 60 to 80 hours to design and 300 to 450 hours to develop. Regardless of what hourly rate a developer or designer is charging, that’s a decent price tag to swallow.
Developing headless stores is an advanced skill that requires a combination of effort from talented designers and developers. As a result, most agencies charge a minimum of $50,000.
Wrapping up
Headless eCommerce is an excellent solution for businesses searching for a faster, more flexible, and better fitting solution.
It’s not the right choice for every business, and monolithic stores are still the overwhelming choice for most eCommerce businesses. However, there’s an undeniable trend of companies going headless.
Customers expect fast, seamless, mobile-friendly experiences, and if they can afford the investment, going headless is providing worthwhile returns.
We wrote a short article that provides a relatively accurate way to estimate your return on investment from going headless. Give it a read if you’re still on the fence!
We're hiring
If you're a frontend developer or have a technical friend that's looking to join a relaxed, fully remote workplace where we encourage part-time hours and a flexible lifestyle, then let them know we're expanding our team!
