5 min read

Headless Shopify Explained: 22 Inspiring Must See eCommerce Site Examples

Photo of Radi Danchev

by Radi Danchev

January 8, 2020

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:

  1. Customisable URL structure 
  2. Improved speed
  3. Better SEO performance 
  4. More items
  5. Cheaper hosting costs 
  6. Reduced Shopify costs 

Why headless Shopify might not be right for you

  1. If you are not technically savvy, then headless could create more technical challenges than using the standard Shopify platform. 
  2. If speed to market is a consideration, then headless could slightly hold you up while you are designing and developing your custom front-end. 
  3. 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:

  1. Customise robots.txt
  2. Customise web server headers
  3. Customise URL structure
  4. Breadcrumb URLs
  5. Custom Sitemap.xml
  6. Unlimited subcollections/subcategories
  7. 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

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.

Headless Shopify examples

These are some of the best headless Shopify stores.

Clare Headless Shopify

https://www.clare.com/

Shopify | Contenful | Now

Recess Headless Shopify

https://www.takearecess.com

Shopify | TakeShape

Seedlip Headless Shopify
Augustinus Bader Headless Shopify

https://augustinusbader.com/eu/en

Shopify Plus | Contentful

Yoga Girl Headless Shopify

https://www.yogagirl.com

Shopify | Contentful

Strivectin Headless Shopify

https://www.strivectin.com

Shopify | GatsbyJS | Prismic

Verishop Headless Shopify

https://www.verishop.com

Shopify Plus | Contentful

Bamford Headless Shopify

https://www.bamford.com

Shopify | Contentful

Chilly's Headless Shopify
Rothy's Headless Shopify

https://rothys.com

Shopify | Contentful

Victoria Beckham Headless Shopify

https://www.victoriabeckhambeauty.com

Shopify Plus | Contentful

GatsbyJS Headless Shopify

https://store.gatsbyjs.org

Shopify | GatsbyJS

Rachio Headless Shopify

https://rachio.com

Shopify | GatsbyJS

Grass Roots Headless Shopify

https://grassrootscoop.com

Shopify Plus | Contentful

Super Cluster Headless Shopify
Frank Body Headless Shopify
Plenaire Headless Shopify

https://plenaire.co

Shopify | Prismic

Naked Labs Headless Shopify

https://nakedlabs.com

Shopify | Contentful

Blue Diamond Headless Shopify

https://www.bluediamond.com

Shopify | Contentful

Kinsley Armelle Headless Shopify

https://www.kinsleyarmelle.com/

Shopify Plus | Contentful

Inkbox Headless Shopify

https://inkbox.com

Shopify | Custom front end

Koala Headless Shopify

https://au.koala.com

Shopify | Contentful