What is Sticky Add to Cart?

Sticky add to cart is a purchase control that stays visible while a product page is scrolled. Instead of disappearing above the fold, the button remains anchored in a bar at the top or bottom of the viewport, often together with the product name, image, price and variant selector. The pattern is most common on mobile product detail pages, where long descriptions, reviews and recommendation modules push the original button far out of view. The bar typically appears once the inline button scrolls past and disappears again when it returns.

Definition

Sticky add to cart is a presentation pattern, not a separate commerce function: it calls the same cart action as the inline button and shares its state, including disabled states for unavailable variants. Variants differ in how much they carry. A minimal bar shows only the button, a full bar repeats thumbnail, title, price and variant controls so a selection can be made without scrolling back. Design constraints matter: the bar consumes vertical space, can collide with mobile browser chrome, consent banners and chat widgets, and must not cover form fields or the safe area of the device. Duplicate buttons also need distinct analytics identifiers so attribution stays readable.

Why it matters

In a decoupled storefront the sticky bar is a storefront composition concern handled entirely in the presentation layer, while pricing, stock and cart mutations stay behind the commerce API. Rendering the bar from the same product state that feeds the inline button avoids divergence when a variant changes. Because the element is fixed and often animated, it belongs to the hydration budget of the page and should not block the main thread during initial load. Driving visibility with an intersection observer instead of a scroll listener protects layout stability and input responsiveness. Cart mutations run through the same API client, so optimistic updates and error handling remain in one place.

Use cases

The typical placement is the product detail page on small screens, where the bar appears after the hero section leaves the viewport. On desktop the equivalent is a sticky column that keeps price and purchase controls beside long content. Quick view overlays and bundle configurators use the same pattern to keep the primary action reachable. On collection pages a sticky bar can summarise a selected filter set or a compare action instead of a cart action. In checkout flows the pattern carries the continue action. Where space allows, the bar also hosts secondary information such as delivery estimates, stock state or a save control.

Related

Explore Mobile Commerce · Conversion Rate Optimization (CRO).