How to Set Up Essential Sticky Add to Cart

The Sticky Add-to-Cart Bar

The Sticky Add-to-Cart bar (SATC) is a slim bar that stays fixed on the product page as the customer scrolls — showing the product, price, variant selector, and an Add-to-cart button — so the buy action is always within reach.

It's part of the same Essential Cart Drawer app, configured as a cart type. Where the Cart Drawer is a slide-out cart, the Sticky Add-to-Cart is a product-page bar. You enable it the same way: publish in the app and turn on the app embed in your theme (see Getting Started).


Show on desktop / mobile

Sticky Add-to-Cart settings — visibility, button action, position
Sticky Add-to-Cart settings — visibility, button action, position

In the Settings for the Sticky bar, each device is controlled separately:

  • Show on desktop — toggle the bar on for desktop.
  • Show on mobile — toggle the bar on for mobile.
  • Hide for out-of-stock products — hides the bar when the product is unavailable.

Desktop and mobile have their own preview and positioning, so you can run the bar on just one device if you prefer.


When the bar appears (visibility)

Sticky cart visibility controls when the bar shows as the customer scrolls:

  • Always — visible the whole time.
  • When add-to-cart is hidden — appears once the theme's own Add-to-cart button scrolls out of view.
  • When add-to-cart is not on screen — similar, based on the button leaving the viewport.

If the bar disappears unexpectedly on mobile, it's usually this setting plus device scroll behaviour — choose Always to keep it pinned.


What the button does

Button action sets what happens when the customer taps the bar's button:

  • Go to cart
  • Go to checkout
  • Stay on page — adds the item without navigating away.
  • Scroll to add-to-cart — jumps to the product's main buy button.

Size and position

  • Width — Full-width or Condensed. With Condensed, set a Max width and a Horizontal position (Left / Right).
  • Position — Top or Bottom of the screen.
  • Offsets — fine-tune the Top / Bottom / Left / Right spacing (in px), per device.

Removing the "Get it while it lasts" text

That line is the Sticky bar's announcement / timer message, not a fixed part of the bar.

  1. Open the Timer section while the Sticky Add-to-Cart is selected.
  2. Switch between Desktop and Mobile previews — the message is set per device, so you may need to clear or disable it on both.
  3. Clear the message text (or turn the announcement off) and save.

If it keeps reappearing on mobile after removing it on desktop, you've only cleared one device — repeat on the mobile preview.


Timer / countdown

The Sticky bar's announcement can include a countdown using the {timer}  variable. Under timer settings, choose the timer type (no timer / to a date / fixed minutes) and the end behaviour (hide, repeat, show a message, or clear the cart).


Styling

Switch to the Design sub-tab to set the bar's colours, button style, and text colour. If your theme's CSS overrides a colour (e.g. the product name stays invisible), custom CSS with a more specific selector will fix it — see Styling the cart drawer article or contact our 24 support for help.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us