Posted Vintage (Headless Shopify)
A headless Shopify e-commerce storefront for a curated Australian vintage surfwear archive, engineered with Next.js 16, React 19, Tailwind CSS v4, and the Shopify Storefront GraphQL API.
Posted Vintage is a custom headless e-commerce storefront representing a coastal vintage surfwear archive curated in Australia and shipped worldwide. It decouples the presentation layer from standard Shopify Liquid templates to deliver custom editorial design, instant page transitions, and specialized vintage merchandising.
Built using Next.js 16 App Router, React 19, Tailwind CSS v4, and @shopify/hydrogen-react, the platform interacts with the Shopify Storefront API via high-performance GraphQL queries. It features custom vintage measurements with metaobjects, private drop password protection, automated customer accounts, multi-currency geolocation, and an archive of sold vintage pieces.
The Problem
Standard Shopify Liquid themes offer limited flexibility for bespoke vintage apparel merchandising, where unique item measurements, metaobjects, archive history of sold 1-of-1 items, and drop-based password gating require distinct architectural freedom without sacrificing Shopify's secure checkout infrastructure.
The Solution
A headless architecture separating the modern Next.js 16 frontend from the Shopify backend. Connects via GraphQL to Shopify Storefront API for live inventory, cart mutations, customer account authentication, and Shopify hosted checkout, while giving the client complete creative control over UI polish and vintage curation.
Tech Stack
Project Preview
Key Features
Headless Shopify Storefront: GraphQL integration for product queries, collection browsing, and live inventory sync
Custom Vintage Measurements: integration with Shopify Metaobjects for precise garment sizing schematics
Sold Archive Showcase: dedicated collection page preserving sold one-of-a-kind vintage pieces for brand heritage
Password Protection Gateway: custom password-gate route (/password) for VIP drops and exclusive collection launches
Shopify Customer Accounts: seamless customer authentication, saved delivery addresses, and store credit queries
Geolocation & Currency: automated country and currency detection for international surfwear collectors
Optimized Slideout Bag: real-time cart drawer with Shopify checkout synchronization via @shopify/hydrogen-react
Editorial Design Direction: understated coastal surf luxury following strict UI craft principles (Energy 1 / Rhythm 1 / Motion 1)
Challenges
- Integrating Shopify Storefront GraphQL API with Next.js 16 Server Components and Hydrogen React hooks for optimal caching and hydration
- Modeling custom vintage garment attributes and measurements using Shopify Metaobjects without breaking standard checkout workflows
- Implementing private drop password authentication while preserving public SEO indexing for past archives
- Designing an understated coastal luxury aesthetic with strict visual restraint, predictable grids, and subtle micro-interactions
What I Learned
- Mastery of headless Shopify e-commerce architecture using Hydrogen React and Storefront GraphQL APIs
- Structuring custom Metaobject schemas in Shopify for specialized vintage and apparel domains
- Translating client discovery specifications into an exceptional, high-performance shopping experience