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, so the 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

    Markup

  • CSS3

    Styling

  • JavaScript

    Language of the web

  • GSAP

    Animation

More projects