Jaxxon is a jewelry brand for men with the goal of making quality jewelry and accessories available to anyone.
Back in 2018, Jaxxon was doing low-to-mid seven figures of revenue annually, with much of their business targeted around specific holidays like Valentines’ Day and Christmas. Jaxxon CEO Josh Deemer wanted to optimize their conversion rate in order to grow revenue.
He turned to Novvum, a Los Angeles-based agency focusing on modern website projects, with Trevor Heath as the project tech lead.
When Trevor and Novvum started getting involved, they were skeptical about getting involved too deeply because, with the Jaxxon site built as a monolithic Shopify app, the frontend was written in the Liquid templating language, which the Novvum team had reservations about.
“Coming from a React background, I was pretty worried looking at Liquid Templates and Shopify themes, that we could figure out how to build good, flexible user interfaces,” Heath explained
The more Trevor and Novvum dug in, the more they felt that the site’s speed challenges would be best addressed by swapping out the default Shopify frontend for a more flexible solution.
Jaxxon’s founder, Josh, was familiar with other headless websites, and so in June 2020 they made the decision to rewrite the site’s frontend in Gatsby + React, with a goal of launching in late October to hit the holiday season.
Trevor started by taking parts of two starters — a Contentful blog and a Shopify e-commerce site — to create the foundation of his Gatsby + Shopify site.
(Today, we’re launching the official Gatsby Shopify Starter, so people starting new Gatsby + Shopify sites can simply clone the repository.)
After that, Trevor worked on getting the data set up in Shopify. He found that Shopify’s product SKU system doesn’t store the information he needed, so he added a Google Sheets to store supplementary information, then pulled it into the Gatsby site with gatsby-source-google-sheets.
Jaxxon’s Google Sheets product management system
The site had three components, each of which happened roughly in parallel:
- Data entry and validation happened in Shopify, Google Sheets, and Contentful
- A junior developer was tasked by Trevor with building out components in Storybook
- Trevor focused on the site’s architecture and user flows.
He adopted a pattern fairly common for Gatsby + Shopify sites: building the Gatsby side of the site at the root domain (jaxxon.com), then checkout.jaxxon.com as a Shopify-hosted subdomain to handle the purchase experience. A bit of clever work patched over some potential rough edges — using Apollo Client with live queries to the Shopify API for critical pieces of information like whether a particular piece of inventory was out-of-stock and if a user was using discount codes (which Jaxxon displayed in a banner). Then he pulled in 5,000 Trustpilot reviews.
Last, Trevor spent some time configuring Contentful along with a page template so that Contentful could serve as a page builder, using a section system and creating models like a grid block and product list block.
By mid-September — well ahead of the deadline — the site was done. The Jaxxon team’s first reaction?
“They all said, ‘the site is so much faster!’” Heath laughs. “And as soon as we launched on Gatsby, we saw really dramatic growth.”
Conversion went up from around 1% to over 2%. The new site also brought new designs — but Heath points to the bounce rate in particular to highlight Gatsby’s impact. “The bounce rate went from 40 to 50% to around 12%.”
In addition, the speed with which the redesign had happened unlocked the pent-up demand for features. “There was a sudden clamoring for things like site search that were quite difficult for them to do on Shopify,” Heath says.
In addition to the speed of shipping improvements and speed of the site, their new stack enhanced the agility of the editing process. Jaxxon CEO Josh Deemer is fairly involved with content, and the way they’ve set up Contentful and Gatsby means that he can go in and build pages without an intermediary.
Code changes are quick to turn around, too — with Gatsby Cloud builds and deploying to Gatsby Cloud Hosting, a full code build on the roughly-500-page site takes a couple of minutes to build and a couple minutes to deploy.
For Novvum, the project reaffirmed their belief that React and Gatsby are the way to build for the web. They created a site — ReactHeadless.com to highlight both the results they’ve seen from this approach and try to catalyze broader enthusiasm around it.
Meanwhile, Jaxxon has more than tripled their revenue — and now launched a women’s brand, too.
“It’s been a huge step forward for all of us,” Heath said.
UPDATE – June 29th, 2021: Checkout Gatsby Cloud on the Shopify App Store and get all the details here.