Fixed add-to-cart bar that appears on scroll. Position, style, content, and synchronization with the main form.
Sticky Add to Cart
The Sticky Add to Cart bar is a fixed bar that appears when the visitor scrolls past the main purchase button on the product page. It ensures the add-to-cart button is always accessible, no matter where the visitor is on the page.
How it works
- The visitor lands on the product page and sees the standard purchase form
- When scrolling down (reviews, description, additional sections), the ATC button leaves the viewport
- The sticky bar appears with a smooth animation
- The visitor can add to cart from the sticky bar without scrolling back up
- When scrolling back up to the main form, the bar disappears
Settings
Position and trigger
| Setting | Description | Options |
|---|---|---|
| Enable | Enable the sticky bar | Yes / No |
| Position | Bar placement | Top / Bottom of the screen |
| Desktop | Show on desktop | Yes / No |
| Mobile | Show on mobile | Yes / No |
Style and appearance
| Setting | Description | Options |
|---|---|---|
| Style | Bar presentation | Compact / Full |
| Background color | Bar background | Color palette |
| Shadow | Drop shadow | Yes / No |
| Border | Separator border | Yes / No |
and Full (image + title + variant + price + ATC button))
Displayed content
Full mode displays the following elements (each can be enabled or disabled):
| Element | Description | Default |
|---|---|---|
| Product image | Product thumbnail | Yes |
| Title | Product name | Yes |
| Price | Current price (and compare-at) | Yes |
| Variant selector | Variant dropdown | Yes |
| Quantity selector | Quantity field | No |
| ATC button | Add to cart button | Always |
Compact mode displays only the price and ATC button.
Synchronization
The sticky bar is fully synchronized with the main product form:
| Action | Behavior |
|---|---|
| Change variant in the form | The sticky bar updates (variant, price, image, availability) |
| Change variant in the sticky bar | The main form updates |
| Change quantity | Synced both ways |
| Sold-out variant | The sticky bar ATC button becomes inactive |
| Product sold out | The sticky bar shows "Sold out" |
Mobile behavior
On mobile, the sticky bar is particularly important because the product page is long (stacked layout). A few specifics:
| Aspect | Desktop | Mobile |
|---|---|---|
| Default position | Top | Bottom |
| Variant selector | Inline dropdown | Fullscreen dropdown |
| Bar height | ~60px | ~56px |
| Safe area | Standard | Respects iOS safe area (notch) |
Animation
The sticky bar appears and disappears with a smooth animation:
| Property | Value |
|---|---|
| Type | Slide + Fade |
| Duration | 300ms |
| Easing | ease-out (appear) / ease-in (disappear) |
| GPU | Accelerated (transform + opacity) |
The animation automatically respects prefers-reduced-motion: if the visitor has disabled animations in their system settings, the bar appears/disappears instantly.
Integration with the cart drawer
When the visitor clicks the ATC button on the sticky bar:
- The product is added to the cart via the AJAX API (no page reload)
- The cart drawer opens automatically
- The sticky bar remains visible behind the drawer
- The cart counter in the header updates
Best practices
- Always enable it: The sticky ATC bar is a proven conversion booster, especially on mobile
- Compact mode on mobile: To avoid taking up too much screen space
- Full mode on desktop: Take advantage of the space to display the image and title
- Bottom position on mobile: The thumb naturally reaches the bottom of the screen
- Test both positions: Depending on your audience, top may work better on desktop