Return to site

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)
All Posts

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!