When is the right time to go headless with Shopify?

When is the right time to go headless with Shopify?

I’ve been in web, app, and software dev for almost 15 years. And yet, this is one of the trickiest questions to answer when you’re put up against a wall.

This article is for all the CTOs out there who're dipping their toes into the world of headless commerce; see it as a potential solution to embedded business challenges — but are unsure as to whether it genuinely makes sense to take the plunge.

There are situations whereby headless may not be the best fit, and times where it’s the only plausible option to building out the kind of experience and/or architecture that will actually work for your target consumer and the products that you sell. 

Generally, headless will become a consideration once you feel as though you’re up against a brick wall: in spite of the heavy customizations you’ve made to your Shopify theme and the copious apps you’ve installed, your store feels stuck in a place where you’re not quite able to implement the functionality and user journey that your consumers crave.

You may also feel as though you’ve outgrown Shopify, and find that your team is commonly seeking workarounds for platform limitations that you encounter. These platform limitations can vary in nature  commonly they’ll revolve around one of the following themes, or a combination of them:

Challenges with the data structure that Shopify uses for products, collections, or content.

Our clients often report challenges with managing their product’s variants, attributes, and options—usually because the types of products they sell don’t quite fit with Shopify’s expected field structure. 

Often this difficulty is felt most in cases where a merchant either sells large quantities of product, or sells interchangeable and highly configurable products, which can be made up of hundreds or potentially thousands of combinations that are tricky or impossible to manage with Shopify‘s platform alone. 

Theme and user experience challenges

Templating a storefront with a Shopify theme is adequate for straightforward shops, but for stores with highly nuanced frontend implementation requirements, Liquid doesn’t provide the best set of tools. It’s not necessarily a matter of design and UX complexity, but more so to do with how the frontend intends to deliver on your specific customer journey. 

We're the experts in Headless Shopify.

Your search for answers ends here. Discover our services.

Explore Headless Shopify Services

Liquid makes assumptions about customer journey, the elements and structure of a given page template, and the components of which your store should contain. 

At the same time, it doesn’t (and can’t possibly) cater to all of the unique customer journey’s that are standard across various industries, verticals, and market segments. 

Whether you’re selling B2C or B2B, the fact is that shopper’s expectations from an online storefront differ greatly across industries. 

Take, for example, the automobile market. Shoppers expect the ability to compare products, not just on product pages but also on category and collection pages. When perusing online shops that provide aftermarket parts, they expect the ability to enter or select their current vehicle and receive instantly refined results, which can be segmented easily by a variety of facets with a compatibility guarantee. 

Beyond this, consumers expect the storefront to adapt in real time to the information they provide about their vehicle, such as its color, model, and year. Going a step further, imagine a scenario where the storefront allows users to create multiple vehicle profiles within their account, specifying the attributes of each of the vehicles they own. 

When browsing the site, now — or when they return later, they’re able to select the specific vehicle they’re shopping for and browse an instantly refined, reactive store that displays parts compatible with their specific vehicle, over all categories, collections, and supporting pages — including an on-site blog, promotional deals, instruction manuals, and a help desk. 

While it’s possible to cobble this kind of experience together in a non-headless Shopify store, you’ll more than likely have to sacrifice site speed, maintainability, and depth of the feature set. We've seen these limitations first hand during large replatforming projects, where clients' existing stores struggle to perform under the weight of complex customizations.

Maintaining a large set of customizations and workarounds within a traditional Shopify setup can pose challenges to navigating updates made to the Shopify platform and any installed Apps, due to the extent of theme customizations and additional JavaScript that will have to be carefully pieced together in order to pull something like this off effectively.

Headless builds provide a unique value proposition for nuanced storefronts like these, where the customer journey differs significantly from that of a cookie cutter online store.

Difficulty in identifying Shopify apps that work in the way in which your business needs them to.

The Shopify App Store boasts several thousand apps that promise to extend store functionality to varying degrees. While many of them provide a genuine value proposition, they tend to be made for the many, rather than the few. 

For webshops with highly specific requirements — where compromise won’t work — this poses a challenge. When your business model, the nature of your products, and ideal online offering demand nuanced functionality that delivers on particular objectives, pre-made apps can fail to provide a focus narrow enough to work. While this isn’t always a dealbreaker, there are most certainly uncompromising requirements that demand very specific implementations.

If you find that you’re persistently struggling to identify pre-made Shopify apps that can achieve the flexibility you’re looking for, this is a good indicator to consider a headless build.

The value proposition of headless architecture is flexibility.

Most challenges can be overcome through custom development, and a decoupled build is better-placed to be able to provide this while still leveraging Shopify for the commerce elements it excels at.

Complications arising from multi-storefront setups.

Running multiple storefronts, micro-frontends, or targeted, account-based B2B experiences from a single Shopify store can be a challenge. While Shopify has introduced measures to counter this, such as Shopify B2B and Shopify Collective, much is still to be desired. These options simply don’t work for many business models. Usually, complexity breeds incompatibility when it comes to Shopify, particularly from an architecture point of view.

Informal chat? Works for us. 🤘

Contact Cocoon for a no-cost, no-obligation consultation.

Let's talk Shopify

Thankfully, the limitations associated with maintaining multiple frontends don’t affect headless setups the same way, thanks to their architecture.

With a headless Shopify architecture, we can utilize a single Shopify store, coupled with any other supporting applications (such as a headless CMS for more targeted content management), and pull the data into multiple storefronts through a process called data sourcing. 

Data sourcing is entirely selective, so each storefront can pull only what it requires (declarative data sourcing), as defined by the projects specifications. 

In short, this means that a single Shopify store can serve as a backend and data hub for multiple headless storefronts simultaneously, with each storefront sourcing only what it requires from Shopify in order to deliver the specific experience required of it. 

Beyond this, other alterations to the buyer experience and customer journey can be implemented separately in each front-end. Pricing can differ (with appropriate middleware, frontend-specific customizations, and draft-order wizardry), and the products listed can differ between the storefront. These are just some of the possibilities.

Complex pricing logic.

Complexity in per-product pricing can be a challenge with Shopify. Fortunately, headless builds are able to simplify this problem by relieving Shopify of complex logic implementations, allowing the task to be fulfilled by a more suited function elsewhere.

Written by Raphael Valinejad, agency director @ Cocoon