When to Consider a Headless Architecture

You may or may not have come across the term headless in your website research, and if you’re not techie, it can be a pretty confusing concept. In this guide, we’ve tried to simplify down an explanation as much as possible, and weigh the pros and cons of a headless architecture.

We’re overviewing Headless Architecture directed at a business owner wondering why to outlay the extra investment on Headless. For the tech professionals reading this to deep dive into an explanation on the technology stack, you may find this resource more helpful.

What is a Headless CMS?

In short, it's a 3rd party content management system that your development team will geek out over, and you’ll benefit from an easily-managed backend and site performance.  It “lives” outside of Shopify, as a separate admin area for your website. 

Building with a Headless CMS allows us to build your site as a progressive web application (PWA). You don’t need to know what that is (yet), but essentially it means your site will run a lot faster.  We won’t dive too much into the specifics here, but if you’re curious, google “Jamstack Websites”. 

Why to Consider Headless

1. Performance - Sites built as a PWA load and run noticeably faster. Site speed is a huge factor in checkout conversions, and this 100% will affect that.  In short, a faster site = more sales. Building with a Headless stack allows us to use the latest technologies, like Gatsby.js, to generate static pages and leverage caching to achieve faster page speeds.
2. Robust CMS - It allows your development team to build a more robust backend. For large sites, this can be super helpful, but might be overkill for a smaller site. 
3. Unified content - You have multiple platforms (Website + IOS App) and want to push content to both from one place.
   

There are many other benefits to a headless CMS, but the three above are the most directly important to our types of clients. 

Without it, we’re limited to what we can do with standard Shopify (which is a lot, don’t get me wrong). Typically, super custom Shopify sites (which is what you’re most likely getting if you’re working with us) have sections designed that don’t have pre-built editable areas in the backend of Shopify.  Think of a really educational product page that has a lot more than just a product description and photos. We have to use a 3rd party custom fields application (Accentuate) in order for us to give you the ability to edit that.  This works great, and is a viable solution, however it can be done better with a Headless CMS.  That said, we would not recommend going headless based on that feature alone. 

Sounds great, what’s the catch?

Plain and simple, it’s time and money.  It significantly increases the level of development time needed for us to build the site, and it also introduces more 3rd party fees.  We’ll recommend the best fit Headless CMS for you, but you can expect to pay roughly another $50-$200 per month in addition to a bigger scope of work to build it. 

The pricing of these Headless CMS options vastly varies. We’ve found some in the $1k a month range and others in the 10-15k per month range. It really depends on your needs, volume of sales and traffic.  

Okay, well… should we do it?

It depends.  Here’s when we’d recommend it:

1. Your site was designed with a lot of interactions, videos, animated content, etc.. Simply put, your site is way more visually engaging than your typical store.  These types of sites can really get bogged down in performance.  Your browser has to load so many different scripts and “things” that the site won’t load quickly.  Going the Headless / JAMSTACK route will greatly improve your speed. 
2. You’re expecting a ton of traffic and high volume of sales quickly. Can’t argue that better performance will only increase conversions, and if your sales are high enough you may have the budget for a more complex architecture. 
3. Your site content is going to change quite regularly - usually meaning you have a very custom designed blog.  We can give you the ability to build out content much easier with a headless CMS than Shopify’s blog manager. 
4. You want to have a unified place to manage content and push to your other technology.  For example, if you have your own IOS app, you could connect your headless CMS to that instead of having a separate content management system for your app.  This only applies if you plan to have other technology avenues, besides a website. 
   

It’s also important to be aware of the pitfalls with a headless architecture. 

1. Agency Lock-in - One of the nice things about Shopify is that it’s a hosted platform and you don’t really have to be tied to one firm to manage your site for the life of it.  If your development resources change, it’s super easy to give access to a new team just by giving access to Shopify. At that point they have everything they need as the code base is all within the Shopify Theme.  With Headless, this is not the case. Your front-end site and CMS will be outside of Shopify. The decisions around your more-complicated technology stack will require more ongoing maintenance and you may be limited with skill-sets of new teams being onboarded. 
2. App Store - One of the biggest setbacks we’ve seen with Headless architecture is the loss of the ability to use many Shopify Apps.  Once you’ve gone fully headless, the Shopify App store becomes very limited, as you’re not 100% using Shopify anymore.  If an app you want to use has an API, then you likely will be able to use it. However that will require web development to integrate with your store.  There will be very few “out of the box” solutions with Shopify apps. 
3. Complex Stack -  All of the benefits of headless come at the cost of having a complex technology stack that will require maintenance. Seemingly small requests and tasks to make changes will likely take a lot longer than you’d think to achieve, as there are now many parties involved with your website.  All to be said, the cost of owning a headless architecture for your website will be significantly higher than a standard Shopify build. 
   

Takeaways

The headless approach is a positive addition to any website in terms of performance. Choosing to go this route will for sure increase your page performance, but opens up a slew of other business decisions to be made.  It’s not always the right decision, and ultimately the biggest sales pitch about it is performance.  

If you’re a startup launching a new DTC brand, it might be overkill at first to build in a headless architecture and something you may want to consider down the line. All being said, we believe this approach is not a decision that must be made upfront prior to building a new website. If there are doubts or concerns, it definitely something that can be added to your stack at a later date or another phased project. There’s also the option to take a bit of a hybrid approach, and integrate a headless component into pieces of your site. 

We’re happy to discuss these options with you further and help determine if it fits for you and your business.