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
- Open the Vitals dashboard and find the Sticky Add to Cart app.
- Turn it on.
- Decide where it shows: Show on desktop devices, Show on mobile devices, or both.
- 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).
- 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.
- 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.
- Pick a button style. Auto-detect copies your theme's Add to Cart button so everything matches. Custom lets you set your own colors.
- (Optional) Turn on Show on homepage if your homepage has a featured product section you want to push.
- 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
| Setting | Type | Description |
|---|---|---|
| Show on desktop devices | On/Off toggle | Show the bar on desktop. Default: on. |
| Show on mobile devices | On/Off toggle | Show the bar on mobile. Default: on. |
| Show on homepage | On/Off toggle | Show the bar on the homepage for the featured product. Default: off. |
| Stop page scroll | On/Off toggle | Keep shoppers at their current scroll position when they pick a variant from the bar. Default: off. |
Desktop
| Setting | Type | Description |
|---|---|---|
| Desktop location | Dropdown | Top or Bottom. Default: Bottom. |
| When to show | Dropdown | Always on display / When user starts scrolling / When user scrolls past the Add to Cart button. Default: When user starts scrolling. |
| Show variant selector | On/Off toggle | Variant dropdown in the bar. Default: on. |
| Show quantity selector | On/Off toggle | Quantity input in the bar. Default: off. |
| Show product title | On/Off toggle | Default: on. |
| Show compare-at price | On/Off toggle | Show original price next to sale price. Default: on. |
| Show Product Reviews stars | On/Off toggle | Default: on. |
| Show product reviews count | On/Off toggle | Default: off. |
| Button size | Dropdown | Small or Large. Default: Small. |
Mobile
| Setting | Type | Description |
|---|---|---|
| Mobile location | Dropdown | Top or Bottom. Default: Bottom. |
| When to show | Dropdown | Always on display / When user starts scrolling / When user scrolls past the Add to Cart button. Default: When user starts scrolling. |
| Style | Dropdown | Complete (full layout) or Minimal (button only). Default: Complete. |
| Show variant selector | On/Off toggle | Default: on. |
| Show quantity selector | On/Off toggle | Default: off. |
| Show product image and title | On/Off toggle | Default: off. |
| Show price | On/Off toggle | Default: off. |
| Show compare-at price | On/Off toggle | Default: off. |
| Show product reviews stars | On/Off toggle | Visible only if Product Reviews app is active. Default: off. |
| Show product reviews count | On/Off toggle | Default: off. |
Button & appearance
| Setting | Type | Description |
|---|---|---|
| Add to Cart button style | Dropdown | Auto-detect (copies theme button) or Custom (use colors below). Default: Custom. |
| Button background | Color picker | Applies when style is Custom. Default: #222222. |
| Button text | Color picker | Applies when style is Custom. Default: #ffffff. |
| Background | Color picker | Bar background color. Default: #ffffff. |
| Text | Color picker | Color of text in the bar. Default: #2e2e2e. |
| Show button shadow | On/Off toggle | Default: on. |
| Apply Animated Add to Cart style | On/Off toggle | Animate the button. Default: off. |
| Clone ATC button content and style | On/Off toggle | Mirror the text and visual style of your theme's main Add to Cart button. Default: on. |
| Overwrite Add to Cart button text | On/Off toggle | Use custom text instead of the cloned text. Default: off. |
| Add to Cart button text | Text field | Custom button text. Supports translations. Default: blank. |
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.