Examples of Headless Shopify & Shopify Plus Implementations

Over the last few weeks, I’ve been spending a lot of time looking headless commerce application and which eCommerce platforms are suitable, and best suited, to a headless approach. One thing that I’ve found particularly interesting is that it’s really hard to find examples of Shopify and Shopify Plus stores that feature a separate front-end platform, despite a capability to do this and some good examples that I’ve seen through clients.

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, but if you’re happy returning the user to the native Shopify checkout, it can be done and it can work well. The approach that all of these sites are based on (and what Shopify is allowing for currently) is based on the product components or elements being pulled into an external front-end via Shopify’s APIs and the user being brought back to the Shopify checkout once they progress from the cart page.

Shopify doesn’t have the same focus on de-coupling the front-end and operating in this manner as platforms like BigCommerce, CommerceTools, Spryker, ElasticPath and event Magento (who are spending a lot of time working on a micro-services approach and building out their APIs to allow developers to achieve a headless implementation / use a custom front-end framework or external CMS more conveniently), however, it can still be done. The content management platforms used most frequently when I was researching were Prismic and Contentful, which are both very popular API-focused CMS solutions.

Although these sites are relatively simple, here are some examples of stores that use Shopify alongside a custom front-end or a CMS.

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

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 website >>

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

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 this site >>

Augustin Baber – 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.

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 >>

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 *