Saks Fifth Avenue

Saks Fifth Avenue

Lookbook-style campaign for Saks Fifth Avenue. Editorial fashion photography with per-outfit shop-the-look CTAs deep-linking to product pages, plus seasonal reskinning via CSS custom properties.

Overview

FormatPage Grabber
PlatformDesktop + Mobile
EngineGreenSock
AgencyUndertone

Lookbook-style showcase for Saks Fifth Avenue. Editorial photography slides in with luxury-paced transitions, each outfit paired with a "Shop the Look" CTA that deep-links to the product page. Background colors shift to complement each outfit, extending art direction to the ad frame itself.

Luxury retail campaigns balance aspiration with commerce: beautiful enough to engage, shoppable enough to convert.

Context

Saks was one of the more exacting accounts from a brand standards perspective. Their team reviewed every font weight, letter-spacing value, and transition duration against their print editorial guidelines. The engineering challenge was the seasonal reskinning system — Saks runs holiday, spring, resort, and fall campaigns, and rebuilding the ad from scratch each season wasn't viable. I built the template around CSS custom properties for the color palette, so swapping from holiday gold to spring pastel required changing a handful of color values without touching layout or animation code. The per-outfit deep links were the other non-trivial piece: each "Shop the Look" CTA carried a product-specific URL, and those URLs changed every campaign. The complementary background color system was more manual than it sounds — each outfit got a hand-picked background color that the Saks creative team approved individually.

How It Works

~2s

Editorial

First look fills the viewport. Saks logo and seasonal headline animate in with restrained, elegant timing.

Auto-cycle

Lookbook

Outfit looks cross-fade on a timed interval. Each look is full-bleed editorial photography with complementary background colors.

Interactive

Shop

"Shop the Look" CTA per outfit. Users can also manually navigate between looks. Each CTA carries a product-specific deep link.

End State

Explore

Saks homepage link and seasonal collection CTA always visible. Campaign attribution tracked per outfit.

Engineering

Lookbook Gallery

Full-bleed fashion photography with GreenSock cross-fade transitions. Background colors shift to complement each outfit: art direction extends to the ad frame itself.

Shop-the-Look

Per-outfit CTAs carry product page URLs. Click attribution tracks which looks drive the most traffic, feeding back into merchandising decisions.

Seasonal Themes

Template architecture supports seasonal reskinning: holiday gold, spring pastels, resort blues: by swapping CSS custom properties and imagery sets.

Luxury Typography

Saks' brand typeface with generous whitespace. Letter-spacing and line-height tuned to match their print editorial standards.

Engineering Decisions

Saks sells aspiration, not SKUs. A product grid is for Amazon. A lookbook says "this is who you could be": and happens to let you buy the outfit.

A collection page shows 200 products. A deep link to the specific outfit shown in the ad preserves the editorial intent and shortens the purchase path.

Fashion photography looks best against colors that complement the outfit. A red dress against a dusty rose background creates a mood. White is sterile.

Multiple looks showcase the collection breadth. Auto-cycling ensures passive users see variety. Manual navigation respects engaged shoppers who want to browse.

Project stack

  • HTML5
  • CSS3
  • JavaScript

More projects