A sticky options bar stays on screen while the shopper scrolls, so the Add to Cart button is always one tap away. On a long product page with photos, a size guide and reviews, that saves the shopper a long scroll back to the top. Here is what to put in the bar, how to add one and when it does more harm than good.
Who needs a sticky bar
Sticky bars help most on long product pages: plenty of photos, a detailed description, a size chart, reviews. If your page is short enough that the Add to Cart button is almost always visible, a sticky bar only adds clutter.
They also help when most of your traffic is on phones, which is true for many Shopify stores. On a 6-inch screen the buy button scrolls out of view after a couple of swipes.
What sticky bar shows
- A summary of the selected variant, such as "Size M / Color Red".
- The current price, including any add-on fees already chosen.
- A quantity selector, if your products are often bought in multiples.
- The Add to Cart button.
Keep the full option picker out of the bar. A row of 12 color swatches does not fit in a 60-pixel strip. Tapping the variant summary should scroll the shopper back to the main picker instead.
Setup
You have three routes:
- A theme setting. Some paid themes include a sticky add-to-cart bar you can switch on in the theme editor. Check your theme's product section settings first.
- Theme code. A developer can add a bar with CSS
position: fixed(orsticky) that shows only after the shopper scrolls past the main Add to Cart button. A small script watches that button and toggles the bar. - An app. Several sticky add-to-cart apps exist. They are quick to set up but add their own script to every product page.
Dawn keeps the product information column sticky on desktop, which helps, but it does not ship with a bottom bar for mobile. Our guide to variant selector UI patterns shows how the main picker and a sticky bar can work together.
Mobile-specific
On phones, the bar usually sits at the bottom of the screen, fixed to the viewport, where the thumb already rests. Make the button at least 44 pixels tall, leave room for the phone's home indicator and keep the text short: "Add to cart, $24".
Test it on a real phone, not only in a desktop browser's mobile view. Chat widgets, cookie banners and the bar often stack on top of each other on small screens. The mobile picker itself matters just as much; see our guide to the mobile variant picker.
Best practice
Do not stack several sticky elements, such as a sticky header, a sticky variant strip at the top and a sticky Add to Cart bar at the bottom. On a phone that can cover a third of the screen. Pick one location for the buy action.
A few more rules we give merchants:
- Show the bar only after the main Add to Cart button scrolls out of view.
- Hide it again when the shopper reaches the footer, so it does not cover links.
- If no variant is selected yet, the button should scroll to the picker rather than fail with an error.
- Match the bar's button style to your main button so it is clearly the same action.
Sticky bars on personalized products
Personalized products need extra care. If a shopper has to type a name or upload a photo before buying, a sticky Add to Cart button lets them skip the field. With required fields, the bar should scroll the shopper to the first empty field and highlight it, not add an empty item to the cart.
The live preview also needs room. With Print It My Way, the preview updates on the product image as the customer types, so keep the sticky bar from covering the image while they are editing. Our mobile-first personalization guide covers layout choices for small screens.
Common mistakes
- Showing the bar above the fold, right next to the real Add to Cart button. Two identical buttons on one screen look broken.
- A bar that hides required options, so shoppers add the wrong variant or an empty personalization.
- Layout shift. A bar that pushes content when it appears hurts your Core Web Vitals. Overlay it with fixed positioning instead.
- Ignoring long option lists. If your picker has 30 values, fix that first; our post on long option lists has ideas.
Frequently asked questions
What is a Shopify sticky options bar?
It is a bar that stays visible as the shopper scrolls, showing the selected options, the price and an Add to Cart button. It saves a scroll back to the top of a long product page.
Does a sticky bar improve conversion?
It often helps on long pages and on mobile, because the buy button stays in reach. Results vary by store, so compare add-to-cart rates before and after you add one.
How do I add a sticky bar on Shopify?
Check your theme settings first, since some themes include one. Otherwise a developer can add one with a little CSS and JavaScript, or you can install a sticky add-to-cart app.
Should the sticky bar be on desktop or mobile?
Start with mobile, where the buy button scrolls out of view fastest. On desktop, a sticky product information column often does the same job.
When should the sticky bar appear?
After the shopper scrolls past the main Add to Cart button. Showing it while the main button is still visible creates a confusing duplicate.
What should the sticky bar show?
The selected variant, the price, an optional quantity selector and the Add to Cart button. Leave the full option picker out, because it will not fit.
What is the best app for a sticky bar?
There are several sticky add-to-cart apps on the Shopify App Store, and some themes include the feature. A theme setting or a small code change avoids adding another app script.
Does a sticky bar hurt Core Web Vitals?
A bar built with CSS and a small script has very little impact. Problems come from bars that shift the layout when they appear, or from heavy app scripts.
Related reading
Sources & further reading
Primary sources referenced in this article. We link to official platform documentation and standards bodies rather than secondary summaries so you can verify claims directly.
- Shopify Help Center: Product variants
- Shopify.dev: Product variant limits
- Shopify Help Center: Line item properties (customization)
Try it free on Shopify
Print It My Way's permanent Free plan includes live preview, custom options, and Cart Transform pricing.
Install Print It My Way