Appearance of Recommendation Boxes can be customized to some extent via the LimeSpot admin panel. See this article for instructions on changing basic appearance properties.
If you wish to customize our Recommendation Boxes in more depth, you may do so by using custom CSS. CSS is used in HTML pages to change the way elements look, like their font, sizes, and colors. If you're not already familiar with CSS you may want to read about it here.
To alter the CSS for LimeSpot components follow these steps:
Go to your LimeSpot Personalizer admin panel > Conversion > Website Personalization > Designer
Click on Edit Code icon on the top right
The Code Editor page is where you can add some CSS codes and JavaScript for our components only. You need to override the default appearance by defining your own CSS attributes for each class. CSS names are generally self-explanatory, but are explained in more detail at the bottom of this page.
Customize the CSS for each of the classes that you would like.
.ls-box-title
.ls-link
.ls-image
.ls-title
.ls-original-price
.ls-sale-price
.ls-price
.ls-sale-sign
.ls-add-to-cart
.ls-dropdown
LimeSpot Tip: Know what all these classes represent so that you know where to insert your code.
The Upsell Recommendation Box has a different format in terms of design and underlying HTML/CSS attributes. There are some attributes that are the same as the recommendation boxes. Make sure that the applied changes to those attributes do not affect the Upsell Recommendation Box design and vice versa. Here are the classes for the Upsell Recommendation Box: .ls-message, .ls-link, .ls-title, .ls-price
NOTE: If the colour (etc.) of your discounted product's price differs from your product's regular price format, you can add: .ls-sale-price as a class and this will adjust the CSS of the discounted price.