CSS Customization

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:
 
  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 appearance by defining your own CSS attributes for each class. Names are generally self-explanatory, but are explained in more detail at the bottom of this page: 
    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-box-title
    • ls-link
    • ls-image
    • ls-title
    • ls-original-price
    • ls-price
    • ls-sale-sign
    • ‚Äč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. Move the liquid {% comment %} from immediately before <style> and {% endcomment %} from immediately after </style> as seen in the example below.

    With the class that you have not customized, copy and paste them within the {% comment %} and {% endcomment %} tags so that you can edit them at a later date if you so chose.
     

         <style>
                .ls-price {
                       font-size: 12px; 
               }

         {% comment %} 
                .ls-title {
                 }
               .ls-box-title {
                }
         {% endcomment %}
         </style>
         
     
  6. Customize the CSS for each of the classes that you would like.     

NOTE: If the color (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.

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 ...?

Did you find this article helpful?