Sticky Add to Cart Bar React component
A product page whose buy box hands off to a floating add-to-cart bar once the main button scrolls away: product thumb, live variant summary, an upward size menu, quantity, price and an Add to cart button that turns into Added while the cart count bumps.
About the Sticky Add to Cart Bar component
Sticky Add to Cart Bar keeps the buy button within reach on long product pages. While shoppers read the details, specs and photos, a slim bar slides up from the bottom with the product, the chosen options, the price and an Add to cart button.
It appears only once the main button has scrolled out of view, so it never duplicates a button that is already on screen. Tapping the product in the bar scrolls back to the options, and adding shows a clear Added state while the cart count bumps.
When to use it
Use it on product pages with long descriptions, reviews or lifestyle photos below the buy box, especially on phones where the main button quickly scrolls away.
On short product pages where the buy button stays visible, skip it; a bar that pops up for a moment adds noise without helping.
Installation
Add the Sticky Add to Cart Bar component to your project with the shadcn CLI. It lands in components/sticky-add-to-cart-bar.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/sticky-add-to-cart-barOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Sticky Add to Cart Bar with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Sticky Add to Cart Bar FAQ
- When does the bar appear?
- An IntersectionObserver watches the main add-to-cart row. The bar slides in once that row has scrolled above the top of the viewport and slides away when the shopper scrolls back to it.
- Why does the section use overflow-clip?
- Sticky positioning stops working inside an ancestor with overflow: hidden. overflow-clip still clips the content but keeps the zero-height sticky rail working. Use overflow-clip on any wrapper you put around the block too.
- Do the bar and the main buy box stay in sync?
- Yes. Both read the same size, strap and quantity state, so changing the size in the bar updates the buy box and the price everywhere.
- What happens on phones?
- The bar keeps the thumbnail, name, price with the chosen options and the Add to cart button. The size menu and quantity stepper move out to save space; tapping the product scrolls back to the full options.
- Is it accessible?
- The bar is a labelled region, options are radio groups, the size menu is a listbox with the current choice marked, the quantity is announced and the button states change their text, not only their colour.
