Sun & Rain Works
A headless Shopify storefront, built end to end.
A custom Next.js 16 storefront for a farm-rooted apparel brand, wrapped around Shopify and Printful so the team keeps inventory and fulfillment in the tools built for them. Shopify stays the system of record, and the storefront owns brand identity, product storytelling, search, cart, and checkout handoff. A bespoke image pipeline replaces bland Printful mockups with custom AI product photography on every variant.
A custom storefront without owning the commerce backend
A stock Shopify theme is fast to launch but boxes in the brand. A fully custom store is expressive but drags inventory and fulfillment into code. This project takes the middle path: a thin, typed Next.js layer over Shopify.
Sun & Rain Works is a heritage agricultural apparel brand, and the storefront had to carry that identity, farming, weather, soil, and honest craft, while staying easy to run. Shopify owns products, collections, carts, and checkout, and Printful handles drop-ship fulfillment. The Next.js app is a brand-first front end that renders catalog data server-side, hands cart and checkout back to Shopify, and revalidates its cache when Shopify webhooks fire. The result is a storefront the brand can evolve freely, with commerce operations left where they belong.
Headless commerce on Vercel, Shopify as system of record
A Next.js front end on Vercel, backed by Shopify for commerce and Printful for fulfillment, joined by a typed data layer and webhook-driven cache invalidation.
Next.js 16 on Vercel
App Router with Cache Components (Partial Prerendering) and Tailwind CSS v4, deployed on Vercel. Server Components render branded story pages, product grids, search, and the cart shell, with dynamic reads wrapped in Suspense boundaries.
Shopify Storefront API
A centralized lib/shopify layer talks to the Shopify Storefront GraphQL API (version 2024-10), shaping responses, filtering hidden products, and keeping all fetches behind typed helpers.
Printful drop-ship
Printful designs are synced to Shopify as products, then published to the Storefront API sales channel. Inventory and fulfillment stay in Printful and Shopify, the storefront never owns that workflow.
Tag-based revalidation
Catalog and CMS reads are cached with Next.js cache tags. Shopify product and collection webhooks hit /api/revalidate, an HMAC-verified endpoint that revalidates exactly the affected data.
Everything a brand storefront needs, nothing it doesn’t
Branded storytelling and full commerce flow on the front, a bespoke media pipeline and operational tooling behind it.
Branded home & story pages
A storytelling homepage plus About and Farm Gallery routes built around the brand’s agricultural heritage.
Product & search
Server-rendered product pages with variant selection and structured data, plus catalog search with sort and responsive grids.
Cart & checkout
Shopify-backed cart with line mutations and a drawer, handing off to Shopify checkout, the cart identity lives in a cookie.
Custom AI product photography
A generator pulls each product’s color variants from Shopify and produces reviewable model images to replace flat Printful mockups.
Dynamic social previews
A branded Open Graph image is generated per page, with a static fallback for platforms that don’t run the OG route.
Health & diagnostics
A /api/health endpoint and a gated Shopify-status check report boolean configuration state without ever exposing secrets.
Built like production software, not a brochure
- Typed, centralized commerce layer. All Shopify access flows through one data layer with GraphQL operations, pagination, retry-with-timeout transport, response reshaping, and hidden-item filtering, so commerce logic lives in one place.
- Custom AI product photography pipeline. A generator reads a product’s colors from Shopify, expands a prompt template once per color, casts a diverse mix of model ethnicities, and writes images plus a resumable manifest.json, runs are resumable, with a CI mock provider so the pipeline is exercised without API quota.
- Secure webhook boundary. The revalidation endpoint verifies Shopify’s X-Shopify-Hmac-Sha256 signature against a signing secret and rejects unsigned requests with a 401, query-string secrets are not accepted.
- Modern Next.js 16 caching. Cache Components and Partial Prerendering are enabled, with "use cache", cache-tag invalidation, and Suspense boundaries around every dynamic read so static prerendering holds.
- Structured observability. The app emits filterable JSON logs for cart, checkout, health, and webhook events, and can post alerts to a webhook for high-value failures like checkout-handoff errors.
- Quality discipline. A Vitest unit suite and Playwright browser smoke tests run in CI, covering the failure-prone seams, cart reducers, pagination, retry transport, webhook HMAC, and the live cart-to-checkout path.
Live, branded, and operable
Sun & Rain Works runs in production at sunandrainworks.com. It illustrates headless commerce design, a custom Next.js front end on Vercel over Shopify and Printful, alongside a bespoke AI product-imagery pipeline, secure webhook-driven caching, and the observability and tests that make a storefront safe to operate.