Is Headless Shopify More Expensive?

Are headless Shopify stores more expensive to set up and run than a traditional store? The short answer is yes... but they tend to make more money.

A better question is “does it make sense to invest in a headless Shopify store”? Doing a quick review of your monthly operational budget, amount of traffic, and product range will give you a definitive answer.

Let’s start at the top though. It’s worth a quick overview of how headless Shopify stores are different from the traditional setup.

What is headless Shopify?

In a nutshell, making Shopify headless is achieved by separating the backend code that runs on the server from the frontend code that runs in the browser. In a traditional shop, this code is “coupled” together.

The backend code and frontend code still communicate in a headless setup. However, it’s done via API. This frees up the frontend to run more efficiently without the weight of the full database.

The most important thing to know about headless Shopify setups is that they’re designed to solve specific problems that are inherent in Shopify, and pretty much all of the popular eCommerce platforms.

What problems does going headless solve?

Shopify was originally created in 2006 by a couple of guys trying to sell snowboards. They were unhappy with the tools at the time and decided to build a solution that would make eCommerce more accessible for business owners and marketers.

Since then, Shopify has grown to host 500,000 active businesses, which collectively turned over $36 billion in revenue last quarter.

Shopify has enabled small businesses to quickly get online with all the tools they need to start selling quickly.

But this is one of the biggest drawbacks of Shopify. It was created for small business owners and non-technical professionals to create online stores. When these stores reach a point when they’ve outgrown the platform, Shopify’s architecture and tools make life difficult.

Shopify stores naturally start to slow down as their product range and inventory grows. And as stores start to slow down, users because less likely to stick around and complete a purchase, which hurts the bottom line.

Another significant drawback for creating complex Shopify stores is that the developer experience is… well, kind of garbage. Developers are used to working in a particular way, with version control, CI/CD tooling, working on components, and using modern frameworks. Shopify doesn’t make any of this possible out of the box.

This doesn’t mean custom Shopify themes can’t be created, and developers won’t work on Shopify. It just means that developers are forced to use Shopify’s unconventional and inefficient approach.

Finally, Shopify’s backend and frontend code are tightly coupled. Changing the interface can often break how the backend code pulls in data. As a consequence, making beautiful and interactive interfaces is very difficult.

You could argue that this isn’t the end of the world and some of the default Shopify templates look okay.

Keep in mind that eCommerce is a cutthroat landscape. There are hundreds of thousands of stores competing for the same keywords, trying to find the slightest advantage to outmanoeuvre their competitors. Being locked into a mediocre interface creates an average user experience and impacts conversion rates.

A lot of these issues can be addressed by moving to a headless Setup. Although, there’s a lot of planning and work involved to unlock the benefits of a headless setup.

What are the benefits of headless Shopify?

Speed

The most tangible benefit of moving to a headless setup is how fast it is to interact with. Faster websites create a nicer experience for users and as a result drive higher conversion rates.

According to Gatsby’s senior product manager, Jack Sellwood, stores that move to a headless setup see an average of 30% increase in conversion rate.

The Gatsby guys also wrote a great piece on Jaxxon.com and the 100% conversion rate increase they achieved by going headless. Incredibly they reduced their bounce rate from 40% to 12%!

Increased Search Engine Optimization Traffic

Google also looks favourably on websites that load faster. This is especially true with the Page Experience algorithm update coming June 1st, 2021. So the faster your site loads, the more optimised its search engine visibility will become and the more traffic will hit your site.

Ship features faster

Headless setups can ship features faster because work can happen on both the front and backend at the same time. But more importantly, teams can adopt agile approaches with proper version control.

Create unique and beautiful user interfaces

Going headless means all the amazing modern JavaScript frameworks are unlocked. Headless Shopify stores don’t have to adhere to any templates or follow any trends. Need a highly interactive component to display different product sizes? No problem.

Integrate your favourite content management system

