We call Shoprocket "headless commerce" because we provide you with the building blocks required to integrate a complete shopping experience, whilst giving you the freedom to use your own layout, templates, themes and style.
There are a few primary elements which can be quickly styled to instantly make Shoprocket feel more like your own. The below table lists the CSS class names, descriptions and the current CSS which we inject into your site:
**Element name** **Description**
#sr-basket-widget This is your basket widget. By default, it appears in the top right of your website.
.sr-basket-widget-inner The text within the basket widget
.sr-confirm-amount The basket total amount, as seen in the basket widget
.sr-no-style You can apply this class to most Shoprocket elements to disable the default Shoprocket styling.
.sr-modal The parent class for all pop up modals
.sr-modal-header The header section of the modals
.sr-primary-background The background of the primary modal elements (header, buttons)
.sr-seondary-font The primary and secondary text used in modals (close button, plus and minus icons, delete icon, product name, links, etc.)
.sr-close The close icon in the modal header
.sr-modal-body The main body of the modals (between the header and footer)
.sr-items-table-holder The table of products in your basket
.sr-name-label Name label in "add to cart" modal
.sr-field-label All field labels
.sr-field-value Values in modal fields (E.G. - the product name on "add to cart")
.sr-price-label Price field label on "add to cart" modal
#sr-cart-modal-productprice Product price in add to cart modal
#sr-quantity-wrapper Div container for the quantity dropdown in add to cart modal
.sr-quantity-label Label for quantity dropdown field
.selectpicker All dropdown fields in modals
.sr-name-column, The table column headers in the basket modal
#sr-cartitems . The items in your basket, seen in basket modal
.sr-quantity-field Quantity of items in your cart, seen in basket modal
.sr-price-column Product price, seen in basket modal
#sr-cart-subtotal . Basket subtotal, in basket modal
.sr-optionlink Link for "Any special requirements?" in basket modal (also .sr-seondary-font)
.sr-voucherlink Link for "Apply voucher code" in basket modal (also .sr-seondary-font)
#sr-cart-grandtotal The grand total, in basket modal
This is an ever evolving list that is updated regularly.
Shoprocket is so customisable that the options are close to unlimited.
Here are just four different modals styled by Shoprocket users.
All styled using CSS.
**Want to style your own basket 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>