Shoprocket

The Shoprocket Support Hub

Welcome to the Shoprocket hub. You'll find comprehensive guides and documentation to help you start working with Shoprocket as quickly as possible, as well as support if you get stuck. Let's jump right in!

FAQ Documentation Developer Chat System Health

Add a Basket Widget

If You Used the Install Code...

There is no need to add a basket widget. Your basket widget will already have been added to your site.

Shoprocket offers a pre-styled widget which can be easily dropped into your site with the following code:

<!— Shoprocket Basket Widget —>
<div id="sr-basket-widget" class="sr-right"><span class="sr-confirm-amount"></span></div>

Insert the above code anywhere sensible between the body tags of your web page, preferably directly after the line of code you inserted in the previous step.

While the Shoprocket widget is packaged with a default style, the layout is always fully customisable and can be freely overridden. Once you have added it, it should look similar to the demo site below:

Pro Tip

By default, we position the basket widget in the top right corner of your page, If you'd rather position and style the basket widget yourself, you can simply add the class "sr-no-style", and then apply your own custom CSS as required.

The code for this page can be found here and you can view the page in a new tab here.

Want to style your own cart widget?

If you'd rather style your own basket widget, and simply display the basket total as plain text, simply add the class "sr-no-style" to the cart HTML snippet, like so:

<!— Shoprocket Basket Widget —>
<div id="sr-basket-widget" class="sr-no-style"><span class="sr-confirm-amount"></span></div>

Add a Basket Widget