This guide will show you how to add and customize product recommendation blocks using the LimeSpot Personalizer inside Shopify Editor. By following these steps, you’ll be able to enhance your store with personalized recommendations that increase customer engagement and sales.
Note:
This guide is only applicable to customers on LimeSpot Turbo on Shopify platform.
We have build a Quick Start Guide to help you add, remove, customize recommendation boxes on your live site.
Step 1 - Add Frequently Bought Together to Product page
Navigate to Quick Start Guide (Step 1 of 5), select your theme and click on Add Bundle block to Product page.
You will be directed to the Shopify Theme Editor where you can change the style, look and feel and placement of your recommendation box.
Step 2 - Add Recommendation best practices
Navigate to Quick Start Guide (Step 5 of 5) and click on Best Practices.
You will be directed to the Recommendation page where you can add multiple recommendation boxes per page
Alternatively, you can navigate to your Shopify admin panel > Online Store > Theme Editor, and begin adding product recommendation app blocks powered by LimeSpot Personalizer.
Step 3 - Configure and set placement
Add app block
In the left-hand panel of you Theme Editor, locate the option to Add block or Add Section. LimeSpot offers a variety of app blocks you can add to customize product recommendations.
Recommendation Blocks Available:
Home: Trending, Most popular, New arrivals
Home: You may like
Home: Recent views
Collection: Recent views
Collection list: Most Popular
Collection list: Recent Views
Product: Related items, Cross-sell
Product: Frequently bought together
Product: Recent Views
Cart: Upsell
Cart: Cross-Sell, Related items
Cart: You May Like
Cart: Recent Views
These blocks can be tailored to your specific needs, allowing you to offer customers personalized experiences based on their browsing behavior or purchasing patterns.
Drag-and-Drop for Placement
After selecting the app block or section, use Shopify's drag-and-drop functionality to place it where you want on the page. You can always adjust the position later by moving it in the same panel.
Customize Recommendation Boxes
Once you've added the block, customize its settings to fit your store's style and customer preferences.
1. Image Width (px)
Controls: Product image width in pixels.
Default: 250px
Tip: Adjust to fit your page’s layout.
2. Image Height - Mobile (px)
Controls: Height of product images on mobile.
Default: 200px
Note: Limited to minimum 2 products per row
3. Items per Page
Controls: Number of items displayed per page.
Tip: Use a balanced number to avoid clutter.
4. Margin Right (px)
Controls: Space between items (in pixels).
Default: 40px
Tip: Adjust based on your layout’s spacing needs.
5. Margin Right - Mobile (px)
Controls: Space between items on mobile.
Default: 10px
Note: Limited to minimum 2 products per row
6. Rounded Image Corner Radius (px)
Controls: Rounds image corners.
Default: 0px (sharp)
Tip: Increase for a softer, modern look.
7. Image Hover
Options:
None: No effect.
Show 2nd Image: Display a secondary image on hover.
Tip: Use Show 2nd Image for products with multiple views.
8. Navigation Arrow Mode
Options:
Overlay on hover: Arrows appear on hover.
Always display: Arrows are always visible.
Tip: Use Overlay on hover for a cleaner design.
9. Navigation Arrow Type
Default: Striking Chevron
Tip: Stick with this or choose what suits your theme.
10. Auto Scroll Interval (seconds)
Controls: Time between automatic scrolls.
Tip: Set only if auto-scrolling is desired.
11. Add to Cart Title
Controls: Text on the Add to Cart button.
Default: "ADD TO CART"
Tip: Customize to match your store’s tone.
12. Quick Actions Mode
Option: Overlay on Hover: Displays quick actions like Add to Cart on hover.
Tip: Enable to streamline the shopping experience.
13. Extra CSS Classes
Controls: Add custom CSS classes for advanced styling.
Tailoring these settings will ensure that your product recommendations are effective and visually appealing.
Step 4 - Save and Review Changes
After configuring your product recommendation blocks, don’t forget to click Save in the top-right corner. Preview the changes on different devices to make sure everything looks perfect on both desktop and mobile.
Step 5 - Ongoing Optimization
Regularly monitor the performance of your product recommendation blocks. Use analytics to see how customers are interacting with these sections and make adjustments as needed to maximize conversions.
Need Help?
If you have any questions or need further assistance, feel free to reach out to our support team.