Case Study: FreshOnline

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.

Deciding on headless Shopify

Some of the requirements for FreshOnline played really well into the benefits of headless Shopify. The client wanted a custom interface with a high level of interactivity, a set of bespoke filters and a highly team-friendly blog to become the centrepiece of their content marketing activities.

We had already pencilled Shopify in as the solution. It’s our go-to eCommerce recommendation for most clients. There are exceptions to this rule, but Shopify has a number of small intangible features and qualities that really set it apart from WooCommerce and BigCommerce.

We weren’t confident on making Shopify do everything that the FreshOnline team needed. As versatile as Shopify is, it’s still a proprietary platform and there are some things it doesn’t do particularly well. For instance, creating a really nice blogging management experience for a whole team can be tricky. Similarly, when there are a large number of apps required to hit all the project’s requirements, the store can wear the risk of performance issues.

The solution to these issues was decoupling Shopify’s mature and robust backend from its front end, allowing us to plug in other products to fill the gaps.

Implementation

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.

Challenges of headless Shopify

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.

Difficulties integrating a CMS

Integrating content management systems to manage content and Shopify products is a really cool idea in theory, but it ended up being a difficult challenge to build.

There really aren’t any headless content management systems that are mature, fully-featured and ideal for smaller businesses to use. Contentful is widely regarded as the best solution, but a lot of it’s features are locked behind a $450/month paywall.

We pushed forward with Prismic, which charges $7/month/user. However, it suffers from bugs and issues that make implementation tricky. The most notable issue was Prismic’s immediate impact on performance.

Running Gatsby and Shopify together was yielding great performance results. As soon as we added Prismic, our PageSpeed Insights scores would drop below 80. There was virtually no other code on the site. It took an incredibly deep dive to discover this issue where we essentially dismantled the entire site.

One of the biggest selling points of headless Shopify is the performance benefits. If a store is only achieving 70’s or 80’s on Google’s audits, then it’s a much less appealing solution.

This wasn’t a solution we could solve, unfortunately. Luckily we had direct access to a Prismic account manager and talked through some workarounds with their development team.

Was headless the right choice?

This is a difficult question to answer objectively because we didn’t build a monolithic Shopify store to compare the differences.

I would argue that we picked the right choice, but only because of the requirements around content marketing and requiring a flexible blogging platform.

The additional effort, cost and complexities of rebuilding plugins and integrating Prismic into the solution probably didn’t solve as many issues as they introduced. Perhaps a more elegant solution would have been to host Prismic on a separate domain, allowing Shopify to remain as a monolithic system.

Final Thoughts

The FreshOnline team were stoked with the result of their project. You can check out the staged site over here.

This was our first big headless Shopify project and we learned a lot of lessons. We anticipate headless eCommerce will become much more popular in the next 5 years as bigger companies combined microservices to achieve a more flexible solution.