When should you go headless with Shopify?

The question isn’t, “Which is better: Shopify plus or headless Shopify?” It’s, “Where are you at on your e-commerce journey, and which platform will best meet those needs?” Understanding when a headless e-commerce site is the right solution for you, it helps to understand how Shopify works.

When should I use Shopify?

As more and more commerce shifts from physical retail to e-commerce, customers have an expectation that their favorite brands will have an online presence. For some, an Etsy shop or Amazon Marketplace offering is sufficient; however, those limit your ability to tell the story of why customers should choose you over someone else and limits your ability to tell the story of why you do what you do.

Enter Shopify. For brands doing less than $10mm/year in revenue, it’s a great way to build a basic site, add some more advanced functionality on your own, and start communicating the value of your brand to current and prospective customers. There is a whole marketplace of applications, endless “How do I do ______ on Shopify?” forum posts around the internet, and some functionality that’s much harder to build on your own.

There are of course limitations, which is when Shopify Plus or a headless e-commerce site starts to make sense and, despite the higher complexities and costs, become justified.

How much does Shopify cost?

A standard Shopify account (Basic Shopify, Shopify, Advanced Shopify) costs between $29-$299 a month. Once your business starts to grow and you need more advanced capabilities (as a rough benchmark, at least $1mm/year in sales) you may want to consider migrating to Shopify Plus. Shopify Plus has a variable pricing model starting at $2,000/month. It switches to a percentage of revenue once a business grows to a point where higher performance, deeper integrations, and more advanced capabilities are required - again, a rough benchmark is $10mm+/year in sales. Your needs as a business will drive which version has the right capabilities to help you reach your goals.

When should I use Shopify plus?

The jump from Shopify to Shopify Plus happens as your business starts to grow and you find yourself unable to solve your problems with the tools available in Shopify. Shopify Plus unlocks a variety of features to help your business scale and grow.

Consider Shopify Plus:

If you’re migrating a complicated storefront and want your own dedicated resource you can ask questions of.
Once you have more than 15 people who need to manage and interact with your storefront on a regular basis.
If you have more than one store, e.g. more than one brand, to support additional regions, or for an off-price storefront.
When you want to get deeper insights on customer behavior.
To gain access to additional applications/plugins. Shopify Plus has extra connectivity that enables applications to more deeply interact with a storefront that isn’t possible with basic Shopify.
When you start planning your business with an Enterprise Resource Planning (ERP) solution like NetSuite, or using a Third-Party Logistics (3PL) provider you want direct integration with.

Perhaps most importantly, if you want to use headless Shopify, you will need Shopify Plus since many of the Application Programming Interfaces (APIs) required are only available to Shopify Plus accounts.

What is headless Shopify?

First off, what is a headless commerce solution?

A headless e-commerce site is one where the website that people interact with is not built in the same platform used to process orders, manage inventory, and maintain the product catalog. It allows you to build a website free of the constraints imposed by the templates and layouts of a templated e-commerce platform, and uses modern and highly performant web development languages to establish your brand’s presence on the internet.

In the context of Shopify, you still use Shopify for the checkout process, managing your product catalog, and keeping inventory. Your website will use connectors in Shopify to refer to your product data and submit a shopping cart

When should I use headless Shopify?

When the limitations of the Shopify platform begin to hamper your ability to communicate the value of your business or provide the experience and performance your customers expect, it’s time to consider a headless solution. We usually find that clients with double-digit year-over-year growth percentages and revenues currently in the $8-$10 million range are ready for headless Shopify. If you’re already beyond that without having gone headless, well done!

Headless Shopify gives you the flexibility to build exactly what you need and only what you need, while allowing you to use all the integrated backend solutions of Shopify.

Headless Shopify allows you to optimize

When you go headless, you’re building your site from the ground up using purpose-built components instead of big modules that include features you don’t need. Shopify templates and components try to do everything for everyone at the expense of including unnecessary code that slows the site down or introducing unexpected interactions when you stack two components together that are competing for the same resource. Headless Shopify gives you the flexibility to build exactly what you need and only what you need, while allowing you to use all the integrated backend solutions of Shopify.

Headless Shopify allows a unique, branded experience

Shopify offers a limited number of templates, and because of this e-commerce sites can start to look and feel the same. While there are infinite possibilities with what you add to the templates, the core functionality remains the same. While Shopify Plus does remove some of those constraints and restrictions and gives you more access to do custom themes, headless Shopify allows even more customization, paired with optimization.

Customizing how people browse, search, buy, etc.
Testing how people browse, search, buy, etc.
Personalizing individual experiences for people from browsing to buying
Optimization for mobile, site speed, images, and ad copy.

Headless Shopify leads to a better customer experience and higher conversion rates

There’s a direct correlation between page load times and conversion rate. The faster your site loads, the more likely people are to check out. Because Shopify is built around universal components and modules that anyone can place on a page, it uses a lot of shortcuts when building templates. These shortcuts make Shopify very user-friendly, but often include a whole bunch of unnecessary code that the browser has to process. It’s easier - and initially cheaper—than having someone who really knows what they’re doing go in and pull out the extra bits of code.

Fast functionality vs high performance

