"Headless" can be a challenge to explain.

I often like to refer to it as a route to solve a preexisting problem, which is how most of our headless builds come about.

The biggest benefit, in my opinion, to headless architecture (whether using Shopify or other), is that it provides the toolset to achieve/resolve that issue. You know..., the issue that's been causing headache and frustration for you over the past few years?

If you don't have that issue, headless might not be for you.

That issue is oftentimes unique to the business presenting the problem. Most often, though, it'll come down to one of two things:

• Site Performance
• Interface & Experience Flexibility, particularly in relation to very large or complex product lines, or custom and made-to-order products.

In the absence of one of these pain points, it can be difficult to justify headless because of the time and expense involved.

However, if you're currently experiencing challenges with one of the above issues, read on.

Experience

With headless Shopify, an entirely new world of flexibility is unlocked. 

In a headless build, your frontend can look, behave, respond, and do all of the things that you currently can't. 

Interface and experience functionality that you so-far haven't been able to achieve with apps or custom code can be implemented with relative ease, because you're now in total control over the frontend presentation layer and experience design. 

This matters most to brands who sell something very custom or specialized, where the experience needs to deliver in a manner that is "just right". In the absence of this flexibility, the experience just breaks down and causes confusion to consumers.

If you’ve struggled with the flexibility of your Shopify frontend, even after implementing a custom (or heavily customized) theme, the frontend flexibility that headless Shopify affords might peak your interest.

Headless Shopify storefronts use Javascript-based frontends, in contrast to Liquid templating.

How?

Through the use of modern (I like the term "progressive") frontend frameworks such as Hydrogen, Remix, Next.js, and Astro. 

