Technical showcase, not client work
Snow / Motion
A headless Shopify storefront where product data, not code, decides what each page shows.
Built by Lintel’s founder, Gencer Karakaya, in September 2026 as a proof of concept. It runs on a Shopify development store with Shopify’s sample snowboard products, and nothing on it is for sale.
About this demo
A demonstration storefront, built to show how a headless Shopify build is put together. It runs on a Shopify development store with Shopify’s sample snowboard products. It is not a client project, and nothing on it is for sale.
Built with
- Shopify Hydrogen 2026.4Shopify’s React framework for headless storefronts
- React Router 7 and React 19server-side rendering with streamed data
- Shopify Storefront APIGraphQL queries for products, collections, search and recommendations
- Product metafieldsfive
snow.*fields that drive specs, the flex chart and collections - GSAP and ScrollTriggermotion, loaded on demand and skipped under reduced motion
- Lenissmooth scrolling, off on touch devices
- View Transitions APIthe card-to-product-page morph
- Vite 8 and TypeScriptbuild tooling
- Cloudflare Workershosts the public copy; Oxygen deploys from GitHub Actions for the private copy
- Playwrightend-to-end tests
- Sector
- Technical showcase on sample data
- Architecture
- Hydrogen
- Founder’s role
- Architecture, Design and development
- Stack
- Hydrogen, React Router, Storefront API, GSAP, Lenis, Cloudflare Workers
- Open the showcase
- headless.gencerkarakaya.com
Scope of the build
- 5
- product metafields drive the specs, the flex chart and the terrain
- 3
- automated collections sorted by a metafield, not by code
- No cart
- a showcase, not a shop: nothing is for sale
- 86
- Lighthouse performance score, mobileLab: Lighthouse 12.8.2, homepage, median of 3 runs, 24 Sep 2026
- 3.5 s
- Largest Contentful Paint, mobileLab: Lighthouse 12.8.2, median of 3 runs, 24 Sep 2026
- 0
- Cumulative Layout ShiftLab: Lighthouse 12.8.2, all 3 runs, 24 Sep 2026
- 140 ms
- Total Blocking Time, mobileLab: Lighthouse 12.8.2, median of 3 runs, 24 Sep 2026
- 01The question
Can Shopify stay the source of truth in a headless build?
That is the question a merchant considering headless should ask first. In this showcase, a product edited in the Shopify admin moves between collections and updates its spec sheet without a code change or a deploy.
- Every product, price and variant comes from the Storefront API, using Shopify’s sample catalog
- No hard-coded product pages or collection lists
- Clearly a demo: no cart and no checkout
- 02The architecture
Hydrogen on the Storefront API, with metafields as the data model.
Each board carries five metafields in a snow namespace: terrain, flex, profile, core and tech. Three automated collections, Powder, All Mountain and Freestyle, use the terrain metafield as their rule, so changing one value in the admin moves a board between them.
- Hydrogen 2026.4 on React Router 7, server-rendered, with secondary data streamed in after the first response
- Storefront API GraphQL queries for the hero, catalog, terrain collections, product pages, predictive search and recommendations
- Deployed to Oxygen from GitHub Actions. The public copy runs on Cloudflare Workers, because a development store has no public Oxygen environment
- 03The experience
Motion that loads only when it helps.
GSAP and ScrollTrigger load on demand and are skipped when a visitor prefers reduced motion, and the heaviest effects are left out on small screens. Lenis smooth scrolling is skipped on touch devices. A product card morphs into its product page with the browser’s native View Transitions.
- A flex chart that places each board by its flex metafield, usable from the keyboard
- Search and menu drawers built as accessible dialogs
- End-to-end tests for the browse path, reduced motion and the absence of any checkout
- 04The performance
Performance, measured
Responsive images are built from Shopify’s CDN, so each device downloads a size that fits, and the animation code ships in its own chunk instead of the main bundle. Measured in the lab with Lighthouse on mobile, the homepage scores 86 with no layout shift (details under Scope of the build). A demo has too little real traffic for field data.
- 05What it shows
What a headless build involves, shown rather than described.
A Hydrogen storefront can keep Shopify in charge of the data. It also means owning the GraphQL queries, caching and deployment that a theme gets from Shopify, which is why Lintel recommends headless only when it pays for itself.
