How to add Sticky Add to Cart

ConvertX Sticky Add to Cart keeps a purchase bar visible while shoppers scroll on product pages. It helps reduce friction, especially on mobile or on long product pages where the native Add to Cart button quickly leaves the viewport.

Sticky Add to Cart uses the ConvertX App Embed. It does not require a product page App Block.

How Sticky Add to Cart works

Once enabled and published, Sticky Add to Cart can:

  • Appear on product pages when the shopper scrolls

  • Stay visible on desktop, mobile, or both

  • Show the Add to Cart button, the Buy Now button, or both

  • Display product details such as image, title, brand, or price

Before you start

Make sure that:

  • The ConvertX App Embed is enabled

  • The feature is published in ConvertX

  • You are testing on a product page

Sticky Add to Cart editor overview

The editor is split into:

  • A Content tab for visibility and display behavior

  • A Style tab for button and layout customization

  • A live preview with desktop and mobile modes

Key settings include:

  • Desktop and mobile activation

  • Display timing

  • Which buttons to show

  • Product detail visibility

  • Button colors, text, padding, and border radius

  • Bar background and spacing

Recommended setup

The most common setup is:

  • Enable it on mobile

  • Show it when the shopper scrolls past the native Add to Cart button

  • Keep the layout compact

  • Show the price when it helps the product page stay clear

The scroll-based option is usually better than showing the sticky bar immediately. It avoids duplicate purchase buttons on screen.

Publish Sticky Add to Cart

Sticky Add to Cart does not need a dedicated App Block. After publishing:

  • The module becomes available through the App Embed

  • It can load on product pages that match its settings

  • You only need to verify the storefront behavior in the active theme

Troubleshooting

Check that the ConvertX App Embed is enabled, the module is published, and you are on a product page that matches the current device settings.

Review the mobile visibility settings and test on the real storefront rather than only the app preview.

Change the display mode to show it only after the native Add to Cart button leaves the viewport.

Best practices

  • Use scroll-based visibility

  • Keep the bar visually lighter than the main product area

  • Test both desktop and mobile before publishing

  • Match button styling to the theme for a more native feel