Custom CSS for multiple widgets on the same page


Each of our widgets has its own "purpose" CSS class, so that you can add Custom CSS that applies only to that class. This allows you to have, say, Recently Viewed and Product recommendations on the same page, but with different styles applied.

For example, this style would only apply to the Cart widget:

.betterrecs-purpose-cart .betterrecs-heading {
    font-size: 32px;

The classes for the different widgets are as follows:

  • Product: .betterrecs-purpose-product
  • Cart: .betterrecs-purpose-cart
  • Recently Viewed: .betterrecs-purpose-recent
  • Index: .betterrecs-purpose-index
  • Ajax cart: .betterrecs-purpose-ajax_cart (note the underscore, not hyphen, between ajax and cart)
Find us on Shopify