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: 

Was this article helpful?
Thank you!