A headless e-commerce storefront for crystal jewelry — custom Next.js 15 frontend powered by Shopify Storefront API, with a 4-layer caching architecture delivering sub-second page loads across 60+ products.

The storefront is fully decoupled from Shopify. Next.js handles all rendering and user experience, while Shopify acts as a headless backend for inventory, orders, and checkout. All product data flows through GraphQL queries to the Storefront API, with cart operations managed via Shopify Cart mutations.
Each request passes through up to 4 cache layers before hitting the Shopify API. This architecture ensures sub-second page loads for cached routes while keeping product data fresh within a 30-minute window.
Shopify Liquid themes are fast to set up but constrain design and interactivity. A headless Next.js frontend gave full control over the browsing experience — custom filtering by element/zodiac, smooth page transitions, and a design system built around the crystal aesthetic with OKLCH colors.
Products change a few times per week, not per minute. A 30-minute ISR window means pages are almost always served from the CDN cache while ensuring price and inventory updates propagate within half an hour — an acceptable trade-off for a catalog of this size.
Building a custom checkout means handling PCI compliance, payment processing, and fraud detection. Redirecting to Shopify's hosted checkout offloads all of that — customers get a trusted, polished payment flow, and the project avoids months of compliance work.
Crystal products demand perceptually consistent colors — a purple amethyst next to a blue sapphire should feel naturally harmonious. OKLCH provides perceptual uniformity that hex/RGB cannot, and Tailwind v4's CSS-based config eliminated the JavaScript theme file entirely.