Rookie Wellness

The number one thing you need when you run an online store is for the price to match what a person is actually going to buy. When it doesn't, things get ugly.

Back in 2022 a friend of mine over at Lux Nova Labs approached me. A former coworker of his was running an online retailer called Rookie Wellness that was starting to take off, and they needed work he just didn't have time to take on. He knew that even though I'd never touched Shopify, I was handy enough to dig in and get them what they needed. The brief I was given was that customers would select one thing and get charged for another. For an e-commerce site there's hardly a nastier bug.

All I knew going in was that the store sold its products two ways, one-time or on a subscription, that subscriptions ran through a third-party service called ReCharge, and that the widget ReCharge injected didn't always seem to agree with the theme's own variant selector. Anyone who has worked in Shopify knows the biggest headaches live right there, where third-party software meets custom theming.

What made the job genuinely difficult was the theme itself. It was based on Impulse, a purchased Shopify theme, but it had been heavily modified in ways that didn't respect best practices. State management had been hacked in, features layered on by one developer after another, nothing documented, everything interconnected. One of my first commits says what the whole job really was. "Add files to hold custom theme code." Before fixing anything, I built the place fixes would live, moved inline styles out of the templates, and untangled the product template's dependencies, so my changes stayed isolated from the core theme instead of becoming the next layer of hacks.

With the ground cleared, the actual causes came into focus. ReCharge injects its subscription options into the product form after the page loads, whenever it finishes, and the theme's buy button has to keep up. Say "Subscribe" when a subscription is selected, say "Add to Cart" when it isn't, and rewire itself when a shopper flips between the two. But the theme had no way to know when the widget had arrived, or whether it would at all. That gap is exactly where the prices had been lying. The reality is I wanted the behavior to be deterministic. The standard move developers reach for is to poll on a timer and hope, and I prefer tidier approaches where I can get them, event-driven rather than spray-and-pray. So a MutationObserver watches the add-to-cart form, and the moment ReCharge's widget actually lands, it dispatches a custom event. Everything that needs to react listens for that event, and the buy button can never fall out of step with the widget again. I named the event RechargePotentiallyLoaded.

Aside from that major issue, the client had a handful of other styling asks. Updating how currency got formatted, tidying up the variant and quantity pickers, a compact mode for product descriptions, and making sure out-of-stock items finally looked out of stock, plus a couple of things I nitpicked along the way, like the sticky header clipping on load.

Everything the client asked for shipped on time, fifteen commits between January and March. The thing I'm most proud of is the direction the debt moved. A purchased theme a few years into its life usually only accumulates hacks, but I ended the engagement with fewer than it started with, and a marked delineation where the next developer can hopefully make changes without piling on more. I don't know the whole story of what came after, but to my knowledge Rookie Wellness is still running, a decent-sized brand now, and largely subscription-driven.