Headless Shopify Storefront
Arbor Home
Lead developer on an editorial, high-performance e-commerce storefront engineered to showcase modern Shopify Headless architecture. Decoupled using Next.js 15 (App Router) and the Shopify Storefront API, the store delivers sub-second page loads, custom 3:4 portrait product grids, and an instant optimistic cart drawer.
The Challenge
Traditional Shopify monolith themes often struggle with heavy JavaScript, sluggish transitions, and rigid layouts. Arbor Home needed an editorial, high-end design system that showcased tall furniture and home decor without awkward image cropping, plus instant cart feedback, all while achieving sub-second load times.
Approach
I decoupled the presentation layer by building a Next.js 15 App Router frontend integrated with the Shopify Storefront GraphQL API. I developed a responsive 3:4 aspect ratio grid for portrait products, implemented an optimistic cart drawer using React Server Actions to eliminate checkout lag, and styled a custom luxury layout with native CSS color-mix sticky headers.
What I did
- Direct type-safe integration with Shopify Storefront GraphQL API for real-time inventory, products, and dynamic menus.
- Bespoke luxury design system utilizing a custom color palette (Forest Green, Warm Stone, Amber) with CSS color-mix sticky headers.
- Custom responsive 3:4 portrait aspect ratio product grid tailored for home decor to prevent awkward image cropping.
- High-performance cart drawer utilizing React Server Actions and Optimistic UI for instant visual updates.
Outcomes
- Sub-second page transitions and a Lighthouse performance score of 98+.
- Instant, optimistic cart updates for adding, editing, and deleting items.
- Robust, type-safe dynamic menu synchronization directly from Shopify Admin with local fallbacks.
Next project
Bilal Marth (BM7)