At Cocoon, we favor React-based frameworks, which all of the above either are (or in Astro's case, supports.)

Hydrogen is Shopify's own framework, which is built on Remix, with Remix being built on React.

All of these options provide for unique benefits, and selection of the best frontend framework is a decision that needs to be made carefully, taking into account the entirety of the storefront's requirements.

Why Javascript?

Because JavaScript has proven itself a recognized winner as the frontend programming language of choice. 

For flexibility and interactivity, Javascript wins every time. 

React in particular provides developers the power to implement rich and highly functional pages for Headless Shopify stores, as standard. 

For development teams fluent in Javascript, the time-to-live for the development of complex new frontend functionality is, in our experience, relatively shorter than in a non-headless build.

JavaScript aside, with headless Shopify you regain full and total control over the design, visuals and rendering of the storefront, and so you aren’t required to abide by any particular page structure, template structure, or in fact any other structure at all. 

With headless Shopify, you are afforded total design freedom, and can engineer the storefront's layout and aesthetics without limitation. This is particularly important for higher-level branding and experience requirements, as is often the case with luxury brands, made-to-order products with a vast number of configurable options, or for select industries where the storefront presentation differs from that of a typical ecommerce store setup.

Today, branding and user journeys are key components to differentiating your online offering, but additionally delivering an unrivalled experience to consumers, and as such it’s imperative to retain total control of the creation and development of this journey. Through websites and progressive web apps, the front end interface, user experience, and effective delivery of your brand story, are all equally key to this. We believe that clients should always be empowered to deliver the frontend shopping experience that a brand strives to provide. With online retail, the experience that users have whilst engaging with
your store will be the difference between making and losing a sale, and so this should not be compromised on.

Whilst traditional Shopify (non headless) provides a satisfactory level of customizability through liquid templates, it’s nothing compared to the design and frontend implementation freedom that headless Shopify provides.

Headless Shopify implementations also boast many additional ways in which the experience can be further customized. In terms of user experience and functionality, you’re potentially able to build anything you dream of, within the technical limitations of your Shopify plan. For most headless stores, the Shopify Basic plan is often sufficient, though Shopify Plus provides the ability to customize the actual checkout page.

Overall, headless Shopify provides a way to customize an e-commerce storefront with superior levels of flexibility, making it possible to implement design-forward, experience-enriched web shops. This is achieved due to the fact that developers have the ability to architect and build a headless Shopify application in-line with the store’s design and functional requirements, rather than having to work with the limitations of Shopify’s liquid themes; even when they’re customized or have been built bespoke.

Speed

Faster Response Times with Headless Shopify

Headless Shopify implementations can make use of Jamstack’s well-known ability to deliver faster response times. Because of the way headless setups work, frontends will typically have the ability to load much faster for the end user. This is down to the fact that headless Shopify stores don’t require constant connections or frequent network requests to retrieve product or page data, as this is effectively “cached” during a build stage. Static site implementation is commonly used for headless Shopify stores, which involves fetching all the product data up front (during what’s known as a “build” stage), and subsequently creating the required product and category pages. When users try to load these pages, their browser returns something they already exists.

In contrast, non-headless implementations will typically build the page at the time the user requests it. In simpler terms, using static site generation for your headless Shopify store effectively “caches” all the data, allowing pages to be delivered at incredible speeds. Users are no longer waiting for a server to process requests and query a database; they are instead served with a pre-built page that includes all of the information they expect to see. This is one of the key benefits to headless setups, in that they provide the ability to prebuild and aggressively cache content where desired.

A typical use case for this is for pages that are not frequently updated, or don’t require a real-time network request to be sent. For example, a Shopify store that adds new products once a week could benefit from static site generation with a headless setup, because page content would remain the same for a whole week, until new products are added to the shop’s lineup.

You can serve pages that are largely cached for the time period between product updates or additions, and the site will rebuild itself once an update is made. This leads to the faster response times, as large amounts of the site have been prebuilt and cached ahead of the end user’s request. Of course, even with a static site implementation, some aspects of the store will always return real-time information; such as stock status, the user's cart object, and account pages such as order history.

But these requests are few and far between, contrasted to the incomparable number that would be required to constantly generate pages as a user navigates through a traditional, non headless e-commerce store. When you multiply those requests by the number of users visiting the store, it’s easy to see how this quickly racks up; ultimately demanding more of a server due to the frequency of network requests. With a headless Shopify store, you can vastly reduce the number of real-time network requests that are made by a user, by serving pages that are pregenerated and have been cached ahead of time.

Headless storefronts come with all the perks of Jamstack, which means that if you opt for real-time data fetching (perhaps your store’s content is updated too frequently for static site generation to make sense), there are still performance benefits to gain.

For a start, headless Shopify stores boast the ability to selectively define which data is fetched at runtime (real time data fetching as the user browses the site), and which data is fetched at build time (in order to pre generate the page so it can be served without the requirement to fetch the data live). So even if your headless approach does not make use of static site generation on the whole, you’re able to reduce overall runtime network requests by selectively storing some of that data from the earlier build process. That’s still going to know a difference to overall show performance and response times.

Furthermore, though, various frameworks utilized for headless Shopify development support pre-fetching of data during runtime. Gatsby is a good example here. Gatsby has long supported pre-fetching: It does this by identifying which links on a page the user hovers over, and starts fetching the data before the user even clicks the link. This activity is imperceivable to the end user, meaning that they aren’t even aware it’s happening. This is a real winner when it comes to response times, as the page subsequently loads significantly faster once the user actually clicks. This is a game changer for user experience, reducing perceived load times.

The Jamstack approach overall lends itself to improved response times and more aggressive cacheability, so it’s likely that your Headless Shopify Developer will be utilising additional techniques besides prefetching data and optimising build time vs runtime data fetching.

One such example is gatsbys impressive image compression and lazy loading (blur up) functionality. For headless Shopify sites that utilize build time data fetching, images can be downloaded and optimized through compression, and served to the end user through Gatsby's image plugin. Not only does this reduce response time through lazy loading of the image, it means that the file is served by the same origin as the storefront itself, (rather than using the Shopify URL for the original image), and this can reduce the time lost to the additional DNS lookup. Factor in a headless CMS as well, and you could be losing time for each additional DNS lookup.

It’s good to note that it’s not always as straight forward as this, as browsers are known for also rate limiting the number of simultaneous requests to the same host, which effectively throttles the overall download speed of these resources required to serve the page, but it’s good practice to trial the various options for image/asset compression to determine which provides the optimal overall download speed for key pages.

Overall, it’s easy to see how headless architecture can utilize multiple techniques to optimize page speed for the end user, providing superior developer tooling for improving the user experience.

A note on caching

With a number of individual layers to headless architecture, your options for caching are significantly improved compared to standard Shopify.

Besides the performance level of your Shopify Liquid theme, there isn’t a whole lot you can do to improve response time on Shopify-hosted sites. In general, Shopify does a reasonable job of delivering pages at a good, reliable speed, but your options for caching aren’t configurable.

With Headless Shopify, you have a variety of options available:
- Browser-level caching
- Caching at the Network level, for the frontend itself
- Object-caching in front of your Shopify API calls

These strategies allow headless storefronts to cache far more than simply assets and images, offering opportunities to further optimize pagespeed and response time.

Integrations

Building a more interconnected stack, with deep integrations with Headless Shopify

Fundamentally, the Jamstack approach fosters high-level integrations and API-based methodology. After all, this is key to developing modern, interconnected experiences.

Integrating your solution with existing CRMs and ERPs, as well as third-party platforms and tools, can provide a Headless Shopify implementation that provides far more than just a superior storefront. Marketing automation, deeper insights and analytics, and new opportunities for data processing are just some of the higher-level components that can make up an efficient Headless Shopify structure.

Leveraging Webhooks to build more interconnected experiences with Headless Shopify

The two fundamental capabilities of the APIs that Shopify provides are the ability for headless storefronts to retrieve data from Shopify (about your store and products), and to send data back (to process an order, for instance).

This is great for the majority of data requirements that headless Shopify stores will need at first.

However, Shopify additionally provides a web hook functionality for developers to implement further advanced functionality into your overall build and its workflows and pipelines.

Think of Shopify webhooks as notifications. They provide the ability to receive information as-it-happens, and are sent from Shopify to your third party application, without your application requesting the information directly or continually.

This allows us to do some really cool things with headless Shopify. The most basic example would be triggering a rebuild of the storefront automatically, whenever product information is updated. This offloads an additional step, meaning that the store owner nor your developer are required to manually push updates to the site (even if it were static) in the form of rebuilding and deploying. Your Shopify developer can implement this to so that it happens automatically, each time a notification is sent by the Shopify webhook.

Webhooks allow far more complex and impressive workflows to be triggered, however.

They can be integrated within your headless Shopify setup to push data to different endpoints, including various third party applications that you may be using. Popular requests are to implement automatic notifications with a separate headless CMS, third party CRM, or even mailing lists.

Lots of powerful things can be done using the webhooks functionality, but in the context of headless Shopify, it provides an ability to automate functions and trigger external workflows upon a vast array of events that may occur within Shopify.

A note on Shopify Apps

Fear not, Headless Shopify can still be compatible with your existing Shopify Apps. In reality, it depends entirely on the function of your Apps and whether they are responsible for enhancing backend or frontend functionality.

Any Shopify Apps that are aimed at enriching the administration and management experience of your Shopify store will generally be more-or-less compatible with your new Headless setup.

The same can't be said for frontend-related apps, as these wouldn’t be interacting with your new decoupled storefront.

Obviously, your development partner will need to assess your existing apps to identify which will continue to enhance your Shopify administration experience well into your journey toward decoupled Jamstack architecture.

Customer Management

Implementing powerful solutions for User Management & Authentication with Headless Shopify

Due to the level of flexibility that comes with headless shopify, e-commerce stores have greater control of how users are managed and how they authenticate.

While Shopify does provide some ability to store user data, it’s often preferred to implement a custom authentication flow on a Headless Shopify store, given the newfound control

You can achieve better results with an alternative tool, such as Auth0, for authenticating users and storage of user data. This puts the authentication process in the hands of your store, ultimately providing more control.

If you have an existing userbase elsewhere, integrating SSO (Single Sign-on) with your existing application is also a possibility, eliminating the need to implement separate authentication for users of your Headless Shopify store.

Of course, enriching the authentication process with social login is possible, too.

Overall, authentication of users and the storage of user data can become infinitely more flexible for Headless Shopify stores. Using a secure, managed authentication solution such as Auth0, another provider, or a custom user database provides greater flexibility and control to store owners, and can potentially offer additional benefits to end users depending on the implementation.

Minimal changes to the Shopify backoffice

Enjoy next-to-no setup for Headless Shopify with our proficient Headless Commerce Development Team.

Shopify makes it super easy to get started with Headless Commerce, and this is true for both merchants and developer partners, providing options to kickstart development of your Headless Shopify store through abundant APIs and starters.

For merchants, there’s practically nothing to do in order to prepare your existing Shopify site for a move to headless. There arent any complicated settings adjustments to make, besides creating and enabling some security tokens with the possible addition of webhook configuration. These tasks can be carried out by your developer or agency partner, so as a store owner there generally won’t be much required of you. By and large, how you’ve been managing your products, inventory and orders in Shopify won’t change, and you can continue to add products and adjust collections just as you would have before.

For developers, Shopify provides various APIs for consuming and sharing data to and from your Shopify store. Shopify provides multiple APIs, such as the Storefront API, GraphQL Admin API, REST Admin API, etc. Shopify's GraphQL APIs are a popular choice for headless commerce development, due to their high performance. GraphQL is a performant query language that fits well into any Headless Storefront setup.

Each of Shopify's APIs provides a different core functionality and are intended for slightly different use cases. This means that developers are empowered with the tools to create functional headless e-commerce stores with Shopify.

Additionally to the APIs provided, Shopify provides various starters (Hydrogen is Shopify's latest addition), for an improved developer experience which is particularly useful for kickstarting a project’s development.

In summary, Shopify makes it easy on both store owners and developers to utilize the strengths of headless commerce, by requiring minimal setup by merchants on the Shopify side.

Business Logic

Introduce powerful business logic layers with Headless Shopify.

When introducing new layers into your architecture, a great deal of additional possibilities are introduced.

Merchants are able to perform deeper levels of commerce logic in a layer between the frontend and Shopify’s backend.

When users take actions on a headless Shopify store, developers are able to implement additional functions or logic prior to sending a request to Shopify, creating room to build higher levels of custom functionality into your application.