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 > Personalizer > Set up > Customize
- Under Global Settings > Code > Edit Code
- Customize the CSS for each of the classes that you would like.
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.