Shopify is not highly optimized for mobile or desktop. It’s totally functional, but as your site and traffic grow, you’ll start to see hits to performance. Adopting headless Shopify allows you to dramatically decrease page load times.

Studies show that each second you shave off of site load time translates to a 2% increase in conversion rate.

Additionally, in July of 2018 (mobile) and as far back as 2010 (desktop) - Google used site speed when determining page rank. You could fall to the second page of Google (a.k.a. The Pit of Despair) due to page load time.

How custom should your headless Shopify be?

The good news is that when you take your site headless, you’re leaving the world of Shopify and entering the world of everything else that makes up the internet. There are a plethora of tools, services, and teams that can make the transition easier. There are Product Information Management (PIM) solutions to enable even more seamless omnichannel experiences. There are Content Management Systems (CMS) that let you update the content of your site more frequently and easily than you could even with Shopify. There are optimization tools that let you make granular changes—on your own—and see the results in real-time.

How long does it take to launch a headless Shopify solution?

Going headless means rebuilding your site from the ground up. While you may be able to take some design features with you from your Shopify Plus store, everything else is being built.

When it comes to a timeline there are a lot of variables, but it can take anywhere from 2-5 months depending on what existing assets you have. If you have all of your product DataWell-structured in Shopify, a well-defined creative process for generating images and content, and an organization that’s excited to make the transition, you can be closer to the 2-month end of that spectrum.

Conversely, if your data, processes, and imagery are a little bit scattered and not in tools that can easily be connected to, or you’re having to drag teams kicking and screaming out of the world of Shopify apps and into the realm of purpose-built tooling, it will take more time.

Everybody has a plan until they get punched in the mouth.

-Mike Tyson

With a whole new site, there’s bound to be some hiccups. This is a major restructuring of your online presence. It may be wise to consider an “early access launch” to some of your most valuable customers, gather feedback on anything, and test things out in the real world. This can help you get a Minimum Viable Product (MVP) launch out and in the wild so when you do roll out the whole new site, everything goes off without a hitch!

How much does it cost to create a headless Shopify site?

Building a performant site on modern web tools that incorporates development best practices and is easy for internal users to maintain takes experienced engineers, project managers, and architects. For a 2-5 month engagement, we would expect a budget of roughly $200k-$600k. There are also going to be ongoing maintenance and update costs that you’ll want to consider either bringing someone in-house to do the support for ($100k-$150k/year total cost), or keeping an agency on retainer for - typically $5k-$10k a month. This is part of the reason we typically see larger and/or growing businesses make the leap. It’s not a cheap investment, but it will propel your business to the next level.

You will find cheaper agencies, but time and time again the old saying is true, “You can have fast, good, or cheap. Pick two.” We have come in behind ‘cheap’ agencies on more than one occasion and spent a lot of time (and therefore money) cleaning up messy code and unraveling webs of weird dependencies that ultimately cost companies more than if they’d done it right the first time.

With an investment of this size, do yourself a favor and pick a partner who wants to see you successful, not an agency that wants the cash and your logo on their site.

Here are five questions to ask your dev agency before signing:

What kind of support is required for a headless site? If they don’t have an answer or tell you that it doesn’t require ongoing maintenance, that’s a good sign that they’ve never done this before.
How do you manage different environments? Ideally, you have a Development branch where the building happens, a Stage branch where you (the client) gets to review a fully working build before it goes to the Production branch, which is what your clients see.
How do you approach source control? Git has become the de facto standard, and Bitbucket, GitLab, GitHub, etc. are all great solutions for this. What’s as important though is commit history and well-commented code. This lets the next developer who picks up your code jump straight in without spending weeks/months untangling ‘spaghetti code’ that works but nobody knows how.
How do you approach measurement? Making sure your dev agency understands what’s important to you and that they know how to measure their progress against that is crucial to ensuring a long-term, healthy relationship.
Can we speak with past clients? Having been on both the client and agency side, one of the most valuable ways to get a sense of how well you’ll work with a dev agency is to talk to past clients. In that conversation, I’ll often ask some of the above questions to see if they walk the talk. These conversations should never happen with the agency on the line, that way the reference can speak freely. This is also a great way to build connections with other people in the same industry!

Be retailers, not developers

When you go headless, you’re getting into the business of running a website. It’s important to hire the right partners or internal team to support your website. That way your team can focus on the customer experience and product offering rather than managing a website. There are ongoing maintenance and costs associated with running a website, and they require specialization, unlike Shopify Plus.

How we can help

Whether it’s building a headless Shopify site or finding ways to automate and optimize your existing Shopify platform, we want you to use the right tool for the job. We always start with this question: what is your biggest challenge or mission? Then we make a recommendation for how to achieve that, even if it means suggesting a solution that has you working with someone else, or forgoing custom development work altogether.

At Assemble, we’re developers who specialize in helping retailers scale and grow their business by implementing technology that works as desired—not just as designed. We want to see our clients succeed not just after we’ve completed the first scope of work but for years to come. We’ve developed our Everyday Retail Blueprint that helps identify the ways in which your business can scale and grow, the tools that best support that growth, and a plan that fits your business goals and constraints. If you have questions, schedule a consult and we will be happy to help!