How to Add a Sticky Add-to-Cart Bar

A sticky add-to-cart bar is a slim bar, usually pinned to the bottom of the screen, that shows the product name, price, and an add-to-cart button once a shopper has scrolled past the main buy box. On Shopify you can get one in three ways: turn on a built-in setting if your theme already ships the feature, add it through a small, well-scoped snippet if it does not, or install a dedicated app if you would rather not touch code. This guide walks through all three, plus the mobile-specific details that make or break whether the bar actually helps conversion.

Most of the value of a sticky add-to-cart bar shows up on mobile, where the buy box scrolls out of view within a second or two of a shopper reading the description, specs, or reviews further down the page. Without it, a shopper who decides to buy after reading a review has to scroll all the way back up to find the button. A sticky bar removes that friction entirely, at the cost of a small amount of permanent screen real estate. Getting the tradeoff right is mostly about restraint: show only what is needed, keep it visually quiet until it is needed, and make sure it never covers something more important, like a size selector or a cookie banner.

Step 1: Check Whether Your Theme Already Has One

Before writing or installing anything, check the theme editor. In Shopify admin, go to Online Store > Themes > Customize, open a product page, and look through the sections list on the left for something labeled Sticky Add to Cart, Sticky Buy Bar, or similar. Many modern themes ship this as a toggle-able section or a setting inside the product template section, since it has become a standard expectation rather than a nice-to-have. If you see it, turn it on, save, and preview on an actual phone (or the theme editor's mobile preview) before moving to the next step — you may be done already.

This is one of the reasons theme choice matters more than it looks like it should. Our Optics, Wosa, and Electronix Shopify themes all ship product templates built with this kind of mobile buy-box behavior in mind from the start, which means a sticky bar (or an equivalent persistent buy control) is either already present or a straightforward setting rather than a custom build. If you are choosing a new theme and this feature matters to you, it is worth checking during evaluation rather than assuming every theme in a category handles it the same way — browse the full Shopify themes catalog and check each candidate's product page behavior on a real phone before deciding.

Step 2: If Your Theme Does Not Have One, Add It With a Section

If there is no built-in option, the cleanest fix is a small custom section rather than a page-wide script injected into theme.liquid. Sections are scoped, easy to remove, and show up properly in the theme editor for future edits — which matters when you hand the store off to someone else later.

1. In Shopify admin, go to Online Store > Themes, click the ... menu next to your live theme, and choose Edit code (this opens the theme's code editor; work on a duplicate theme first if you are not comfortable editing live).
2. Under the Sections folder, create a new section file, for example sticky-add-to-cart.liquid.
3. Build the markup around three pieces: a short product title or thumbnail, the price (respecting Shopify's money format and any compare-at-price styling your theme already uses), and a button that submits the theme's existing product form — reuse the form ID your theme's main add-to-cart button already targets rather than building a second, separate form.
4. Position the section fixed to the bottom of the viewport with CSS, hidden by default, and toggle its visibility with a small script that listens for scroll position relative to the main buy box (show the bar once the buy box has scrolled out of view, hide it again near the very bottom of the page so it does not overlap the footer).
5. Add the section to the product template through the theme editor, so merchants without coding help can turn it on or off per template without touching code again.

The scroll-based show/hide logic is the part most worth getting right. A bar that is visible from the moment the page loads adds clutter without adding value, since the real buy box is already on screen. A bar that only appears after the shopper has scrolled a meaningful distance past the buy box, and disappears again near the footer, reads as helpful rather than intrusive.

Step 3: Handle Variants Correctly

This is where most homemade sticky bars break. If your product has variants — size, color, lens type, storage capacity, whatever applies to your catalog — the sticky bar's add-to-cart button needs to submit whatever variant is currently selected in the main buy box, not a hardcoded default variant ID. The simplest reliable approach is to have the sticky bar's button trigger the same form the main buy box uses (via matching form ID or a shared JavaScript variant listener) rather than maintaining a second, independent copy of the variant logic. Two separate forms that can drift out of sync is a common source of "added the wrong size to cart" support tickets.

If a product requires a selection before it can be added to cart — a size that has not been chosen yet, for example — the sticky bar should reflect that too: disable its button, or show a short prompt like Select a size, rather than letting the shopper tap add-to-cart and land on a confusing error. Mirroring the main buy box's validation state, not just its submit action, is what makes the sticky bar feel like a natural extension of the page instead of a separate, less reliable path to checkout.

Step 4: Get the Mobile Details Right

A sticky bar lives permanently at the bottom of the screen on mobile, which is valuable real estate shared with the browser's own UI, so a few details matter more here than anywhere else on the page.

• Respect the safe area on notched phones. Add bottom padding using the CSS env(safe-area-inset-bottom) value so the bar does not sit under a phone's home-indicator gesture bar.
• Keep the tap target large enough. The add-to-cart button inside the bar should meet a comfortable minimum touch-target size — do not shrink it to fit more information into the bar.
• Do not stack it with other fixed elements. Sticky headers, cookie-consent banners, and back-to-top buttons can all collide with a sticky add-to-cart bar if none of them account for the others. Test the full page with everything visible at once, not just the sticky bar in isolation.
• Keep the content minimal. Product name (or a small thumbnail), price, and the button is usually enough. Variant pickers rarely belong in the sticky bar itself — they add height and complexity to a component that is supposed to stay light.
• Test with the on-screen keyboard open, since a shopper who taps into a quantity field or an app's prescription-upload field can end up with the sticky bar awkwardly repositioned above the keyboard on some devices.

Step 5: Consider an App If You Would Rather Not Touch Code

Several Shopify apps in the App Store add a sticky add-to-cart bar without any code changes, typically through a theme app extension. This is a reasonable path if you do not have development help and your theme lacks the setting. The tradeoff is a small amount of added script weight and, on some apps, a recurring subscription cost — weigh that against how often you would otherwise be paying a developer for small tweaks. If you do go this route, still test variant handling and the mobile safe-area behavior described above, since not every app handles both correctly out of the box.

Where This Fits Into a Broader Mobile Checkout Strategy

A sticky add-to-cart bar solves one specific problem — keeping the buy action reachable — but it works best alongside the rest of a mobile-friendly product page: fast-loading images, an option picker that stays legible with several variant groups, and clear shipping or return information near the buy box so a shopper does not need to leave the page to find it. If you are evaluating themes with this in mind, our Groxery theme and other options across the Shopify themes catalog are all built around mobile-first product templates, so a persistent buy control fits naturally into the layout rather than looking like an afterthought bolted onto a desktop-first design.

Frequently Asked Questions

Will a sticky add-to-cart bar slow down my product page?

Not meaningfully if it is built as a lightweight section reusing your existing product form, rather than loading a large third-party script. Keep the markup minimal and avoid duplicating variant logic, and the added weight should be negligible.

Should the sticky bar show on desktop too, or just mobile?

It is most valuable on mobile, where the buy box scrolls out of view quickly. Many stores show it on both, but it is entirely reasonable to hide it above a certain breakpoint if your desktop layout already keeps the buy box visible or easily reachable via a sidebar.

Can I add a sticky add-to-cart bar without editing theme code?

Yes, either by checking if your current theme already has the setting built in, or by installing a Shopify App Store app that adds one through a theme app extension. Editing the theme directly gives you the most control over how it looks and behaves, but is not required.

Does this work with products that have many variant options, like lens type and coating?

Yes, as long as the sticky bar's button submits the same form as the main buy box rather than maintaining its own separate variant state. For catalogs with several option groups, it is worth disabling the sticky button (or prompting the shopper to finish selecting) until all required options are chosen, the same way the main add-to-cart button should behave.