Customizing Recommendation Boxes' CSS

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 need to customize your 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:

  1. Go to your Shopify Admin panel > Online Store > Themes.
  2. Click the "..." button (in the top middle-right) > Edit HTML/CSS.

  3. Find and select Snippets / limespot-custom-css.liquid. The file should look like this:

  4. There are CSS classes for the recommendation boxes' internal element appearances. You need to override the default apperance by defining your own CSS attributes for each class. Names are self-explanatory, but explained in more detail at the bottom of this page:
    • ls-box-title
    • ls-link
    • ls-image
    • ls-title
    • ls-original-price
    • ls-price
    • ls-sale-sign
    NOTE: 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-image
    • ls-title
    • ls-price
  5. We have this whole section commented by default to minimize the size of your page contents while giving you the pattern for customization. Remove the liquid {% comment %} from immediately before <style> and {% endcomment %} from immediately after </style>.
  6. Customize the CSS for each of the classes you need.
LimeSpot Tip: Know what all these classes represent so that you know where to insert your code.
.ls-box-title Box Title (e.g. Related Items)
.ls-title Product Title (e.g. Silver necklace)
.ls-price Product Price (e.g. $19.99 CAD)
.ls-original-price Original Product Price (e.g. $25.00 CAD)
.ls-sale-sign Sale Sign (e.g. Sale)
.ls-message Upsell Message (e.g. Would you like to add ... for ...?)

Next Step: Creating Custom Recommendation Boxes
Previous Step: Store Optimization

Did you find this article helpful?