Mercer

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.

What’s inside

• 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

The 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.

See it live

The demo is public: https://fpsjago.github.io/Mercer/. 9 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.