🔧 This is a technical article which requires understanding of CSS and JavaScript.
The Turbo App for LimeSpot allows advanced users to customize the look and behavior of recommendation boxes. This guide explains how to leverage the Custom CSS and Custom JavaScript sections for personalizing your recommendation boxes. We'll provide examples for styling and interactivity to help you create a seamless shopping experience.
The Custom CSS and Custom JavaScript sections allow you to fully control how
LimeSpot’s recommendation boxes look and behave, making them an integral part of your Shopify store's branding and functionality.
In this guide, we’ll show you how to use these sections effectively, complete with examples to get you started. Whether you’re tweaking the design or adding dynamic functionality, LimeSpot's flexibility ensures your store stands out.
Where to find the customization sections
You can find the Custom CSS and Custom JavaScript sections in the app by navigating to Personalization > Appearance settings. Scroll down to locate the two fields labeled Custom CSS and Custom JavaScript.
These sections allow you to insert code for styling or functionality directly into your LimeSpot recommendation boxes.
These sections are designed for users with basic coding knowledge to modify LimeSpot elements using CSS or JavaScript.
Understanding LimeSpot CSS Classes
LimeSpot provides predefined CSS classes you can use to target specific elements within the recommendation boxes. These classes are essential for customizing styles or behaviors.
Some common CSS classes include:
.ls-title: Targets product titles in recommendation boxes..ls-image-wrap: Targets the product image container..ls-add-to-cart: Targets the "Add to Cart" button.For a complete list, refer to LimeSpot CSS Classes documentation.
Styling with custom CSS
Use the Custom CSS section to modify the appearance of LimeSpot recommendation boxes. Below are examples to help you get started:
Change the background color of recommendation boxes
.ls-box-container {
background-color: #f8f9fa;
padding: 16px;
border-radius: 8px;
border: 1px solid #e0e0e0;
}
Add hover effects to product images
.ls-image-wrap:hover {
transform: scale(1.05);
transition: transform 0.3s ease-in-out;
}
Customize the "Add to Cart" button
.ls-add-to-cart-wrap button {
background-color: #28a745;
color: white;
font-size: 16px;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
.ls-add-to-cart-wrap button:hover {
background-color: #218838;
}
Adding interactivity with custom JavaScript
The Custom JavaScript section enables advanced interactivity for recommendation boxes. LimeSpot provides an event listener called limespot:recommendationBoxLoaded, which triggers whenever a recommendation box is loaded. You can use this to dynamically modify content or behavior.
🔧 This is a technical article that requires understanding of JavaScript.
The event listener
Here’s how to set up the event listener:
document.addEventListener('limespot:recommendationBoxLoaded', function (event) {
var box = event.detail.box;
var boxType = box.getAttribute('data-box-type');
// e.g 'RelatedProducts'
var hostPage = box.getAttribute('data-host-page');
// e.g., 'ProductPage'
box.querySelectorAll('.ls-link').forEach(lsLink => {
var productIdentifier = lsLink.getAttribute('data-product-identifier');
console.log(`Product Identifier: ${productIdentifier}`);
});
});
Use cases for the event listener
Highlight special products
Add a CSS class to specific products based on their identifiers.
document.addEventListener('limespot:recommendationBoxLoaded', function (event) {
var box = event.detail.box;
box.querySelectorAll('.ls-link').forEach(lsLink => {
var productIdentifier = lsLink.getAttribute('data-product-identifier');
if (productIdentifier === 'special-product-id') {
lsLink.classList.add('highlight-product');
}
});
});CSS for highlighting:
.highlight-product {
background-color: #fffbcc;
border: 2px solid #ffcc00;
}
Hide specific recommendation boxes
Hide a recommendation box based on its type.
document.addEventListener('limespot:recommendationBoxLoaded', function (event) {
var box = event.detail.box;
var boxType = box.getAttribute('data-box-type'); // e.g., 'BoughtTogether'
if (boxType === 'BoughtTogether') {
box.style.display = 'none';
}
});Add UTM parameters to product links
Automatically append UTM parameters for tracking product clicks.
document.addEventListener('limespot:recommendationBoxLoaded', function (event) {
var box = event.detail.box;
box.querySelectorAll('.ls-link').forEach(lsLink => {
var currentHref = lsLink.getAttribute('href');
lsLink.setAttribute('href', currentHref + '?utm_source=limespot&utm_medium=recommendation');
});
});
Best practices for customization
Test before publishing: Test custom CSS or JavaScript in a staging environment to avoid breaking your live store.
Use browser developer tools: Tools like Chrome DevTools can help you inspect LimeSpot elements and debug JavaScript.
Back up your settings: Save your original code in case you need to revert changes later.
🤔 Questions? Need help? Contact us via the in-app chat or email.