Hybrid headless setups with Shopify

Going headless should be about serving your business, and your customers.

While a fully decoupled build can certainly offer this where businesses and their products are particularly nuanced, there are situations where some portions of the frontend will benefit from decoupling, while others will not.

Achieving this kind of “hybrid-headless” setup is quite possible with Shopify, but requires clear lines to be drawn between what goes headless and what doesn’t. Also to note: there is a limit to what extent this can feasibly work. The “lines” can’t be blurred too much; it would be impractical to have product pages delivered by headless architecture while collections are not—this line is too blurry and would be quite challenging to implement and maintain.

However, there are some select situations where a hybrid headless build can be possible, while remaining feasible, and reduce complexity rather than heightening it.

Most frequently, this occurs with respect to the checkout. Building and maintaining a headless checkout, particularly if complex, is a fairly involved task, from both a development and UX implementation point of view. If Shopify’s standard checkout already provides meets your store’s requirements in terms of layout and functionality, it’s common to decouple the remainder of the storefront while keeping the standard Shopify checkout in place.

In this case, a cart object is created and updated via the headless storefront, which at the point of checkout initiation returns a URL that users are subsequently pushed to in order to actually checkout (make payment), a page hosted by the Shopify platform.

This is a hybrid headless setup in itself, although quite minimally, as well as being a fairly common approach. A fully-functional headless checkout that uses Shopify under-the-hood requires Shopify Plus (unless you intend on implementing your own payment processor and routing payments externally to Shopify).

This introduces an additional barrier to fully a headless checkout for merchants who aren’t on Shopify Plus, and hence, this kind of hybrid headless setup is a requirement for some builds.

Another use case we sometimes find hybrid headless implementations suitable for relates to Customer Accounts.

Shopify’s customer accounts offers a succinct, easy to use interface that can make sense on many levels. The ability to quickly plug apps (Customer Account Extensions) into this interface offers merchants and store administrators the ability to immediately extend functionality within customer accounts, and enhance customer experience.

In contrast, a headless customer account center requires changes to be made by your development team, which can make it slightly costlier to experiment (changes would require additional development cycles). On the flip side, there’s definitely a place for a headless account center, particularly if it requires custom functionality to make more sense for your products and your customers, typically defined by what you’re selling and your market in general.

These kinds of hybrid-headless setups work because they can provide the best of both worlds, as long as you establish clear lines between implementation strategies for the respective parts of the store.

This is in addition to finding a balance between the two frontends that ensures consistency and continuity of user experience—the last thing you want to do is confuse customers. Where clear lines are drawn, this strategy can work out quite favorably, but it’s definitely not a fit for all stores and use cases.

As always, highly-custom needs are going to be best served by a tech stack that combines best-fit technologies to create a harmonious outcome. Oftentimes, this is going to be through a fully headless storefront that has been purposefully architected and engineered to address the unique challenges of your business and smooth the process to making sales.