5 min read

Headless Shopify Explained: 22 Inspiring Must See eCommerce Site Examples

by Radi Danchev

January 8, 2020

What is Headless Shopify?
Why We Love Headless Shopify
Headless eCommerce Security
Headless eCommerce Architecture
Headless Shopify examples

What is Headless Shopify?

Every eCommerce website has two logical components: front-end and back-end. The front-end is everything that users see and interact with within a browser, mobile app, kiosk, or any other client-facing technology. The back-end is the business layer of the store, where you manage inventory, orders, payment transactions, shipping, etc.

Headless Shopify means that the front-end (or the "head") of your Shopify store is decoupled from your eCommerce back-end. This means that your headless Shopify store will use different technologies and frameworks for the front-end layer, like GatsbyJS, NextJS, or ReactJS and then pull data from Shopify via the Storefront API.

You might also have a headless CMS like Prismic or Contentful. Read our headless CMS comparison guide to learn more about this topic.

Why headless Shopify?

With the headless approach, you can solve the following Shopify limitations:

Customisable URL structure
Improved speed
Better SEO performance
More items
Cheaper hosting costs
Reduced Shopify costs

Why headless Shopify might not be right for you

If you are not technically savvy, then headless could create more technical challenges than using the standard Shopify platform.
If speed to market is a consideration, then headless could slightly hold you up while you are designing and developing your custom front-end.
If you are not sure about technical SEO, then you will either need to consult with an SEO professional or find a JamStack or Gatsby development team who really understands how to develop a technically perfect website.

Why We Love Headless Shopify

Exceptional User Experience and Design Customizations

Headless greatly improves your website’s user experience. By using modern front-end frameworks and libraries (like GatsbyJS and React), you can build incredible user experiences which outperform the standard Shopify front-end, and Shopify can take care of all the business logic required to manage and handle products and transactions.

Extreme Performance

Shopify stores suffer from performance issues that cannot be solved by using yet another app. Having a fast-loading store is essential for SEO, and might bring more traffic, which in turn will bring more conversions. When utilizing a distributed headless eCommerce architecture, there are many solutions available to speed up your Shopify store. You can see this by simply visiting BrewPlus.com – a headless Shopify store built by JAMchefs.

Better SEO

Since your front-end is decoupled from Shopify, you have full control over your SEO tactics. Yes, with headless Shopify you won't get SEO features out of the box like the traditional all-in-one Shopify store, but you'll have no limitations. This does add some complexity as you will need to decide how you wish to handle your URLs and Meta descriptions, but with a little advice from our team or a recommended SEO agency, you can outperform a like-for-like store developed on Shopify with an equal number and quality of inbound links.

With headless you can manage and control the following SEO parameters:

Customise robots.txt
Customise web server headers
Customise URL structure
Breadcrumb URLs
Custom Sitemap.xml
Unlimited subcollections/subcategories
Global redirects

Headless eCommerce Security

Most of the hacking attacks start at the front-end of your systems, and that's a big problem for all-in-one solutions since when the attacker finds a "hole" in the front-end they might exploit it to access or modify the data directly. That's not the case when we have a decoupled architecture. All back-end systems can be accessed only through an API, which in most cases is protected by multi-layer security systems and firewalls. Getting in there and messing with sensitive information is much harder. Front-end, on the other hand, deals with information that is meant to be public, and even if you succeed in hacking it, the worst-case scenario would be a couple of hours downtime; that's bad of course, but not as bad as leaking sensitive client or sales data.

To learn more, read our guide to headless eCommerce.

Headless eCommerce Architecture

Thinking about headless eCommerce architecture sounds complicated, but it actually consists of two main layers: a presentation layer and a back-end layer, which communicate via APIs. It can be more complicated if you want (you can add more third-party tools and services, for example), but let's keep it simple for now.

Presentation Layer

In the presentation layer, we have a fast-loading website, mobile apps for iOS and Android, in-store KIOSK systems, all kinds of IoT devices, wearables, voice commerce, or any other client-facing systems. You can have as many as you need. You can add them all at once or use a phased approach – it depends on your strategy. The beauty of it is that the changes you make do not affect the back-end layer. You can utilize the latest technologies and implement the most amazing user experiences and conversion strategies and there are no limitations – the possibilities are endless.

Back-end Layer

In general, the back-end layer is where your business systems live. In our headless Shopify context, this might be Shopify itself, including product catalogues, inventory, payments, orders, etc. A headless CMS is a good fit to manage your blog or targeted landing pages or even product pages.