Christmas Shop 24
Festive headless storefront
Christmas Shop 24 is a headless Christmas retail storefront built on the Shopify Storefront API. It pairs a playful, seasonal identity (Playfair Display headings, a red/green/gold palette, snow-tinted accents) with a fully featured commerce build: filterable collections, a persistent cart, a native Shopify-powered blog, and a redirect to Shopify-hosted checkout.
The brief was an editorial, giftable middle: not a bargain bin, not a luxury boutique. It borrows the language of style magazines (serif headlines, curated collections, gold accents) and applies it to joyful, affordable products, so every interaction feels like stepping into a beautifully decorated Christmas shop: generous, unhurried, a little bit magical.
Stack & architecture
I architected the headless build: Next.js 15 against the Shopify Storefront API (GraphQL), a clean server/client split where all data fetching stays in server components, a client cart persisted to localStorage, and a disciplined GTM/GA4 layer with a strict one-trigger-per-event mapping.
Visual design
I set the editorial Christmas identity: Playfair Display headlines over Lato body, a restrained red / green / gold palette on cream, and a signature “editorial banner” pattern (image, dark gradient, gold small-caps eyebrow, serif title) reused across the homepage bento grid, collection headers and nav previews.
Polish & finish
The seasonal warmth lives in the motion and detail: scroll reveals, Ken Burns header zooms, a shine sweep on product cards, staggered drawer rows and a subliminal snowflake field. Every animation ships with a reduced-motion opt-out, and text stays full-white over imagery for accessibility.
Headless Shopify commerce
Collections, product pages with variants and galleries, a slide-in cart drawer persisted to localStorage, and checkout handed off to Shopify.
Native blog with ISR
Articles are authored in Shopify Admin and appear within a minute via incremental static regeneration, with no redeploy needed.
Editorial bento homepage
A full-height bento grid pairs a spanning editorial banner with best-sellers, alternating sides per section; product images flex to the row height instead of forcing a square.
Config-driven navigation
Nav collections are populated from an env var: add a collection handle and it appears in the navbar with zero code changes.
Palette
Typography
Playfair Display carries every serif heading (italic reserved for emotional emphasis); Lato handles body, UI labels and prices, clear and warm under the ornament.
Signature details
- One festive flourish per message: gold eyebrows with a single ✦, never stacked puns.
- If a layout feels “too Christmas”, pull back the red and gold first; cream and green carry the page.
- One gold CTA per view; red is reserved for action and urgency.
- Signature easing cubic-bezier(0.22, 1, 0.36, 1) means entrances glide and nothing ever snaps.
- Server components fetch all data; interactive UI is split into paired *Client.tsx components.
- SSG + ISR (revalidate: 60) across every route for fast, always-fresh pages.
- All GraphQL queries and types centralised in a single typed shopify.ts module.
- Nav preview cards open on hover/focus with careful dismiss handling, so client-side navigation never leaves them stuck open.
- WCAG-minded: approved text pairings, full-white copy over the editorial gradient, and a 3px gold focus ring on every interactive element.
Like what you see?
I’m available for freelance work. Let’s build something together.