🔒 These instructions is are for Legacy, Premium, Enterprise, Essentials and Max plans.
Appearance of LimeSpot 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 your recommendation boxes in greater 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 below.
Key CSS Classes for customization:
General recommendation boxes:
.ls-box-title: Box title..ls-link: Anchor element linking to the product page..ls-image: Product image..ls-title: Product title..ls-vendor: Product vendor name..ls-price: Product price..ls-original-price: Original price (if available)..ls-sale-price: Discounted price..ls-sale-sign: Sale indicator..ls-add-to-cart: Add to cart button..ls-dropdown: Dropdown elements.
Upsell recommendation boxes:
.ls-message: Upsell message..ls-link: Anchor element linking to the product page..ls-title: Product title..ls-price: Product price.
Additional customization tips
Displaying vendor names
To show vendor names in recommendation boxes, add the following CSS:
.ls-vendor { display: block; }This will make the vendor names visible in the recommendation boxes. See this article.
Adjusting box width
If your store's content doesn't span the full width of the page, the recommendation boxes might do so. To align them with your content width, add appropriate CSS classes like container, wrapper, page-width, or row to the recommendation boxes. This ensures they match your store's layout. See this article.
Conclusion
By utilizing these CSS classes and customization options, you can tailor LimeSpot's recommendation boxes to seamlessly integrate with your store's design and enhance the overall user experience.
🤔 Questions? Need help? Contact us via the in-app chat or email.