Headless Shopify Introduction + Examples of Headless Shopify & Shopify Plus Implementations

Over the last few months, I’ve been spending a lot of time looking at headless frameworks and which eCommerce platforms are suitable and best suited, to a headless approach. Most platforms are currently building out APIs to allow for headless builds and a number of platforms (such as ElasticPath and Commerce Tools) build their offering around being API-first / headless-first. This article is designed to provide an introduction into how Shopify can be used in a headless manner, as well as answer some top-level questions around the impact and good use cases.

What is headless?

Headless, in the context of eCommerce, essentially describes the principle of separating the front-end of your store from the eCommerce platform, with a view to driving improvements around flexibility, performance or operations, generally. A headless eCommerce site would use a different front-end framework (such as a custom react framework or something like VueStorefront for example) or CMS (e.g. Contentful or Prismic) and would then pull in content and components via APIs. Shopify supports this approach via the storefront API.

What is the Storefront API?

The Storefront API allows merchants to use Shopify outside of the stanard channels, such as via apps, headless storefronts or even games (Shopify do have some games where they power in-app purchases powered by the SDK for Unity). Headless websites would use the JavaScript Buy SDK to fetch product information and other components from Shopify and then allow for the customer to buy via the Shopify checkout. The storefront API uses GraphQL to allow merchants to fetch data, build a cart, allow for product configuration (e.g. size, colour etc) and then create the checkout for the user to checkout.

What’s a good use case for headless Shopify?

To be honest, this approach is getting more and more common and there’s a much bigger argument for it than there used to be. Headless is still a new approach (especially with Shopify) and there are a lot of cons (generally around loss of functionality, agency lock-in, on-going maintenance etc), but it’s getting a lot more mainstream and there’s a lot more knowledge around it than there was a few months ago. Before, I would’ve said a use case would be a really small retailer (with a small catalog) looking to create an exceptional, rapid front-end experience – but now, I think it’s become a lot more relevant to bigger and more complex retailers.

