On this page
Important Notice: This content is for educational purposes only. Results may vary based on your specific business circumstances, industry, market conditions, and implementation. No specific outcomes are guaranteed.
The button a shopper needs is often a scroll away
On a phone, the Add to cart button disappears after one swipe. A shopper who scrolls down to read reviews, check the size guide or look at more photos has to find their way back up before they can buy. A sticky add to cart bar is a small bar that slides up at the bottom of the screen once the theme's own button has scrolled away, so the button is always in reach.
This guide covers when that is worth doing and how to set it up well. To get an answer for your own store, the sticky add to cart tool for Shopify asks a few questions about your theme and pages and previews the bar as a real store widget.
Check your theme first
Several themes already ship a sticky bar, including Horizon, Prestige, Symmetry and Focal, usually behind a setting on the product page. Two bars on one page compete for the same space and confuse shoppers, so look in the theme editor before adding another. If your theme has one switched on, either keep it or turn it off and use a different bar, not both.
Phones first
The case for a sticky bar is strongest on a phone, where the screen is short and the button scrolls away quickly. On a computer, the buy area often stays in view, and many themes keep the product details pinned beside the photos as you scroll. Start with phones only. If most of your visits come from computers and your pages are long, you can try all devices later and compare.
Short pages need it least. If there is little below the button, a shopper is rarely far from it anyway.
What the bar should show and say
- The option they picked. A bar that adds a different size from the one selected is worse than no bar. The safest bars press the theme's own Add to cart button, so the size or colour the shopper picked is the one that goes in the cart.
- Plain button wording. Your theme's own Add to cart words are usually right, because shoppers then see the same words for the same action. Keep any custom text short and free of urgency words.
- Price when the page is long. On a long page the price has scrolled away with the button, so showing it in the bar helps. On a short page it only repeats what is still on screen.
- Room for everything else. A bottom bar must not cover chat buttons, cookie banners or the cart drawer. Bars that hide while a drawer or popup is open, near the footer and while the shopper is typing stay out of the way.
How to tell if it is working
A sticky bar can get more people to tap Add to cart without getting more people to buy. Some of those shoppers would have scrolled back up anyway, and some never check out. So judge it on sales per visitor, not on add-to-cart taps. Note your sales per visitor in Shopify's analytics for a few weeks before you turn the bar on, then compare the same number for a few weeks after, and change nothing else on the page in between.
Next step
Check your theme editor for a built-in sticky bar, then open the sticky add to cart tool to get a recommendation and preview the Sticky add to cart widget from the Nudgesmart app. You publish it from the app and add it to your product page. The other store widgets are in the store widget gallery.
For how a sticky bar fits with reviews, size guides and the other blocks on a page, see which product page widgets earn their place.
Tags
- product-page
- store-widgets
- mobile
- conversion
- ux