LimeSpot allows you to fully customize the recommendation boxes by applying your own design and scrolling style (e.g. left/right, top/bottom, animations). 

You can update the recommendation boxes' markup by using a single line of JavaScript code. But before you begin, you need to know how the recommendation boxes are rendered on the page:

When the page is loaded, the LimeSpot Storefront Agent (JavaScript) is automatically initialized according to the setup defined within the Box Designer. At this point, the agent adds <limespot-box /> container elements to the page according to the placement setup from the box designer, and adds the recommendation box markup inside the container, to be completed and rendered using the actual recommendations at the next step.

The products' data for each recommendation box is now fetched from the LimeSpot API via XHR, and then the agent starts filling up each recommendation box based on a combination of CSS classes to detect and render the data required for the recommendations.

Inside the recommendation box markup, there must be a <ul class="ls-ul"> element with a single <li> that acts as a template for each product that shows up on the box. The agent picks the first "<li>" element inside the <ul>, and uses it as a template to clone for each product that needs to be displayed in the box. Appropriate product information is applied to the <li>'s children.

The following CSS class names are used to detect the elements from the markup, and render the appropriate values:

  • ls-box-title: the box title is applied as InnerHTML
  • ls-link: an anchor (<a>) element to navigate to the product page —> the href is applied to this element
  • ls-title: product title is applied as InnerHTML
  • ls-price: product price is applied as InnerHTML
  • ls-original-price: product original price (if available) is applied as InnerHTML. The element is automatically removed if there is no original price for the product. 
  • ls-image: product image URL is applied as a CSS background-image
  • ls-sale-sign-wrap: acts as a container for the Sale Sign if the product is on sale. This element indicates the placement of the Sale Sign and will be hidden otherwise. You can use CSS positioning to change the placement of the the Sale Sign. The agent adds a child element with CSS class .ls-sale-sign which will contain the text according to the Box Designer setup.

Here is the standard markup that is used by default:

<h3 class="ls-box-title"></h3>
<div class="limespot-recommendation-box-carousel-container">
   <div class="ls-ul-container limespot-recommendation-box-carousel v-align">
      <ul class="ls-ul limespot-recommendation-box-carousel-shelf">
         <li class="limespot-recommendation-box-item">
            <a class="ls-link">
               <div class="ls-image-wrap"><img class="ls-image" /></div>
               <div class="ls-info-wrap">
                  <div class="ls-title">Loading...</div>
                  <div class="ls-price-wrap">
                      <span class="ls-original-price"></span>
                      <span class="ls-price"></span>
                  </div>
               </div>
               <div class="ls-sale-sign-wrap"></div>
            </a>
         </li>
      </ul>
   </div>
   <a class="ls-left-arrow limespot-recommendation-box-carousel-indicator indicator-left">
      <div class="recomm-arrow arrow-left"></div>
   </a>
   <a class="ls-right-arrow limespot-recommendation-box-carousel-indicator indicator-right">
      <div class="recomm-arrow arrow-right"></div>
   </a>
   <div class="limespot-paginator-wrap">
      <ul class="ls-paginator limespot-paginator"><li class="limespot-paginator-indicator-item"><span class="limespot-paginator-dot"></span></li></ul>
   </div>
</div>

When you want to change the markup of the recommendation boxes, you can do so in the LimeSpot Admin Panel > Personalizer > Customize to open the Box Designer, and then Global Settings > Code > JavaScript to apply your custom markup.

You can use the LimeSpot.Storefront.AddCustomizations() method by using the CarouselMarkup as the customization key. Here is an example: 

LimeSpot.Storefront.AddCustomizations({ 
        "CarouselMarkup": '<h3 class="ls-box-title"></h3>
            <div class="limespot-recommendation-box-carousel-container">
              <div class="ls-ul-container limespot-recommendation-box-carousel v-align">
                <ul class="ls-ul limespot-recommendation-box-carousel-shelf">
                  <li class="limespot-recommendation-box-item">
                    <a class="ls-link">
                      <div class="ls-image-wrap"><img class="ls-image" /></div>
                      <div class="ls-info-wrap">
                        <div class="ls-title">Loading...</div>
                        <div class="ls-price-wrap">
                          <span class="ls-original-price"></span>
                          <span class="ls-price"></span>
                        </div>
                      </div>
                      <div class="ls-sale-sign-wrap"></div>
                    </a>
                  </li>
                </ul>
              </div>
              <a class="ls-left-arrow limespot-recommendation-box-carousel-indicator indicator-left">
                <div class="recomm-arrow arrow-left"></div>
              </a>
              <a class="ls-right-arrow limespot-recommendation-box-carousel-indicator indicator-right">
                <div class="recomm-arrow arrow-right"></div>
              </a>
              <div class="limespot-paginator-wrap">
                <ul class="ls-paginator limespot-paginator"><li class="limespot-paginator-indicator-item"><span class="limespot-paginator-dot"></span></li></ul>
              </div>
            </div>'
});

Did this answer your question?