Custom cart trigger

Updated on 18th June 2022 in Existing Websites

Out of the box, Shoprocket will load a ready to use basket / shopping cart into your page, along with a button (or trigger) to open the cart.

You may wish to add your own cart icon or button into your website header or navigation, which can be easily done by adding a javascript onclick event.

Once you've added your own button, link or icon into your page, bind a javascript click event to it, which will fire the "toggle cart" function on click:

<button onclick="Shoprocket.toggleCart()">toggle cart</button>

The above example will create a basic button element, with the onlick event of "Shoprocket.toggleCart()" - when a user clicks this button, the cart will open (or close if it's already open)

Once you have your own cart trigger working, you can hide the default Shoprocket trigger with some custom CSS like this:

<style> body .sr-cart-trigger { display: none; } </style>

You can try this live demo here:

Can’t find what you’re looking for?

Chat with us πŸ‘‹

or contact us on [email protected]


as featured in