Headless Shopify architecture example

As discussed in the previous chapter, Shopify is built with separation in mind. Through their storefront API, merchants can build a unique headless shopping experience while still utilizing Shopify for what they are great at. In this chapter, we dive into a headless Shopify architecture and discover how it all works together.

Storefront layer

The storefront layers consist of your website and any other channels you sell products with. Since the frontend and backend are decoupled in a headless architecture, you can deploy your frontend to any imaginable platform or device.

• Website

• Native mobile app (IOS or Android)

• Point of Sale (POS), any in-store system used for handling customer orders

• Social commerce

• Marketplaces (Amazon)

• Voice commerce

Service layer

The service layer is the backend of your eCommerce store where you manage your content and commerce.

Content

A headless CMS is a content management system where you manage the content and pages of your webshop. A headless CMS can deliver your content through an API directly to where you need it.

Commerce

The commerce side of things is managed with your eCommerce platform of choice. This is where customer information, orders, and products are managed. It’s also where payments are processed (you can use Shopify’s native checkout with a headless architecture). 

Third-party software

This is also the layer where you can couple any third-party software to add functionality to your storefront layer such as smart site-search Algolia or review app Yotpo.

Back-office

The back-office layer is where you can couple an ERP tool to the headless commerce architecture. ERP solutions are often only used by large-scale eCommerce brands.