Using Sticky Add to Cart with custom Javascript

You can reach a high level of customization of the Sticky ATC widget using the advanced tab > Custom Javascript.

Changing the Sticky ATC placement in relation to other page elements

In case you would like to place the widget underneath or above other elements on your shop such as popups you can use this snippet:

if (window.jQuery) { 
$('#cb-sticky').css('z-index',8999); 
}

A higher z-index value means that the element will be placed on top of other elements with a lower z-index value.

As default the Sticky ATC is placed on top of most of your existing pages elements.

Triggering an action following an add to cart/Buy now button click

The Sticky ATC object exposes the setOnAddCart callback that allows you to add a custom function that will be triggered when users perform an add to cart action. You can use a custom callback function to fire an event to one of your tracking pixels or to redirect the user to a different page as in the following example:

window.conversionBearStickyBar.setOnAddCart(function(){
window.location.href = 'https://www.conversionbear.com';
});

Here's another example:

conversionBearStickyBar.setOnAddCart(function(){
if(window.RevyUpsell) { 
window.RevyUpsell.onAdd(); 
}})

This code snippet will trigger the Revy upsell app.

Controlling when the widget is displayed

You can programatically control the Sticky ATC appearance on your page using the following methods:

conversionBearStickyBar.hideBar() // hide the widget

conversionBearStickyBar.showBar() // show the widget

Using these methods you can hide the widget on specific pages or show the widget only after X seconds after the buyer entered the page.

Need help with customizing the Sticky ATC to your shop? We're here for you.

Send us a messages and our team will be more than happy to fit the app to your needs.