How to add Sticky Add to Cart
How to add Sticky Add to Cart
The Sticky Add to Cart keeps the purchase button visible while users scroll on product pages.
It reduces friction, improves mobile experience, and significantly increases conversion rate, especially on long product pages.
How Sticky Add to Cart works
Once published, the Sticky Add to Cart is:
Automatically active on all targeted products
Displayed according to the selected display condition
Fully responsive (desktop + mobile)
No App Block placement is required for Sticky Add to Cart.
Customization overview
The Sticky Add to Cart editor is split into two main areas:
Left panel
Tabs:
Content
Style
Top panel
Live preview
Toggle between desktop and mobile preview
Changes are reflected instantly in the preview.
Content tab
The Content tab controls when and where the Sticky Add to Cart appears.
Desktop configuration
You can configure:
Display on desktop devices
When to display
Always
When the user scrolls past the Add to Cart button (recommended)
Buttons
Add to cart
Pay now
Both
The recommended option is
When the user scrolls past the Add to Cart button
On desktop, the Sticky Add to Cart is displayed at the bottom right of the screen.
Display options
You can show or hide:
Product image
Brand
Product title
Price
This lets you keep the bar minimal or more informative depending on your theme.
Mobile configuration
You can configure:
Display on mobile devices
When the bar appears
Buttons behavior
Show price inside the button (mobile)
Sticky Add to Cart is especially powerful on mobile, where the main button often disappears while scrolling.
Style tab
The Style tab lets you fully customize the appearance of the Sticky Add to Cart.
You can adjust:
Buttons
Text size and weight
Border radius
Vertical padding
Background and text colors
Separate styles for:
Add to cart
Pay now
Desktop section
Background color
Border radius
Spacing (left, right, top, bottom)
Mobile section
Transparent background option
Horizontal spacing
Match the Sticky Add to Cart style with your theme for a native look.
Preview on desktop and mobile
The preview panel allows you to:
Switch between desktop and mobile
See exactly how the Sticky Add to Cart behaves
Test display conditions visually
Always check both desktop and mobile before publishing.
Publish the Sticky Add to Cart
Once ready, click Publish.
What happens after publishing
The Sticky Add to Cart becomes active
It applies to all products, depending on the display condition
No additional setup is required
Once published, nothing else needs to be done.
Display conditions explained
You can choose when the Sticky Add to Cart appears:
Always visible
The bar is shown immediatelyWhen the user scrolls past the Add to Cart button (recommended)
The bar appears only when the main button is no longer visible
Using the scroll-based option avoids duplicate buttons on screen.
Common questions
Check that:
The module is published
The display condition is met
You are on a product page
Yes. Sticky Add to Cart is compatible with all modern Shopify themes.
No. Sticky Add to Cart works globally without App Blocks.
Best practices
Use scroll-based display
Keep the bar minimal
Enable price on mobile
Test on real products before going live