Skip to content
Wunderlich Web
← All work

09. E-COMMERCE · SHOPIFY HEADLESS

Hoplite Health

Veteran-owned supplement brand. Brand refresh + headless Shopify storefront on Next.js, with cart, checkout, and HTML sanitization for product copy.

Hoplite Health supplement brand website

TIMEFRAME

Q1 2026

ROLE

Brand refresh, headless architecture, Shopify Storefront API integration, security audit.

Hoplite Health — a veteran-owned supplement brand. Existing store was on a stock Shopify theme that was slow, generic, and hurting brand perception.

THE PROBLEM

Stock Shopify themes max out around 4-second mobile loads on supplement-heavy product detail pages, and Hoplite was losing mobile conversion. The brand also needed a refresh — League Spartan + a typographic system — that stock themes couldn't deliver.

THE APPROACH

  • Headless architecture: Next.js front-end talking to the Shopify Storefront API via a custom shopify-queries layer, so the site is static-fast but still syncs with Shopify inventory, pricing, and checkout.
  • Cart context and line-item management built client-side, with server-side fetches for catalog data.
  • Brand refresh: League Spartan + serif pairing, proper label SVG work, tight typographic system.
  • Security pass before launch: HTML sanitization (isomorphic-dompurify) on product copy from the Shopify API, strict CSP on the Next layer, checkout still handled by Shopify's hardened flow.

STACK

  • Next.js
  • Shopify Storefront API (custom query layer)
  • isomorphic-dompurify
  • Tailwind
  • League Spartan
  • Resend
  • Vercel

RESULTS

  • eliminated

    THEME DEPENDENCY

  • enforced

    PRODUCT COPY SANITIZATION

  • hardened Shopify

    CHECKOUT PATH

Visit hoplite.health ↗Start a project like this →

NEXT CASE STUDY

MiddleC

WEB APP