New! Our platform - Quizpipe is live!
Image of FreshOnline: headless shopify store

Introduction

Introduction

Jeremy approached the Clean Commit team looking for help launching a new eCommerce business that aimed to deliver bulk meat and seafood to the Northern parts of Sydney. He had some unique requirements like limiting delivery to particular suburbs, weight-based restrictions, a rewards program, and a complex interface. 

After tossing up a few different options we settled on Shopify. Of all the eCommerce website platforms available, Shopify boasts the most mature functionality and extensive range of plugins. It also provides an easy learning curve for clients that have less experience with web-based platforms.

Know-how

  • Project management
  • Web design
  • Frontend development

Platforms

  • Web

Technology

  • GatsbyJS
  • Shopify
  • Prismic

Check it out!

Implementation

Headless Shopify

We’d settled on Shopify as the eCommerce engine, but only the backend. For the store’s front-end we planned to use Gatsby integrated with Prismic to facilitate content management.

While this seems like a lot of moving pieces compared to a monolithic setup, it addresses some technical constraints typically experienced in Shopify stores; performance issues, easily blogging, pulling in external APIs, and creating complex interactive interfaces.

Even though Prismic and Shopify both have plugins to integrate with Gatsby, this setup ended up being a difficult setup process. The front-end development of the site took roughly 250 hours to complete.

Headless eCommerce is a great trend and as it matures it will unlock a new level of performance and flexibility, but it’s in its infancy and still suffers from some issues.

Clean Commit's completed work project image
Clean Commit's completed work project image

Challenge

Headless Implementation

There’s a lot of work required to pull the correct data from Shopify into Gatsby and then allow it to be managed with Prismic. However, the biggest challenge of headless eCommerce is making the apps and extensions work correctly.

A lot of plugins have code that runs on both the back and front end of Shopify. Given headless stores use a different front end, this part of the plugin needs to be rebuilt. This is typically only achievable if the plugin provides an API to pull in data.

This proved challenging for the FreshOnline setup since we needed to use a handful of plugins to facilitate delivery and product distribution. Rather than just installing an app from the Shopify library, we needed to hunt down various services with exposed APIs and then build a custom interface.

Have an idea you want to discuss?

We’re based in Canberra, Australia and we LOVE working with locals… but we work with clients all around the world.

From the U.S. to the U.K. From Norway to New Zealand. Where there’s a problem to solve, we’ll be there!