Skip to main content
All CollectionsProduct Recommendations, Upsell & Cross-sell
Get started with Product Recommendations
Get started with Product Recommendations

Learn how to add/remove recommendations to each page, including Home, Collection, Collection-list, Product & Cart on LimeSpot Turbo plan

Will Wadman avatar
Written by Will Wadman
Updated over a month ago

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.

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.

  1. Go to Online Store > Themes.

  2. Select the Customize button beside your active theme.

  3. 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.

Did this answer your question?