What is the next big step in eCommerce development? Adapting to the devices that take the lead on the market, of course. As desktops give way to smartphones in shopping, the technologies behind online stores change too.
The most common web architecture now is monolithic, where a frontend and backend are closely linked. Monolithic stores perform nicely on desktops. But since it has become obligatory to maintain the same level on mobiles too, such sites experience more and more issues.
In the meantime, another approach called is rapidly gaining traction: the frontend (“head”) and backend are decoupled and communicate via API. Headless commerce focuses on accelerating websites and building frontends with superior UX/UI for any touchpoint. We mean smartphones (for now) and loads of IoT devices (for the future).
Frankly speaking, the transition to a new architecture isn’t a cheap undertaking. But ignoring headless is already bringing problems. Without excellent performance and an impeccable user interface on mobile, you lose shoppers. Not following eCommerce trends (mobile-first, omnichannel) means falling behind numerous competitors.
You surely want to keep your store modern and have it lived up to customers’ expectations. But how much will it cost, and will the benefits outweigh the invested resources? We’ve collected popular economy-related questions about switching to a headless commerce solution that we heard from current and potential customers. Let’s discuss.
Table of Content
1. What Makes Headless Commerce Cost-Efficient
This emerging web development technology will gradually displace the monolithic one. Undoubtedly, headless will stay relevant as long as people shop via various devices, starting from phones and virtual assistants.
If we consider going headless from an economic perspective, there are four core benefits.
a) Better User Experience
In the 2020s, online stores are focused primarily on desktops, smartphones, and tablets as the main touchpoints. The headless approach allows creating independent frontends for an improved shopping experience across all these channels and beyond.
This is achieved thanks to cutting-edge frontend development technologies: progressive frameworks like ReactJS that communicate with the backend via API (e. g., ).As a result, customers buy in a store with lightning-fast speed and flawless UX/UI, crafted specifically for the device they currently shop from. Eventually, you gain more conversions.
Headless commerce indeed facilitates a better user experience. Take inspiration from one of our first PWA projects, . In the beginning, website visitors had to deal with some headaches, like confusing navigation, cluttered product pages, and complicated checkout. By addressing us, Timetravels received a full-fledged upgrade, including the architecture transformation.
As a result of switching to a PWA, the store realized these accomplishments:
- well-defined category layout;
- sticky bars on product pages featuring section titles at the top and CTA and price at the bottom;
- a multipage checkout to minimize cognitive load from extra required fields (there is a greater amount of them compared to regular eCommerce websites).
As far as development achievements are concerned, upgrading to Magento 2 and switching to a PWA played a key role in these store's results:
- automated content changes across all product pages (for more convenience for admins);
- improved tour cancellation feature with automatic calculations and options display (beneficial for managers and customers);
- enhanced handling of excessive sales to prevent redundant bookings and operational challenges.
b) Overtaking Competitors
After decoupling, your selling platform will stand head and shoulders over monolithic stores. Even literally: Google ranks fast websites with good scores and those powered by new technologies higher.
Users also opt for a site with greater performance and usability amongst those offering similar commodities. When people encounter a sluggish store, they are likely to leave it in irritation and open another one from the SERP. Convenient online shopping is effortless, right?One way or another, this competitive advantage will attract new customers.
c) Enhanced Scalability
Headless platforms imply future scaling. When you need to evolve omnichannel, you will easily deploy new frontends and win more loyal customers.
Besides this, headless facilitates the store’s general growth: expanding to new countries and languages, adding new product categories, and so forth. Depending on your platform, we provide a broad spectrum of services, including Magento, Shopify, and , to help you maximize the benefits of the architecture overhaul.
d) Clear Structure
Since the frontend and backend of your online store are split, their codebases are smaller and simpler. On the one hand, that means faster site updates and implementation of new features.
On the other hand, there will be fewer problems with maintenance. Firstly, if issues occur, they’re found and resolved faster in a clear codebase. Secondly, if changes in one frontend cause a break, this won’t affect other “heads” nor the backend.
40 Hours of Magento Services. FOR FREE
Try our custom development, optimization, support, and design services. One week, free of charge, no strings attached.
2. Dispelling Business Concerns Related to Headless Commerce
You’ve probably got some questions on how switching to headless architecture is organized. Here we’ll address doubts we frequently hear from our customers.
Q: How Huge Will the Transformation Be?
A: First and foremost, we should clarify the notions we use:
- In a broad sense, the headless approach means just a separated frontend and backend. The backend remains monolithic. Every monolithic store can become headless in this sense, regardless of the eCommerce platform. In particular, we provide Magento, SFCC, and .
- In a narrow sense, headless implies a more profound division of your online store. Developers do not just split the frontend and backend. The backend is also divided: your catalog, search, checkout, and other functionality can become isolated microservices. This further simplifies the store’s development and maintenance, but very few providers offer microservice division now (e.g., Sylius, Fabric, and Elastic Path).
Well, the scale of a project will largely depend on your current CMS and the result you want: a headless commerce store with a monolithic or microservice backend.
For instance, your store runs on Magento. The sequence of switching from a monolithic architecture to a headless one can look like this:
- Checking the version: it must be 2.3 or newer. If you’re still on Magento 1, then you must migrate to Magento 2. If you have a Magento 2 store, you need just an update.
- Decoupling the frontend and backend of the store.
- Creating two new frontends for the most popular channels of interaction: smartphones and desktops.
- Splitting the backend into microservices (this solution will be available in due course).
In a nutshell: yes, there are significant modifications to be done.
Q: Is It a Lengthy Process?
A: The transition to headless architecture can take up to 8-10 months. This evaluation excludes the migration stage, which is a big task in itself (for instance, ). The size and complexity (a customization level) of your online store also change timing.
Q: Ok, Will My Store Be Running During Rebuilding?
A: Naturally, it will. The downtime during deployment is minimal: from half an hour to half a day (on rare occasions). Experienced developers act cautiously and accurately so that the probability of a site’s crash is low.
Q: Is a Headless Commerce Solution More Expensive than a Native App?
A: In fact, this comparison is incorrect. Headless commerce is all about making a frontend and backend separate. In turn, a native app is a possible variant of an independent frontend.
With some reservations, the price for headless commerce switching is comparable to developing a mobile app for a monolithic store.Of course, a native application will guarantee your customers a perfect UX on mobile. But what about other touchpoints? Let’s consider the following questions.
a) Do shoppers really need your native application?
If they buy from you at least once a month, they might download it from an app market. But what if people make purchases in your store, say, semiannually?
On the whole, it’s far cheaper to attract users to your site than to get them to install the app. Possibly, you’ll need them to first land on your website anyway before offering them to download the native application.
b) Will getting a native app help to evolve omnichannel?
Partially. A native app is one more touchpoint that brings a frictionless user experience. But you need to pay twice: Android and iOS apps are created separately. You can also opt for a hybrid app, but it will be more of a compromise, lacking some features.
At the same time, the desktop and mobile versions of your store will remain unchanged and inconvenient.
Furthermore, headless allows creating more interfaces as needed to develop your omnichannel strategy. Once you decide to have a native app alongside other channels, you can easily plug it into your headless backend.
c) Is there a worthy native app replacement?
Actually, yes. A native app is matchless in terms of UX/UI as it’s initially designed for smartphones. But there is a headless commerce solution that is able to provide customers with a similar shopping experience. It’s called a progressive web app. Modern web technologies allowed developers to borrow the best features from native apps and apply them to the mobile versions of websites.
Users can add a PWA’s shortcut to their home screen, but it won’t take up any space (because it’s still a site). PWAs can send push notifications and operate offline. Finally, PWAs are practically indistinguishable from native apps in UX/UI terms and are really fast. Take a look at some outstanding .
If you represent a huge marketplace, then you need as many channels of interaction as possible. So we’d suggest switching to headless commerce (building a PWA) and developing a mobile app as well. For mid-size businesses, a PWA will be a way more cost-effective and versatile option.
3. Headless Commerce Pricing Explained
Finally, let’s talk about costs. We’ll describe how to go headless if your store runs on Magento. But the main feature of this architecture is the separated frontend and backend. With this breakdown, you can understand the approximate amount of work and funding needed for almost any modern eCommerce platform to become headless.
The Cost of a Headless Commerce Solution: Magento Development Example
Since progressive web applications have become the most demanded headless commerce solution type, we’ve taken the as a price breakdown example. Basically, the process of making by converting it into a PWA consists of four stages:
| STAGE | HOURS | COST |
| 1. Analyzing the current site and planning | 40 – 60 hours | 1,600 – 2,400 USD |
| 2. Rethinking UX/UI on mobile and desktop | 410 – 635 hours | 16,400 – 25,400 USD |
| 3. Development | 860 – 1,680 hours | 43,000 – 84,000 USD |
| 4. Release and post-release settings | 140 – 320 hours | 7,000 – 16,000 USD |
Summing up, developing a headless commerce solution for your online store may cost around 68,000 – 128,000 USD. In our guide, we’ve regarded all the aforementioned steps with detailed explanations.
Note: these are approximate calculations. The final sum and duration will depend on a few factors, such as the size of your store and the need to work on extra features and customizations.
Of course, headless commerce pricing can include additional spending. Let's name some possible items of expenses:
- ;
- Extensions: buying or developing new ones (if needed);
- Non-standard functionality: designing and developing additional custom pages, features, etc.
4. When Will the Project Pay Off?
So, we’ve found out the headless commerce platform cost. In our experience, the estimated payback period for switching to headless commerce is 8 to 10 months.
Here’s a hypothetical case.
Step 1: Let’s assume that:
- Your monthly revenue is about 300,000 USD and the net profit is 15% (45,000 USD);
- 70% of traffic comes from mobile and 30% from the desktop;
- Conversions are 2.5% and 4,5% correspondingly;
- The reasons for low mobile conversions are not the quality of traffic or the peculiarities of user behavior in your industry. Analytics can prompt this: check out at what stage visitors leave your website.
Step 2: Calculate the total conversion rate:
70*2.5%+30*4.5% = 3.1%
Step 3: Calculate expected conversion growth:
After launching a headless commerce store (with an obligatory UX/UI stage), you can expect a 50-70% increase in mobile conversions. CR on the desktop may grow too (but we won’t consider this in the calculations).
If you see a 50% growth in mobile conversions, the new total will be the following:
70*2.5%*1.5+30*4.5% = 3.975%
Step 4: What do we get?
- This is 1.28 times more than your current CR.
- Accordingly, the revenue will be 384.000 USD, and the net profit will be 57.600 USD (or 12.600 USD more than you had previously).
- If your project costs 100.000 USD, then the payback period will be about 8 months. And if your monthly revenue is 600.000 USD, the project can pay off in just 4 months.
The main reason behind such impressive outcomes is a fast and user-friendly store that makes shopping a pleasure: bounce rate is going down, and conversions are increasing.
In addition, a store with high PageSpeed Insights scores contributes to your SEO. Google rankings improve, ensuring more traffic and sales as well as a lower customer acquisition cost. We didn’t include these factors in the calculations, but, in practice, they will bear fruit too.
Message , and we will share our case studies with real figures.
To Conclude
You know how important it is to keep fit in eCommerce with its fierce competition. Headless commerce is a technological breakthrough for online stores that makes them perfect for mobile shopping and true omnichannel. Although the rebuilding requires substantial investment, it’s worth it. Turn to our team for to prepare your selling platform for better conversions now and in the long run.
