How I led Dr Squatch to a Hydrogen storefront

Dr Squatch

Over the course of 2 and a half years, I led a team of engineers through upgrading a Shopify Theme, migrating to Hydrogen, adding infrastructure to support subscription growth, and building a system for order-level discounts for a high-impact cart experience. Read on to learn how we did it.

Dr Squatch in 2023

When I joined Dr Squatch in 2023, the business was using a Shopify Theme that was becoming brittle due to overloading an aging fork of Shopify’s Slate toolkit. The Theme had a large volume of highly customized templates used for marketing campaigns, which were causing web vitals to decline. Many of the tools used to deliver content to customers were either out of date, or had a high learning curve (Vue, Bootstrap, and webpack). Developers were deploying Theme changes directly from their machines, and product configuration was happening in the browser instead of leveraging out-of-the-box Shopify features.

My role, as Lead Software Engineer, was to manage the in-house team of 5 engineers who were building and maintaining the Shopify Theme. Additionally, I would support growth and retention initiatives through innovative merchandising options, architecting new infrastructure, and improving the performance and reliability of the storefront.

Improving the Shopify Theme

Many merchants on Shopify in 2023 may have missed the June 2021 release of Online Store 2.0. This revolutionary release gave merchants more options to customize their themes without needing a developer’s expertise. If you remember the Dawn theme, it came from this era of Shopify’s Online Store features.

Then, in February of 2023, Shopify released metaobjects. The metaobjects feature allowed a merchant to create structured content for their storefront. With access to Online Store 2.0 and metaobjects, I architected a solution that we named CMS Lite. With these new platform features, we could draft a plan to incrementally improve the Theme in ways that would retain our in-house developers, while offering features that were critical to the marketing calendar.

These are the steps I took to get more life out of the Theme:

• Architect a custom content management system using Shopify Metaobjects, called CMS Lite
• Migrate from SASS with Bootstrap to just Tailwind
• Upgrade Vue, replace state management with Vue composables, and enable lazy-loading of Vue modules at the page section level
• Replace Slate toolkit with Vite
• Implement continuous integration using GitHub actions and the Shopify CLI

Executing on this plan gave my team the space they needed to master Shopify fundamentals and enhance their core development skills. We enabled the marketing team to run their high impact campaigns without being tied to specific developers’ machines or feature releases — we were able to get ahead of the campaign calendar and increase the quality of software and improve our web vitals. Conversion rates quickly increased as we were able to satisfy both the customer and the business.

Subscription Infrastructure

Dr Squatch had established a thriving subscription business using ReCharge’s integration to offer selling plans on products. Customers could subscribe to Dr Squatch products, and would edit their subscriptions using the account pages on the Shopify Theme.

One of the challenges of offering subscription products is what to do when a product goes out-of-stock. When a product is out of stock, the merchant is left with two choices: substitute the product or delay the order until the product is back in stock. At Dr Squatch, we chose to do substitutions because it meant there would be no delay in customers receiving their subscriptions. No one wants to run out of soap!

To solve this problem, we created the SKU Swap Service. By using the ReCharge API to list pending charges, we could determine whether a product in an upcoming charge was out of stock. If the charge contained an out of stock item, then the charge would be updated to substitute the out-of-stock item with one from a list of substitutions.

Migrating to Hydrogen

Coming into 2025 at Dr Squatch, the Shopify Theme was upgraded to be able to handle an active marketing calendar, and the engineering team had a durable process for creating new building blocks for pages. The next challenge to solve was: how do we implement A/B testing without a flicker? At the time, Shopify Themes did not support server side A/B testing, which meant that we would need to migrate off of the Theme and onto a headless, or composable platform.

Meanwhile, Shopify’s Hydrogen product had matured quite a bit. Agencies and vendors were also building up experience with Shopify’s Hydrogen product. With no shortage of options — Sanity, Contentful, and others — we chose Pack Digital due to their mature live customizer and preview experience that was built for Hydrogen. Choosing Pack’s CMS helped close the distance between our storefront and our CMS, so in March of 2025, Dr Squatch began migrating the storefront from Theme to Hydrogen by partnering with Pack Digital.

By August, the Hydrogen storefront was mature enough to launch in a few select markets. This allowed the business to be more conservative about the release. We used the time to continuously optimize the software, improve our CMS schema, and add features that were necessary for the markets that had not been part of the initial release. After a successful holiday period, we were able to migrate the remaining markets to our Hydrogen storefront, completing the transition from a Theme to a headless Hydrogen storefront.

Enabling Cart Experimentation

Dr Squatch had some great success increasing AOV by adding tiered incentives to the cart. While previously limited to free shipping minimums, Dr Squatch partnered with Rebuy to use their Smart Cart product that enabled multiple tiers of cart-driven discounts that would incentivize customers to add more products to their cart and unlock additional incentives like discounts and free gifts.

While Smart Cart was a big win for the business, it lacked a Hydrogen counterpart, and didn’t allow the business to do A/B testing on the cart. To solve for this, I architected a solution using a Shopify admin extension, Shopify metafields, and Shopify functions that would allow the business to manage cart campaigns.

Cart campaigns have the same functionality as the Rebuy Smart Cart product with improved security, support for markets, and the ability to run A/B experiments. This was achieved by annotating the cart with an ID specific to a cart campaign, allowing multiple campaigns to run in parallel.

In Closing

The Hydrogen migration marked the end of a long journey that began with a brittle Shopify Theme and ended with a headless storefront capable of running sophisticated, server-side A/B experiments. What started as incremental improvements to buy the team time eventually unlocked the confidence to make a much bigger leap. Each phase — the CMS, the Theme modernization, the subscription infrastructure, the cart experimentation platform, and the Hydrogen migration — built the foundation that made the next one possible.