Headless Shopfiy & Gatsby Frontend For Exceptional Performance
Know how
- Project management
- Web design
- Frontend development
Technology
- GatsbyJS
- Shopify
- Prismic
The Problem
The FreshOnline team wanted to build a frontend for Shopify that did some things it doesn't usually do like presenting custom delivery areas, displaying interactive carousels, and presenting savings based on prices scraped from other websites.
The business was based around selling wholesale meat and seafood to the Sydney market, and they wanted to out-niche and out-perform the big supermarket chains.
The Process
The first goal was to understand FreshOnline's processes and operations. Their requirements hinged around a store that could do things off-the-shelf software couldn't. We took their team through a Product Roadmapping process to understand their goals, workflows and functionality requirements.
The Roadmap painted a clear picture of everything that needed to happen between inception and the store being complete.
With the planning completed, FreshOnline's existing branding was used to create a design system and set of high-fidelity pages that would be built into a custom frontend for the store.
The project was steered by fortnightly sprint planning meetings as the site was designed and developed.
The Solution
The store was built with a Gatsby.js frontend, headless Shopify backend, and Prismic CMS. Adopting a custom frontend and consuming Shopify's content through API allowed complete freedom to build an unrestricted UI and achieve incredible page load times.
Prismic Slice Machine was configured as a "page builder" so pre-designed blocks could be arranged to create new landing pages and modify the existing content without needing developer help.
Several important plugins were rebuilt to work with the custom frontend. This is one of the tradeoffs of headless solutions, since the connection between front and backend is severed.
The final implementation achieved high 90's on Google's Core Web Vitals assessment.
Have an idea you want to discuss?
Need advice before jumping into your next project? Shoot through your question and we'll give you some free, experience-backed advice on your best options.