New! Our platform - Quizpipe is live!

Productivity

How To Calculate ROI On Moving To Headless Shopify

Tim Davidson
by Tim Davidson
6 min

Converting your existing Shopify store into a headless setup is a big decision. Unless you’re an experienced developer or have an in-house team that are familiar with static site generators and the JAMstack, chances are you’ll need to work with an agency or contractors to make the change, which means paying for it. Before you make that decision, it’s worth figuring out what return on investment you’ll see.

You might not know exactly what a headless Shopify configuration is but you’ve heard that a lot of larger companies are moving in this direction.

Here’s a quick overview of how headless Shopify configurations work. It helps to start with how a monolithic Shopify website works:

architecture diagram of monolithic shopify configuration

Shopify runs backend code on it’s servers that dynamically generates the content to be displayed on the storefront. Each time a new visitor hits the site, queries run on the server that tell the frontend to display particular products, images, text and other page elements.

This is obviously skipping over a lot of other steps like DNS resolutions, handshakes, load balancing, caching, database parsing and a ton of other less relevant actions,

In contrast, a headless Shopify website works like this:

architecture diagram of headless shopify store

The front and backend are decoupled and interact through APIs. Rather than the content being dynamically generated on the fly when a user visits the site, all the images, text, products and other content have been “pre-rendered”. This means they can be delivered incredibly fast since there’s no logic that needs to run to figure out what should be served.

Working out your return on investment

To figure out your return, you’ll need to know a few variables:

  • Current page load time
  • Monthly website traffic
  • Average conversion rate
  • Average cart value
  • Cost to upgrade

Page load time

The two best tools for page load time are GTmetrix.com and Google Page Insights. We’ll stick with Google Page Insights for this example.

Open up the site and plug in your URL to record your “time to interactive”.

cleancommit.io page insight score screenshot

Traffic and conversion rates

If you’re a conscious shop owner, you probably have these numbers on hand. If you don’t, then head over to your Shopify Analytics dashboard. All the metrics you need are listed on this dashboard.

Calculating your increase in revenue

The conversion figures below were gathered in a study of 26,000 eCommerce websites based on their load times.

table showing load times and their impact on conversion rate

We’re going to use these metrics as a guideline. It’s worth pointing out that these are aggregated figures so some weighting is required.

To calculate your increase in revenue, we’re going to assume a sub-1 second load time using a headless setup.

Here’s the formula:

revenue gains formula for improving page speed

Here’s an example of this formula:

  • 3 second load time
  • 1.5% conversion rate
  • $34.75 average cart
  • 25,000 monthly visitors

Let’s start by figuring out the monthly revenue baseline:

Revenue baseline formula

3 second to <1 second load time would be an improvement of 2.93% to 8.11%, which works out to be 176.79% improvement as illustrated below.

revenue improvement calculation

We multiply the shop’s average conversion rate by this improvement:

new headless Shopify conversion rate formula

Finally, we take the monthly traffic and average cart and multiply it by the new conversion rate to work out the new monthly revenue numbers:

new monthly revenue formula

That’s a $9,990.63 increase in monthly revenue.

Cost to upgrade

This metric is unfortunately a bit of a finger in the air situation because there’s too many variables to accurately predict how much a headless Shopify conversion will cost.

The biggest time consuming activities in converting a Shopify store to headless are rebuilding the theme layer, integrating a CMS, and creating custom functionality previously achieved by plugins.

Rebuilding the theme layer typically takes the most effort, and it can help to take a quick audit of how many different types of pages your site is currently running. These are examples of page types: Home, About, Products, Categories, Cart, Accounts.

Then have a look at what plugins and apps your site is running. Most plugins will need to be recreated manually since a headless set up breaks the native communication between Shopify's frontend and backend.

Scoping projecst ia tricky art. To give you a bit of a ballpark a large headless shop will take anywhere between 200 - 400 hours to complete with a rough breakdown of tasks like this:

  • Design: 40
  • Frontend interface: 200
  • CMS Integration & Logic: 20
  • Testing: 16
  • Project Management: 16
  • Deployment and configuration: 8
  • Total: 300 hours

Most agencies will price this work against a standard rate, or a rate for each task. Assuming an mixed rate of $100/hour, this project would cost:
300 * $100 = $30,000.

Return on investment

In our example above the store has gone from a monthly revenue of $13,031.25 to $23,021.87. Over the course of a year, that’s a gain of $119,887.50. The cost of the project was $30,000.

The return on investment would be:

3 year return on investment table from headless Shopify upgrade

Future proofed

The return on switching to a headless Shopify store would continue to compound beyond year three.

Headless configurations are relatively new, so it may sound like a bold claim to work out the return on investment beyond the first year. Things in the web space change quickly so who’s to say there won’t be a better solution coming out in the near future?

It’s a legitimate question, but the fact is big companies are making the switch to headless Shopify in droves. Here are some recognisable companies that have made the switch:

These companies would have invested tens, if not hundreds of thousands of dollars to make the switch to a headless configuration. The best indicator of when a technology is here to stay is when it’s adopted by the big players.

Is Headless Shopify Right For Your Business

Now that you have some hard metrics around the potential return on investment of moving to a headless setup, you need to weigh up if the move is right for your business.

It’s easy to argue that the return on investment alone should sway the decision, but there are other factors to consider. Moving to a headless setup isn’t right for every business. For starters, you need to have the budget to fund the conversion project.

Your store may be working perfectly and receiving relatively low levels of traffic.

Or it may already be loading in around 2 seconds.

Maybe your site is super reliant on plugins which would need to be manually developed under a headless architecture, raising the project cost.

There are plenty of reasons why moving to headless may not be the right choice. Before making the jump, talk to a headless Shopify specialist to weight up the pros and cons.

Tim Davidson
Tim Davidson
Tim is the face of the company. When you want to kick off a new project, or an update on your existing project, Tim is your man. With a background in project management, Tim specialises in managing the chaos around the company.

Have an idea you want to discuss?

We’re based in Canberra, Australia and we LOVE working with locals… but we work with clients all around the world.

From the U.S. to the U.K. From Norway to New Zealand. Where there’s a problem to solve, we’ll be there!

Insights

More insights from us

Why we use Tailwind CSS as our primary framework
Productivity

Why we use Tailwind CSS as our primary framework

Selecting the right CSS framework is key to scaling the team's capabilities and experience over time. When working with…
Case Study: FreshOnline
News & Announcements

Case Study: FreshOnline

Jeremy approached the Clean Commit team looking for help launching a new eCommerce business that aimed to deliver bulk…
Case Study: Complyant
Design

Case Study: Complyant

Project overview The Complyant team were scouting for a design and development partner to help redesign their…