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.
🔧 This is a technical article which requires understanding of JavaScript.
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 InnerHTMLls-link: an anchor (<a>) element to navigate to the product page. The href is applied to this elementls-title: product title is applied as InnerHTMLls-vendor: product vendor is applied as InnerHTMLls-price: product price is applied as InnerHTMLls-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 sale sign. The agent adds a child element with CSS class.ls-sale-signwhich 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 by going to Conversion > Website Personalization and click Designer. In the Designer select the markup (<>) icon to open the in-app editor.
Use the LimeSpot.Storefront.AddCustomizations() method with:
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 ls-drag-scroll 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"></div>
<div class="ls-vendor"></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>
<div class="ls-li-quick-actions"></div>
</li>
</ul>
</div>
<div class="ls-left-arrow limespot-recommendation-box-carousel-indicator indicator-left">
<div class="recomm-arrow arrow-left ls-svg-arrow"></div>
</div>
<div class="ls-right-arrow limespot-recommendation-box-carousel-indicator indicator-right">
<div class="recomm-arrow arrow-right ls-svg-arrow"></div>
</div>
</div>`,
});
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>
<div class="ls-li-quick-actions"></div>
</li>
</ul>
</div>`,
});
UpsellMarkup as the customization key for the upsell markup. Here is the upsell markup sample script:
LimeSpot.Storefront.AddCustomizations({
"UpsellMarkup": `
<div class="ls-ul-container">
<ul class="ls-ul">
<li class="ls-li ls-no-overlay">
<div class="limespot-li-container">
<div class="ls-prev limespot-prev">
<a>
<img src="${LimeSpot.ScriptHostUrl}/snippets/images/arrow-left-sm.png" alt="<" />
</a>
</div>
<a class="ls-link"><div class="ls-image limespot-image"></div></a>
<div class="limespot-message-container ls-message-container">
<a class="ls-link">
<div style="display: none;">
<span class="ls-title"></span>
<span class="ls-price"></span>
<span class="ls-original-price"></span>
</div>
<div class="ls-message limespot-message"></div>
</a>
<div class="ls-add-to-cart-container limespot-add-to-cart-container"></div>
</div>
<div class="ls-next limespot-next">
<a>
<img src="${LimeSpot.ScriptHostUrl}/snippets/images/arrow-right-sm.png" alt=">" />
</a>
</div>
</div>
</li>
</ul>
</div>
<span class="ls-box-title" style="display: none;"></span>`,
});
BundleMarkup as the customization key for the bundle markup. Here is the bundle markup sample script:
LimeSpot.Storefront.AddCustomizations({
"BundleMarkup": `
<h3 class="ls-box-title"></h3>
<div class="ls-bundle-container limespot-recommendation-box-bundle-container" data-include-reference-first="true">
<div class="ls-ul-container limespot-recommendation-box-bundle v-align">
<div class="limespot-recommendation-box-bundle-top-section">
<ul class="ls-ul limespot-recommendation-box-bundle-products">
<li class="ls-bundle-li ls-no-overlay">
<div class="limespot-recommendation-box-bundle-item-image">
<a class="ls-link">
<div class="ls-image-wrap"><img class="ls-image" /></div>
</a>
<div class="ls-plus-sign"> + </div>
</div>
</li>
</ul>
<div class="ls-bundle-cta-container">
<div class="ls-bundle-price-container">
<span class="ls-bundle-price-text">Total Price:</span>
<div class="ls-bundle-price-wrap">
<span class="ls-bundle-original-price-total ls-original-price"></span>
<span class="ls-bundle-price-total ls-price"></span>
</div>
</div>
<button class="ls-bundle-add-to-cart ls-add-to-cart">
Add Selected to Cart
</button>
</div>
</div>
<div class="ls-bundle-list limespot-recommendation-box-bundle-list">
<ul class="ls-ul ls-bundle-list-ul">
<li class="ls-li ls-bundle-list-li ls-no-overlay">
<label class="ls-bundle-list-item limespot-recommendation-box-bundle-list-item">
<input type="checkbox" class="ls-bundle-list-item-checkbox" checked="checked">
<div class="limespot-bundle-list-item-info">
<a class="ls-link ls-no-review"><span class="ls-title"></span></a>
<div class="ls-bundle-list-item-variant-container"></div>
<div class="ls-price-wrap">
<span class="ls-original-price"></span>
<span class="ls-price"></span>
</div>
</div>
</label>
</li>
</ul>
</div>
</div>
</div>`,
});🤔 Questions? Need help? Contact us via the in-app chat or email.