Smart Cart Drawer

Anatomy of the drawer

Every pixel earns its seat.

This drawer lifted cart conversion from 1.2% to 2.4% on Lumière. Here's the thinking behind each layer — from the progress bar at the top to the checkout button at the floor.

1. 01

   Free-shipping progress bar

   Turns an abstract threshold into a visible target. The fill state is driven by subtotal so adding an upsell animates the bar forward in real time — the reward is watchable.

2. 02

   Live savings totalizer

   Only appears when something is saved. The dollar number is the largest in the drawer at that moment — the buyer's eye tracks to the win, not the cost.

3. 03

   Two-tier upsells, not a grid

   Surfaced items are curated to *finish* the cart, not distract from it. Every add-to-cart animates a check, so the interaction feels rewarded.

4. 04

   You Might Also Like — muted

   Third-tier recommendations live below the fold. Interesting enough to browse, quiet enough to ignore. Never competes with checkout.

5. 05

   Dark checkout button

   The only pure-black element on the page. By contrast alone, the eye always knows where to click next.