E-commerce

Sticky Add to Cart

A long skincare product page where, as soon as the main buy box scrolls out of view, a compact buy bar slides in with the product thumbnail, chosen variant, size picker, quantity, live price and Add to bag — always in sync with the main buy box.

Full screen Add this to my project

Use the Live / Loading / Empty / Error switch at the top of the demo to see every state.

Why it matters

Shoppers who scroll down to read ingredients and reviews can buy the moment they are convinced, without scrolling back up — one of the simplest, highest-impact conversion lifts on mobile product pages.

How it works

01An IntersectionObserver watches the main Add to bag row; the bar appears only after it has scrolled past, and hides again when it returns.
02Size, subscription, quantity and price are one shared state, so a change in the bar updates the buy box and vice versa.
03It docks at the top on desktop and at the bottom on phones above the safe area (merchants can force top or bottom); a progress line shows how far the shopper has read.