Enterprise Shopify headless architecture

Shopify commerce headless

If you don’t know what’s Shopify headless or when to consider it I recommend to contact me to talk about it before implement it. In case you’re aware of the risks and benefits that it might bring let’s proceed.

It’s good to keep in mind that headless to 99% of the case it’s the last option. If you use all Shopify capabilities, even though, you can’t make the customer experience or integrations that you want to add and budget isn’t a problem, then headless might be a good plan.

Shopify headless architecture

In case you have a very good team of frontend developers or a reliable technology partner you will be able to use one of these technologies below.

This is the most beneficial way to implement it, it’s easier and faster using static generators. The product pages, category pages, home page and other pages are compiled as static pages, the dynamic information is made via AJAX API and the checkout page isn’t part of the headless. The checkout page will be the default checkout in a different URL.

Shopify Headless
Shopify Headless

As the image above shows, enterprise stores that runs in Shopify Plus will have a middleware to allow merchants to handle as many APIs as they want. Good examples of API communications that we do that you might have as well are ERP, PIM, OMS, CMS, WMS.

Shopify Plus headless
Shopify Plus Headless

Headless expectations

As you’re opting to have more control of your frontend, you must assure the quality too. Let’s get the NextJS Commerce tool as an example, their proposal is to have “The all-in-one React starter kit for high-performance e-commerce sites. Clone, deploy and fully customize with a few clicks.”, you might be able to check the demo store here.

If you don’t keep tracking the main good quality KPIs during the development, probably you will miss one of them. Not using the tool properly will make your project not as good as a non-headless implementation. The tools have all the capabilities to have a better SEO, performance and accessibility. However, it’s your team’s responsibility to understand and use them.

Shopify headless cases

Shopify Plus has very good implementations, I would say, the best headless implementations in the market nowadays. However, when we verify if they used the tool’s capabilities, we can see that they weren’t utilized.

That’s why the technical guidance and strategy are important, you can use the best headless architecture, tools and platforms, it doesn’t mean that your solution will have all of it consequently.

The time to have the best practices is on average from 5% to 10% of the total time spent to create the project.

Kotn Shopify Plus Headless

Grass Roots Shopify Plus Headless

Babylist Shopify Plus Headless

Thanks

Thank you for reading this article, I hope it helps you in your future analyses!

About me

Picture of Rafael Corrêa Gomes

Rafael Corrêa Gomes

Senior e-commerce developer and architect based in Montreal, Canada. More than ten years of experience developing e-commerces, saas products and managing teams working with Magento, Shopify, PHP, JavaScript, and NodeJS.