You have seen it. A product page loads, the customer starts scrolling, and by the time they reach the reviews section the buy button is gone. They have to scroll all the way back up to add to cart. Most of them do not. They just leave.
On desktop, this is a minor annoyance. On mobile, it is a conversion killer. The buy button needs to be visible at all times. But sticky elements done badly are annoying, intrusive, and make your store look desperate.
Here are 5 sticky element tweaks that keep the buy button in view without alienating your mobile shoppers.
1. Use a Bottom Bar Instead of a Floating Button
The most common sticky element mistake is floating a circular “Add to Cart” button in the bottom right corner. It covers content, it feels like a pop-up, and on mobile it often overlaps with the browser navigation bar.
Instead, use a full-width bottom bar. It sits at the bottom of the screen, spans edge to edge, and contains the price and the add-to-cart button. It feels like a natural part of the interface, not an intrusion.
The bar should be 60 to 70 pixels tall on mobile. Anything taller eats too much screen real estate. Anything shorter makes the button hard to tap.
2. Hide the Sticky Bar Until the User Scrolls Past the Fold
If the sticky bar is visible the moment the page loads, it is redundant. The actual add-to-cart button is already on screen. Showing a second one immediately looks broken.
Set the bar to appear only after the user scrolls past the main product image and primary add-to-cart button. This means the sticky bar is only visible when the original button is out of view. It is a replacement, not a duplicate.
The trigger point should be when the original button leaves the viewport, not after a fixed number of pixels. This adapts naturally to different screen sizes and product page layouts.
3. Show Price and Variant Selection in the Sticky Bar
A sticky bar with just a button is a missed opportunity. The moment a customer decides to buy, they need three things: the price, the variant they selected, and the button. If they have to scroll back up to check the price or confirm their size selection, you have added friction.
Include the selected variant name and price in the sticky bar. When the user selects a variant on the main page, the sticky bar updates in real time. This gives them confidence to tap without scrolling back to verify.
Keep it minimal. Price on the left, variant name below it in smaller text, button on the right. Nothing else. Clutter in a sticky bar makes it feel like a banner ad.
4. Dismiss on Tap Outside, Not on Scroll Up
Some sticky elements hide when the user scrolls up, assuming they want to go back to the top. This is wrong. Scrolling up to read reviews or check specifications does not mean the user has given up on buying. Hiding the bar at that moment removes the option exactly when they are evaluating the product.
Instead, keep the bar visible throughout the scroll. If you want to give users a way to dismiss it, add a small close icon in the corner of the bar. Tapping it collapses the bar into a small floating button that can be tapped to bring it back.
This respects the user’s screen space while keeping the purchase option one tap away.
5. Animate the Appearance, Not the Content
When the sticky bar slides in, it should animate once. A smooth slide-up from the bottom over 200 to 300 milliseconds. After that, the bar stays still.
Do not animate the price when it changes. Do not pulse the button. Do not add a loading shimmer to the variant name. The bar is a utility, not a performance. Once it is visible, it should feel solid and permanent.
The only exception: a brief colour flash on the button when the user changes variants, confirming the selection updated. 150 milliseconds, then back to normal. Subtle enough that most users will not consciously notice it.
Bonus: Test on Real Devices, Not Just Browser Dev Tools
Sticky elements behave differently on actual mobile browsers. Safari on iOS has the bottom navigation bar that can overlap with your sticky bar. Android Chrome has the pull-to-refresh gesture that can conflict with sticky bottom elements. Chrome on Android also has the dynamic toolbar that hides on scroll down and reappears on scroll up.
Test on at least one iPhone and one Android device. Check that your sticky bar does not overlap with browser chrome. Check that it does not interfere with pull-to-refresh. If it does, add 10 pixels of bottom padding to the bar so it clears the browser navigation.
Quick Checklist
- Bottom bar, not floating button
- Appear only after original button scrolls out of view
- Include price and selected variant, not just the button
- Keep visible during scroll, dismiss only on explicit close
- One slide-up animation, no ongoing motion
- Test on real iPhone and Android devices
Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.
