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.
To quickly add, remove, or temporarily pause recommendation boxes on your live site, follow these steps in the Product Recommendation settings of your Personalizer Embedded.
Step 1 - Go to Shopify Theme Editor
Navigate to the Product Recommendations tab under Setup Guide and click on Shopify Theme Editor.
Alternatively, you can navigate to your Shopify admin panel.
Go to Online Store > Themes.
Select the Customize button beside your active theme.
In the editor, select the page you want to edit from the drop-down menu at the top.
Step 2 - Select Recommendation box
Navigate to the Add app block, configure and set placement under Product Recommendations and select a recommendation box. You will be redirected to Shopify Editor to configure and set placements.
Alternatively, you can navigate to your Shopify admin panel > Online Store > Theme Editor, and begin adding product recommendation blocks powered by LimeSpot Personalizer.
Step 3 - Add, 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.