LimeSpot's recommendation boxes are highly customizable to match your store's theme. While basic appearance properties can be adjusted via the Turbo Appearance Settings, more in-depth customization is achievable through custom CSS. CSS allows you to modify elements' appearance, including fonts, sizes, and colors.
🔧 This is a technical article which requires understanding of CSS.
Steps to customize LimeSpot Turbo components
Access the Appearance Settings:
Navigate to the LimeSpot Turbo Admin Panel:
In your Shopify admin, open the LimeSpot app.
Go to Turbo > Appearance Settings.
Open the Custom Code Section:
Scroll down to the Custom Code section.
Add your CSS directly into the provided editor.
Modify CSS
In the Custom Code section of the Appearance Settings, you can add custom CSS specific to LimeSpot components. Override default appearances by defining your own CSS attributes for each class.
Key CSS Classes for Customization
General recommendation boxes:
.ls-box-title– Box title..ls-link– Anchor element linking to the product page..ls-image– Product image..ls-title– Product title..ls-vendor– Product vendor name..ls-price– Product price..ls-original-price– Original price (if available)..ls-sale-price– Discounted price..ls-sale-sign– Sale indicator..ls-add-to-cart– Add to cart button..ls-dropdown– Dropdown elements.
Upsell recommendation boxes:
.ls-message– Upsell message..ls-link– Anchor element linking to the product page..ls-title– Product title..ls-price– Product price.
Additional Customization Tips
Displaying Vendor Names
To show vendor names in recommendation boxes, add the following CSS:
.ls-vendor { display: block; }This will make the vendor names visible in the recommendation boxes.
Conclusion
By utilizing these CSS classes and customization options, you can tailor LimeSpot's recommendation boxes to seamlessly integrate with your store's design and enhance the overall user experience in the Turbo version.
🤔 Questions? Need help? Contact us via the in-app chat or email.