The headless approach can also solve a lot of limitations with Shopify – such as the URL structure (as you have complete control) and visual merchandising (as you can integrate with solutions that can’t be integrated directly into Shopify Plus. There are also some pretty big brands / stores doing this with Shopify now. Overall though – I’d say this approach is probably best suited to brands or retailers that are hyper-focused on user experience and are willing to compromise in other areas where needed.

What are the cons of headless?

The main cons with headless, as far as I am concerned, are:

  • Need to maintain two technologies / platforms
  • More complexity around integrations with third parties etc
  • Some third parties aren’t compatible
  • Loss of functionality within a platform (e.g. content staging, version control in places etc)
  • Tied into an agency

These are quite top-level, but you can read this article I wrote which covers these areas in more detail.

Shopify isn’t the obvious choice when it comes to complex headless implementations as the tooling hasn’t been developed in the same way as other platforms (such as API-first platforms like Commerce Tools), but if you have relatively straightforward requirements (in terms of what needs to be extracted from Shopify) and are happy returning the user to the native Shopify checkout, it can be done and it can work well. The approach that all of the following examples sites are based on (and what Shopify is allowing for currently) is pulling components via Shopify’s various API endpoints and the user then being brought back to the Shopify checkout once they progress from the cart page.

Shopify doesn’t currently have the same focus on de-coupling the front-end and operating in this manner as platforms like BigCommerce, CommerceTools, Spryker, ElasticPath and even now Magento and Salesforce Commerce Cloud (who are spending a lot of time working on building out their APIs to allow developers to better achieve a headless implementation / use a custom front-end framework or external CMS more conveniently), however, it can be done well via the storefront API.

A lot of the existing headless Shopify builds use a content management (CMS) platform, most frequently Contentful, which is a very popular headless CMS solution. Other examples include Prismic and ContentStack.

Although these sites are relatively simple, here are some examples of stores that use Shopify alongside a custom front-end or a CMS. One thing that I’ve historically found interesting is that it’s really hard to find examples of headless Shopify and Shopify Plus stores, despite a capability to do this via the storefront API and some good examples that I’ve seen through clients. So here are some of my favourite headless Shopify Plus stores.

Clare

Clare
Clare on mobile

Visit the store >>

Rachio.com – GatsbyJS + Shopify

Rachio’s Shopify + GatsbyJS store is a great implementation that features very clean content-based landing pages, content-rich product detail pages and Yotpo product reviews. The site doesn’t follow a conventional eCommerce design approach and the nature of the product and catalog lends itself well to this approach.

Rachio

Visit the website >>

Yoga Girl – Contentful CMS + Shopify

Yoga Girl

The Yoga Girl site is really, really fast and the whole site is really clean and functional. The front-end is built using Contentful (which seems to be a big trend at the moment and then the product information is pulled in via APIs and the customer enters the normal Shopify checkout when they progress through the cart.

One thing that I really like about this implementation is how they’ve created really specific templates for the different pages (e.g. the studio pages) and then they’ve met the (relatively basic) commerce requirements through Shopify and their APIs.

YogaGirl

Visit the store >>

Seedlip Drinks – Custom Vue.js front-end + Shopify

Seedlip Drinks

The Seedlip Drinks site is very content-led and the front-end is built on a what likes like a custom Vue.JS / Nuxt.js setup. The page templates are all very nicely designed and the cart loads as an overlay and then takes you to the Shopify checkout once an item is added to the basket.

The product detail pages are really nice and are very focused on showcasing the bottle image.

Seedlip Drinks

Visit the store >>

Augustin Bader – Shopify Plus + Contentful CMS

This is another good example of how Shopify’s APIs can be used to create a headless approach, with Augustin Baber using Contenful CMS for their presentation layer and then pulling in components via Shopify, as well as powering the checkout.

Augustin Bader

All of the templates are very custom (they don’t follow a standard convention at all) and the website and all key functions are really fast again.

The last example (I’ll be adding to this post over time) is extremely simple, but it’s a good example of how it can be approach and it’s Gatsby’s own store.

Augustinus Bader

Visit the store >>

The single page store simply sells GatsbyJS merchandise and displays products details along with an add to cart. Once you’ve added an item to cart you then progress through to the Shopify checkout.

Gatsby Store

Visit the store >>

Koala – Custom + Shopify Plus

Koala
Koala on mobile

Visit the store >>

Inkbox

Inkbox
Inkbox on mobile

Visit the store >>

Ntwrk

Ntwrk
Ntwrk on mobile

Visit the store >>

Impossible Foods – Shopify Plus + Contentful CMS

Impossible Foods
Impossible Foods on mobile

Visit the store >>

Grassroots Coop – Shopify Plus + Contentful CMS

Grassroots Coop

Visit the store >>

Verishop – Shopify Plus + Contentful CMS

Verishop
Verishop on mobile

Visit the store >>

Kinsley Armelle – Shopify Plus + Contentful CMS

Kinsley Armelle
Kinsley Armelle

Visit the store >>

Chilly’sShopify Plus + custom front-end

Chilly's
Chilly's on mobile

Visit the store >>

Victoria Beckham BeautyShopify Plus + Contentful CMS

Victoria Beckham Beauty
Victoria Beckham Beauty on mobile

Visit the store >>

These are just a few nice examples I found, if you have any others, please feel free to email me ([email protected]) or add them in the comments!

Paul Rogers

Paul is an experienced eCommerce Consultant, specialising in all aspects of replatforming, requirements gathering and platform selection projects.

Paul has worked with most mainstream eCommerce platforms and has supported complex replatforming projects with retailers from all over the world. Paul also works on customer experience projects and solutions-focused work with various platforms - primarily Magento and Shopify Plus.

Leave a Reply

Your email address will not be published. Required fields are marked *