Goodnature
Headless Hydrogen storefront for a global conservation brand - markets, currency, and shipping that tell the truth.
- Role
- Frontend Lead
- Discipline
- Headless Commerce
- Year
- 2022
- Focus
- Hydrogen, TypeScript
(Overview)
At Brave Digital I led frontend on Goodnature’s headless Shopify Hydrogen storefront - Sanity-driven commerce for a conservation brand selling toxin-free traps worldwide.
Goodnature had outgrown a classic Shopify theme. Kits were expanding, international demand was up, and marketing needed faster page iteration than Liquid allows - without breaking currency, shipping honesty, or SEO.
I led the Hydrogen + Sanity frontend on Vercel: locale-prefixed routing, Storefront-backed money rendering, geo cookie → distributor modal, Sanity modules into SSR routes, and decision tools (kit compare, Trap Finder Quiz).
Launched a single headless storefront for NZ/AU and international locales with market-correct prices, clear shipping UX, and CMS-owned storytelling - without forking themes per market.
- Hydrogen
- TypeScript
- TailwindCSS
- Shopify
- Sanity
- Vercel
- Framer Motion
- Okendo
(Brief)
Brand context
Goodnature builds toxin-free, self-resetting traps from Wellington. At Brave I led the Hydrogen + Sanity frontend so the brand could stay credible in NZ/AU while routing other geos to the right currency, shipping reality, or distributor.
(Architecture)
System layers
Locale paths, Shopify market money, and Sanity content join at the Hydrogen route loader.
- Hydrogen storefront
- Locale routes, PDPs, collections, quiz, cart, and account
- Shopify
- Storefront money objects, cart, and checkout handoff
- Sanity
- Homepage modules, stories, compare copy, and campaign content
- Geo & markets
- Path locales plus geo cookie → distributor modal when shipping isn’t available
(Product surface)
What the storefront had to do
- 01
Commerce UX
Locale-aware PDPs and collections, cart toast, account entry, and kit add-on flows.
- 02
Markets & geo
Shareable /{country}-{language} URLs, multi-currency PDPs, and distributor redirects.
- 03
Decision tools
Kit compare matrix and Trap Finder Quiz so shoppers choose without a sales call.
- 04
CMS storytelling
Sanity modules for homepage, blog, stories, and popups - campaigns without a theme deploy.
(Product)
Commerce surfaces
Sanity storytelling, multi-currency PDPs, and kit decision UX for path-based markets and geo-aware shipping.
Mobile
(Hard problems)
Constraints that shaped the build
One storefront, many shipping realities
Path locales + geo modal with override so UX tells the truth without soft-404ing content
Currency is commerce state, not copy
Render Shopify amount/currencyCode per market. Never hardcode prices in Sanity
Content velocity vs catalog truth
Sanity owns narrative; Shopify owns price and stock. Joined at the route loader
(Impact)
What I shipped
- 01
Moved Goodnature from theme constraints to a Hydrogen + Sanity storefront on Vercel.
- 02
Shipped path-based markets with Storefront-backed currencies across NZD, AUD, GBP, EUR, and SEK.
- 03
Built geo-aware shipping UX and kit decision tools marketing could iterate without eng for every page.
