Sticky Add to Cart

Keep the Add to Cart button visible as customers scroll your product page.

Is this for me?

If your product pages are long — lots of images, long descriptions, reviews, FAQs — your Add to Cart button scrolls out of view fast, especially on mobile. The Sticky Add to Cart app pins a slim bar to the top or bottom of the screen so the button stays one tap away the whole time a shopper is reading. It's one of the easiest wins for mobile conversion.

Setup, Step by Step

1. Open the Vitals dashboard and find the Sticky Add to Cart app.
2. Turn it on.
3. Decide where it shows: Show on desktop devices, Show on mobile devices, or both.
4. Pick the position for each device — Top or Bottom — using Desktop location and Mobile location. Bottom is the safer mobile choice (closer to the thumb).
5. Set When to show. Most stores get the cleanest result with When user scrolls past the Add to Cart button — the bar only appears once the real button leaves the screen.
6. Choose what to show in the bar: variant selector, quantity selector, product title, price, compare-at price, review stars. Desktop and mobile have their own toggles, so you can keep mobile minimal.
7. Pick a button style. Auto-detect copies your theme's Add to Cart button so everything matches. Custom lets you set your own colors.
8. (Optional) Turn on Show on homepage if your homepage has a featured product section you want to push.
9. Save and preview on your storefront — test both desktop and a real phone.

Key Features

Persistent Add to Cart bar

A slim bar pins to the top or bottom of the screen so the button stays accessible no matter how far a shopper scrolls. Desktop and mobile positions are set separately.

Variant selector

Shoppers can switch variants from the bar without scrolling back up. Unavailable variants are visually marked. Picking a variant in the bar also updates the main product page (images, price, availability) and vice versa.

When to use this: Helpful for stores with size, color, or flavor options. Skip it on mobile if your product only has one variant — it just takes up space.

Quantity selector

Lets shoppers bump the quantity from the bar. Off by default.

When to use this: Worth turning on for consumables, bulk goods, or anything people typically buy more than one of. Leave off for single-purchase items — fewer fields means faster checkout.

Smart display triggers

When to show controls when the bar appears:

• Always on display — visible from the moment the page loads
• When user starts scrolling — appears on the first scroll
• When user scrolls past the Add to Cart button — only appears after the real button leaves the screen

When to use this: "Scrolls past" feels the most natural — the bar shows up exactly when shoppers lose access to the main button. "Always on" can feel aggressive, but is useful on very long pages.

Product information display

The bar can show a thumbnail, product title, current price, and compare-at price for sale items. Each element has its own on/off toggle, and desktop and mobile are controlled separately.

Product Reviews integration

If you have the Product Reviews app active, the bar can show star rating and review count. Strong social proof at the moment of decision.

Button styling

Add to Cart button style has two modes:

• Auto-detect copies your theme's existing Add to Cart button so everything looks consistent
• Custom uses the Button background and Button text colors you pick

You can also choose Small or Large button size and toggle Show button shadow.

Clone ATC button content and style

When enabled, the bar mirrors both the text and the visual style of your theme's main Add to Cart button. If your theme dynamically swaps the button text — "Pre-order," "Sold Out," "Notify Me" — the sticky bar mirrors that too.

Custom button text

Turn on Overwrite Add to Cart button text and type whatever you want in Add to Cart button text (e.g., "Buy Now," "Get Yours"). Supports translations for multilingual stores.

Animated Add to Cart style

Adds an attention-grabbing animation to the bar's button via the Animated Add to Cart app.

When to use this: Effective on stores where the bar is competing with a lot of visual noise. On clean minimal stores it can feel out of place — leave it off and let the design breathe.

Mobile styles

The mobile Style setting has two layouts:

• Complete — shows every enabled element (image, title, price, variant, quantity, button)
• Minimal — Add to Cart button only

