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 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-vendor: product vendor 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.

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

You can use the LimeSpot.Storefront.AddCustomizations() method:

  • Use CarouselMarkup as the customization key for the carousel markup. Here is the carousel markup sample script: 
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-vendor">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 ls-svg-arrow"></div>
</a>
<a class="ls-right-arrow limespot-recommendation-box-carousel-indicator indicator-right">
<div class="recomm-arrow arrow-right ls-svg-arrow"></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>`,
});

  • Use GridMarkup as the customization key for the grid markup. Here is the grid markup sample script:
LimeSpot.Storefront.AddCustomizations({ 
"GridMarkup": `
<h3 class="ls-box-title"></h3>
<div class="limespot-recommendation-box-grid-container">
<ul class="ls-ul limespot-recommendation-box-grid">
<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-vendor">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>`,
});
Did this answer your question?