Mercer

About This Template

Mercer is a light-mode DTC storefront template for boutique retail — the calm of a high-end concept store, with generous negative space and oversized product photography. Nine routes cover the home lookbook, a filterable catalog, product detail pages, collection landings, a journal, about, contact and a 404. Its signature is the "shelf" grid: every product sits on a visible hairline baseline rule with a catalog index number (01, 02, 03…) in wide-tracked small caps. The hero is a lookbook unfold — a full-bleed daylight still shrinks and docks into the first cell of a horizontal collection rail while GSAP ScrollTrigger pins the section and turns scroll-y into scroll-x. A complete cart runs on a localStorage-backed store: slide-over drawer, qty steppers, a $75 free-shipping progress bar and quick-add from the grid.

Signature

The homepage opens with a lookbook unfold: GSAP ScrollTrigger pins the hero and a full-bleed daylight still scales down to 42% and docks into the first cell of a featured-collection rail, while the rail then scrolls horizontally — scroll-y translated into scroll-x inside a single pin. Underneath everything runs the "shelf" grid: a hairline baseline rule that every product, collection card and editorial block physically sits on, each one numbered like a boutique catalog. On mobile the pin is dropped entirely for a clean editorial hero plus a native swipe carousel.

Features

• 9 routes — Home, Shop, Product Detail, Collection, Journal, Journal Article, About, Contact, 404
• Lookbook-unfold hero — GSAP ScrollTrigger pins the section and docks the hero still into a horizontally scrolling collection rail
• The "shelf" grid — hairline top rule, catalog index number and kerned product name on every card
• Full cart system on a localStorage-backed store — slide-over drawer, qty steppers, subtotal, empty-cart state
• Free-shipping progress bar with a $75 threshold and an unlock animation
• Shop filter + sort that re-flows the grid with GSAP Flip, plus quick-add and an empty-filter state
• PDP with sticky collage gallery, variant selector, sticky add-to-cart bar, details accordion, cross-sell and reviews
• 4 content collections — 14 products, 4 collections, 12 reviews, 3 journal articles (JSON + Markdown)
• SplitText word-mask headline that waits for document.fonts.ready before animating
• Cursor-following "View" bubble on the shop grid, driven by gsap.quickTo and hidden on touch or reduced-motion
• Magnetic buttons via gsap.quickTo, disabled on coarse pointers and reduced-motion
• Contact page with validated form, FAQ accordion and stockist info
• 2 color skins — Daylight (default) and Atelier — swapped with a data-skin attribute
• SVG fractalNoise paper grain, terracotta marquee ribbon and warm radial atmosphere layers
• Self-hosted fonts through Astro's Fonts API, 31 optimized images, sitemap, robots.txt and Store JSON-LD
• Lenis smooth scroll + Astro View Transitions with ClientRouter, TypeScript strict, zero any

Deployment