Volver al sitio

How do I style different 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)