How to add a sticky add to cart bar
Keep your Add to cart button in reach on product pages once shoppers scroll past it. It uses your theme's own button, so the option a shopper picked is always the one added.
On a long product page, the Add to cart button scrolls out of sight. A sticky bar keeps it at the bottom of the screen, so shoppers can add the product without scrolling back up.
TL;DR
Go to Store Widgets, click Create Widget and pick Sticky add to cart. Choose the devices it shows on, then click Publish. Click Add to store to open the theme editor on your product page, choose your bar in the Nudgesmart widget block's Widget setting, and click Save. If your theme already has its own sticky bar, turn that one off first.
Step 1 · Create the bar
In Nudgesmart, open Store Widgets and click Create Widget. Pick Sticky add to cart. It's under Products & cart.
Widget library with the Sticky add to cart widget highlighted under Products & cart
Screenshot coming soon
If your theme already has a sticky add to cart bar, Nudgesmart tells you: "Your theme has its own sticky bar. Turn it off in the theme editor to use this one." You can still create the bar, but it stays off on your store while your theme's bar is there. Two bars on one page confuse shoppers.
Step 2 · Choose what the bar shows
In the Content tab, open the Settings section under Sticky add to cart.
Sticky add to cart settings with Button text, Show the product photo and More options
Screenshot coming soon
- Button text. Optional. Leave it empty to use your theme's own "Add to cart" wording.
- Show the product photo. On by default.
Under More options:
- Devices. Phones only (the default), All devices or Computers only. Phones are where the button scrolls out of reach most, so start there.
- Show the product price. Off by default, because your theme already shows the price next to its own button.
The bar also shows the product's name and the option the shopper has picked, such as a size or color.
Step 3 · Publish and add it to your product page
In the Visibility card, click Publish. Then click Add to store and click the button for your product pages.
The theme editor opens on your product page with the Nudgesmart widget block added. Choose your bar in the block's Widget setting, then click Save. Where the block sits on the page doesn't matter: the bar always shows at the bottom of the screen.
To add it by hand, go to Online Store → Themes → Customize, open your product page template, click Add block, then Apps, and pick Nudgesmart widget.
The bar works on product pages only.
When the bar shows
The bar slides up once the shopper has scrolled past your theme's Add to cart button. It hides again:
- when your theme's own button is back on screen, such as at the top of the page,
- near the bottom of the page, so it doesn't cover your footer,
- while a slide-out cart, a pop-up or any other window is open,
- while the shopper is typing, so it doesn't sit on top of the keyboard.
It never covers your WhatsApp or chat button. Those move up above the bar while it shows.
How adding to cart works
The bar doesn't have its own size or color picker. Tapping its button presses your theme's own Add to cart button for the shopper. So:
- The option the shopper picked is always the one added. If they change the size or color, the bar updates to match.
- Your theme's cart works as usual. If your theme opens a slide-out cart after an add, it does that here too. Subscriptions and quantities chosen on the page carry over.
- No option picked yet, or the picked one sold out? The button says so, and tapping it scrolls the shopper back up to the options.
Is it working for you?
A sticky bar can get more people to tap Add to cart, but that doesn't always mean more sales: some of those shoppers would have scrolled up and added the product anyway, and some never check out. So judge the bar on revenue per visitor, not on add-to-cart clicks. Compare your store's sales per visitor for a few weeks before and after you publish it, in Shopify's analytics.
Nudgesmart doesn't count the bar's taps separately. Adds made from the bar go through your theme's button, so they show up in your Shopify reports with the rest.
Tips
- Start on phones only. On a computer, the theme's button is rarely far away. Try All devices later if you want.
- Leave the button text empty unless you have a reason to change it. Your theme's wording is what shoppers already see on the page, in their own language.
- Check it on a real phone. Open a product, scroll down, pick a different size, and tap the button. The size you picked should be the one in your cart.
Common pitfalls
- The bar never shows. Check, in order: you scrolled past your theme's Add to cart button; you're on a phone, or Devices is set to include computers; your theme doesn't have its own sticky bar switched on. In the theme editor, the block tells you if your theme's bar is keeping it off: "Your theme already has a sticky add-to-cart bar, so this one stays off."
- The theme editor says "We can't find this page's Add to cart button." The bar needs your theme's normal product form to work, and stays off without one. This can happen on product pages built with a page builder app. Use your theme's standard product template.
- I made two sticky bars. Only one sticky bar shows on a page. Nudgesmart warns you when you create a second one.
- I can't add it to a Smart spot. That's on purpose. A Smart spot could show two bars on one page, so the sticky bar can't be one of its rows.
When a shopper has a code
If your popups give shoppers a discount code, the bar can show their code and the time left on it. These settings are under When a shopper has a code:
- Don't show the shopper's code. The code shows by default. Tick this to hide it.
- Show the price with their code. Off by default. It shows an estimate, such as "≈ $45 with your code", for the option the shopper picked. It's an estimate, never a crossed-out price, because other apps' discounts can't be seen and the final price is set at checkout. It only shows for codes with no minimum spend.
- Look of the code parts. Match the popup (recommended) or Match my theme.
What to read next
How to show a low stock message on product pages
Show "Only 3 left in stock" on product pages when the option a shopper picks is running low, using your real stock levels.
How to show a row of products: suggestions, your picks or recently viewed
Add a row of products to your product, cart or home page: Shopify's suggestions, products you pick, or what a shopper recently viewed. Show it as a slider, a grid or a bundle shoppers add in one tap.