Shopify is great at a lot of things, but managing content isn’t really one of them. Going headless means you can use Netlify CMS, Contentful, Prismic, or even WordPress for writing blog articles, updating your site’s images or changing specific headlines. At the same time, you get all the advantages of Shopify’s incredible product catalogue, payment processing, and order management tools.

Keep customer data Safe & Secure

Pre-rendering all assets takes any server interaction out of the equation. This significantly reduces a website’s attack surface and makes a hacker’s life a lot harder. Infiltrating a set of APIs to access customer data is a much more challenging task, and improves the website’s security.

Progressive web application (PWA) functionality

Depending on which framework you choose to work with, achieving mobile PWA functionality like push notifications, offline mode and adding a bookmark onto the device’s homepage are easily achievable. These features all go a long way to creating a great experience for mobile users.

Demo Headless Shopify Store

If you’re still trying to get a handle on what headless Shopify stores look like, head over here to check out this simple store built with Gatsby.

How much more expensive is headless Shopify?

Finally, on to the real question. Is going headless more expensive than a traditional Shopify setup?

Going headless means you’re going to be using more tools so it’s likely that the ongoing costs are going to be a bit higher. For instance, if you decide to add Contentful ($300) and Segment ($120) into your headless setup, your monthly recurring cost is already higher than it would be if you were just using Shopify.

However, it’s possible to use a content management system like Prismic, which is $7 a month, and a free analytics platform like Google Analytics.

The real costs are incurred in setting up the store. Developing any kind of high-end Shopify store will require hiring an agency because you’ll need a team with web design and development skills.

Agencies are typically more expensive than individuals because they carry overheads. This is reflected in the prices you’ll find by Googling “average custom Shopify theme price”. You’ll see prices anywhere from $500 to $70,000.

Employing an agency to create a headless Shopify store will cost roughly the same as creating a custom Shopify theme. This is completely unbacked by research and only based on our professional experience as an agency that designs and develops headless Shopify stores.

The biggest factor impacting the price of headless Shopify stores is plugins. A lot of Shopify plugins are designed to add functionality to the front and back end. Moving to a headless setup disconnects this relationship and breaks the plugin. Re-engineering the plugin can be a time-consuming affair.

Should I choose a regular store or headless Shopify?

Headless Shopify stores are generally a good choice for established businesses but there’s a handful of more specific situations when going headless makes sense.

Reduced performance from a high number of products

Like most monolithic platforms, Shopify’s performance tends to suffer as it grows. The performance debt of filling a database with tens of thousands of products, orders, customer details, images, and all the other content bleeds across the site.

With performance becoming increasingly important, it may make sense to jump ship to a headless setup. The benefit of taking this approach is there is no data migration required.

Adding products to an existing blog

If your website has a well-established blog that you’d like to supplement with products, then headless Shopify is a great option. It’s even possible to set up a headless store with Shopify light to minimise the ongoing costs. Although, be warned that Shopify Lite supplements its low ongoing cost with a higher transaction fee.

Complex user interface requirements

Some stores need complex JavaScript components. For instance, all the big sunglass retailers have implemented a virtual try-on feature where the user can see what the sunglasses will look like on their face.

Going headless means powerful frontend frameworks like React can be employed to create visually complex and creative user interface components.

Keeping up with the technical landscape

If you’re working at a start-up that has rapidly changing requirements, then locking into a technology stack can be a costly mistake.

Going headless means new services can easily be integrated into the stack. This is exactly how Koala runs their setup. They’ve taken it one step further and deconstructed their architecture into microservices that achieve one avenue of functionality.

This has made them incredibly responsive to change. As their head of technology, Richard Bremner says

"Most companies would kill for our velocity."

Wrapping up

Headless Shopify stores are a bit more expensive to run on an ongoing basis, and they do have a high set-up cost… but it’s a growth play.

Achieving conversion rates that are 30% higher than traditional stores is nothing to sniff at. Especially when it’s paired with the flexibility that comes with going headless.

There’s a ton of benefits of going headless. It makes sense for most established businesses. If you’re tossing up between paying for a custom theme or going headless… go headless!