Core Wins
Cut LCP from over 3 seconds to 0.4s with raw HTML streaming and ~200ms routing.
Designed and built the full headless stack solo using React, Remix, and GraphQL.
Replaced slow third-party app widgets with native, lightweight GraphQL components.
Overview & Why Hydrogen
After relaunching Surplus Quartermasters on standard Shopify Liquid, the store was profitable but sluggish. Third-party apps were bloating DOM size and pushing mobile LCP past 3 seconds.
I decided to migrate our entire frontend to a custom headless storefront built with Shopify Hydrogen (React + Remix), querying Shopify’s Storefront API via GraphQL.
The goal was simple: complete control over data flow, sub-second load times, and custom features that off-the-shelf Shopify apps could never deliver cleanly.
The Visual Evolution
Homepage: Liquid MVP vs Custom Hydrogen
Product Page: Liquid MVP PDP vs Custom Hydrogen PDP
Technical Architecture & Performance
Hydrogen serves initial pages as raw HTML with minimal JavaScript, reducing Time to First Byte (TTFB) and Total Blocking Time to virtually zero.
I set up data streaming to split critical above-the-fold content from deferred elements. The browser paints the main hero and product details immediately while secondary blocks stream in via <Await>.
Search indexability is guaranteed through bot-aware server rendering. When Googlebot visits, the server waits for deferred data before responding, ensuring 100% complete indexable HTML.
Streamed SSR & Bot Detection
Critical HTML renders instantly for human shoppers, while search crawlers receive fully populated deferred data for complete indexing.
Sub-Second Routing & Lazy Loading
Once loaded, internal clicks transition client-side in ~200ms. Heavy components like the cart drawer are lazy-loaded off the main thread.
JSON Sizing Charts & Unit Preferences
Military surplus sizing is notoriously difficult, with different nations using varying chest and waist measurements. Static images looked blurry and caused high return rates.
I built an interactive sizing engine powered by lightweight JSON stored directly in product GraphQL records, eliminating extra network requests and heavy image payloads.
Shoppers can toggle site-wide between CM and Inches. The engine detects variant labels and automatically appends converted measurements in brackets beneath each size option.
Interactive Variant Selection
Features auto-scrolling to the selected variant and lets customers select sizes directly from the table, complete with "How to Measure" guidance.
Site-Wide Unit Conversion
Converts dimensions instantly between metric and imperial, displaying conversion hints inline with variant selectors.
“Gunner” Agentic AI Assistant
I designed and embedded “Gunner”, a cost-effective agentic shopping assistant powered by Gemini 3.5 Flash Lite, integrated directly into product and policy pages.
Gunner uses tool-calling to access live product data, sizing tables, inventory levels, and customer policies. It can answer sizing questions, recommend gear, and check order statuses.
Unlike annoying third-party chat popups, Gunner is subtly embedded into the page flow with zero invasive popups and always offers a direct route to email human staff.
Live Tool Calling
Queries the catalog directly to handle semantic requests ("find a waterproof jacket in 3XL") and provides accurate sizing recommendations.
Policy & Order Queries
Resolves questions about shipping times, returns, and recent order lookups without exposing private customer data.
High-Velocity Cart & Toast UX
Standard ecommerce themes disrupt browsing by violently sliding open a cart drawer on every add. I engineered non-intrusive action toasts for cart adds and wishlist saves.
The cart features optimistic UI updates, giving instant visual feedback without waiting for server responses, paired with a dynamic free-shipping progress bar.
I also built an in-container pinch-to-zoom lightbox on mobile, letting customers inspect fabric details without being forced into clumsy full-screen modal takeovers.
Action Toasts & Optimistic Cart
Maintains customer browsing momentum with subtle toasts, instant cart feedback, and clear checkout payment terms.
Dynamic Free Shipping Messaging
Store metafield thresholds automatically adjust messaging: prompting spend at <80%, urging at >80%, and celebrating unlocked free delivery.
In-Container Pinch Zoom
Custom lightbox supports native mobile pinch-to-zoom inside the container, keeping product details accessible without modal traps.
Sticky Mobile ATC & Stock Badges
IntersectionObserver reveals a sticky bottom bar when the main button scrolls away. Variant buttons surface "Last X left" indicators inline.
Merchandising, Search & Navigation
Surplus stock moves fast and rarely restocks. If many sizes sell out, collection grids look depleted and frustrate customers looking for available kit.
I built smart catalog depletion logic: products with over 30% out-of-stock options automatically hide dead variants, offering a discrete link for restock reminders.
I also developed a custom mega menu that pulls best sellers and hides out-of-stock items, predictive search with suggested rotations, and backwards-looking breadcrumbs.
Smart Depletion & Mega Menu
Auto-hides depleted variants and prioritizes top-selling products in top-level menus, keeping catalog pages vibrant.
Predictive Search & History
Zero-empty search state rotates suggested terms on blank focus, tracks past queries, and returns instant results.
Backwards-Looking Breadcrumbs
Metafield logic remembers the shopper's actual navigation history, showing their real route instead of an arbitrary tree.
Instant Filters & Wishlists
Mobile-friendly collection filters update instantly. Wishlist syncs between local storage and user accounts.
Overcoming Headless Integration Hurdles
Going headless means losing Shopify app widgets. Rather than paying enterprise tiers for third-party APIs, I built custom engineering solutions.
For Reviews.IO, we lacked API tier access. I engineered a lightweight MutationObserver script that extracts review data into our custom React components with skeleton states to prevent layout shift.
For homepage impact, I optimized video poster and streaming handling to deliver sub-second LCP despite a full-width hero video, and built custom user portals and Resend forms.
Zero-CLS Reviews.IO Integration
Extracted review data via MutationObserver and inserted it into native frontend cards without paying for costly API tiers.
Custom Resend Forms & Prefill
On-PDP product question forms and contact forms powered by Resend, automatically prefilled with logged-in user data.
Video Hero Performance
Clever poster and asset loading preserves 0.4s LCP on the homepage while showcasing a full-width video banner.
Custom React Account Portal
Complete control over user profiles, newsletter subscription preferences, order tracking, and saved address management.