Sticky add-to-cart bar
A compact buy bar pinned to the viewport, keeping add to cart within reach after the main product button scrolls away.
See it
What it is
A sticky add-to-cart bar is a compact buy box fixed to the viewport while someone scrolls a long product page. It usually repeats the product title, selected variant, price, and primary purchase button, then disappears when the original buy box is visible.
Reach for it on mobile-first or content-heavy PDPs where galleries, reviews, and specifications can put several screens between a shopper and the real button. It keeps the next action handy without forcing the whole purchase form to stay pinned.
Gotcha: two visible buy buttons feel broken and can create duplicate screen-reader stops. Observe the original button and show the bar only when it leaves the viewport. Reserve its space, respect the phone's safe area, and make sure it does not cover cookie notices, chat controls, or the last lines of page content.
Ask AI for it
Build a sticky add-to-cart bar for the product page. Use IntersectionObserver on the original buy box and show the bar only when that box is outside the viewport. Render the selected variant, price, stock state, and one add-to-cart button wired to the same form state as the main button. On mobile use CSS position: fixed, bottom: 0, and padding-bottom: env(safe-area-inset-bottom); on desktop use a compact top bar. Reserve page padding so no content is covered, animate with transform for 180ms, and remove the movement under prefers-reduced-motion.