When to use this: Minimal is best when screen real estate is tight or your product page already shows the key details up top. Complete is better if shoppers need to pick a variant from the bar.

Homepage support

Turn on Show on homepage to display the bar on your homepage when a featured product section is present. Shoppers can add the featured product without leaving the homepage.

Scroll behavior control

Stop page scroll keeps the page from auto-scrolling to the product image when a shopper picks a different variant from the bar. Useful so the shopper doesn't lose their place.

Tips for Getting the Most Out of It

• Lead with mobile. Most stores see the biggest sticky-bar lift on mobile. Test the experience on a real phone, not just a desktop browser at narrow width.
• Match your brand. Use Auto-detect or set Custom colors that match your existing button. A bar that looks bolted-on hurts trust.
• Don't crowd it. On mobile especially, enable only what shoppers actually need. A title, price, and button is often enough — adding image, variant, and quantity can make the bar feel cluttered.
• Use "scrolls past" as your default trigger. It only appears when the real button is offscreen, which feels less pushy than "always on."
• Test the homepage option carefully. Only turn on Show on homepage if you have a clear hero product. Otherwise it can be confusing for shoppers browsing categories.
• Keep button text honest. "Add to Cart" or "Buy Now" beats clever copy. Shoppers scan, they don't read.

Troubleshooting

The sticky bar is not appearing

Confirm the app is enabled and that Show on desktop devices or Show on mobile devices is on for the device you're testing. If When to show is set to When user scrolls past the Add to Cart button, you need to scroll past the main button before the bar shows up.

The button looks different from my theme's button

If Add to Cart button style is set to Custom, the bar uses your custom colors instead of the theme's styling. Switch to Auto-detect to match the theme.

Variant selection in the sticky bar doesn't update the page

The bar syncs with the main product page through standard Shopify variant handling. Heavily customized themes may need extra configuration — contact support with your store URL.

The sticky bar overlaps a chat widget or other fixed element

If the bar is at the bottom, switch it to the top, or contact support to adjust spacing.

Settings Reference

General

Desktop

Mobile

Button & appearance

Additional visual properties — border radius, border color, discounted price color, container height, maximum width, review stars color — can be tuned through the appearance editor.

Frequently Asked Questions

What pages does the bar appear on?

Product pages by default. Turn on Show on homepage to also display it on your homepage when a featured product is present.

Can I show different settings on mobile and desktop?

Yes. Nearly every setting has separate desktop and mobile toggles — position, display trigger, which elements show, button size, the lot.

Does the bar work with subscriptions?

Yes. If your store uses a subscription app like ReCharge or Appstle and a selling plan is selected on the product page, the bar respects that selection when adding to cart.

Can I customize the Add to Cart button text?

Yes. Turn on Overwrite Add to Cart button text and enter your text in Add to Cart button text. Supports translations. If left blank, it falls back to your theme's Add to Cart button text.

What is the "Minimal" mobile style?

A compact layout that shows only the Add to Cart button, hiding the variant and quantity selectors. Good for keeping the bar unobtrusive on small screens.

Does the bar update when a shopper picks a different variant?

Yes — both ways. Picking a variant in the bar updates the main page (images, price, availability), and picking one on the main page updates the bar.

What happens when a variant is out of stock?

The Add to Cart button becomes disabled and the variant dropdown visually marks unavailable variants.

Does the bar work with the Upsell Builder's ATC popup?

Yes. If the Upsell Builder ATC popup is configured, clicking the sticky bar's button triggers the popup instead of adding directly to cart.

Will "Auto-detect" button styling work with my theme?

It works with most Shopify themes by copying the existing Add to Cart button. If your theme uses highly custom or dynamically updating button styling, switching to Custom and setting the colors manually usually gives a cleaner result.

What is "Stop page scroll" for?

Some themes auto-scroll to the product image when a shopper picks a new variant. Turning this on keeps shoppers at their current scroll position when they change variants from the bar, so they don't lose their place.