Sticky Add To Cart

The Sticky Add to Cart extension in EComposer is a conversion-boosting bar that stays fixed to the bottom of the screen as a customer scrolls down a product page.

It keeps the product image, price, variants, and the “Add to Cart” button instantly accessible at all times. This eliminates the need for shoppers to scroll all the way back to the top to buy, reducing cart abandonment and making the checkout process faster and easier—especially on mobile devices.

The video below is on how the extension works on a Product detail page:

Note: This extension requires an EComposer Product Template and an Add to Cart button on the page to function. It is not compatible with default Shopify theme templates.

1. How to install the Sticky Add To Cart extension?

Step 1: From your EComposer dashboard, go to CRO Extensions from the left sidebar menu.
Step 2: Search for the Sticky Add To Cart extension.
Step 3: Click Details, then click the Install extension button on the extension popup to install the extension on your store.

Note: When you finish installing the extension, it will automatically show on the live Product detail page.

2. Customize

2.1. Sticky Add To Cart extension settings

• General
  • Enable sticky cart: To let it be shown or not, you can turn it on without uninstalling the extension.
  • Use max width in app setting: It will be contained within a set maximum width (usually matching the standard content width of your store, like 1200px or 1400px).
  • Disable on Mobile: Only for Desktop, but not showing on Mobile.

• The Product Name, Price, Variant, Quantity, and Cart Button settings primarily allow you to customize individual styles, including Color, Typography, Border, Spacing, and Dimensions (Width/Height) for the Product title, price, quantity, and Add to cart button on the Sticky Add to cart.

Note: Kindly click the “Save” button below after making changes to the Sticky add to cart extension settings.

• Regarding the Add to Cart button in the Sticky Add to Cart extension, its redirect behavior is based entirely on the settings you have configured for the main Add to Cart element on your product page.
  
  Similarly, the Pre-order or Sold Out text will also automatically follow the settings of that same main Add to Cart element.

2.2. Translate the Add to cart button of the Sticky Add to Cart extension

From your translation app (like the Translate & Adapt app shown in the screenshot), navigate to Store Metadata on the left-hand menu. From there, locate the ecomposer.sticky_cart to begin translating your “Add to Cart” button content in order.