Product Recommendation: Customizing Display Positions

Product Recommendations is an AI-powered app that recommends relevant products to customers, potentially increasing your conversion rate. This guide explains how to tailor the position of product recommendations displayed on your store pages using the theme editor. 

Customizing Display Positions in the Theme Editor

Go to Online Store > Design in your SHOPLINE admin panel. Then, click the Design button in the Current theme section to access your theme editor.

Steps: 

1. Choose the page: From the page selection dropdown, select the page where you want to place the product recommendation component.

   

2. Add the component: Click on Add component > Apps > Product Recommendations. 

   

3. Select data source: Choose the configured data source you established in the Product Recommendations app.

   

4. Drag and drop: Hover over the Product Recommendations component, then click and hold the drag handle icon to drag and drop it to your preferred position.

   

Configuring Recommendations for Product Detail Pages

1. From the homepage of your Product Recommendations app, click Page settings and select the Product detail page.

   

2. Product Recommendations offers two configuration options for product detail pages. Select based on your requirements:

• Store-wide settings: Apply recommendations consistently across all product detail pages using the Configure store-wide settings for product recommendations module. Click the Configure button to access the editing page.

  

• Individual product settings: Customize recommendations for specific products by clicking on the product from the list in the Customize recommendations for single products module.

  

Frequently Asked Questions About Product Recommendation Display

Q1: Why can't the position of product recommendation content be customized on certain pages?

Currently, SHOPLINE supports custom positioning for the following themes and pages:

Q2: Can I add multiple Product Recommendation components on one page?

Yes. You can add multiple Product Recommendation components on a single page by clicking the Add component button.

Q3: I've added the Product Recommendation component to the Product lists page in the Theme Editor, but it isn't displaying correctly on my live store. What should I check?

Make sure Default position is disabled in the Product Recommendation app. Enabling both the default position and a custom position for the Product lists page may prevent the Product Recommendation component from displaying correctly on your live store.

For detailed instructions, refer to the "Setting Up the Recommendation Display Position for Product Lists" section.

Q4: There's a recommendation section on my storefront, but I'm not sure whether it's from the Product Recommendation app or my theme. How can I tell?

You can identify the source using your browser's Inspect tool.

1. On your storefront, navigate to the page where the recommendation section appears.
2. Right-click the recommendation section and select Inspect (or Inspect Element).
3. In the developer tools panel, examine the highlighted HTML element:
   • If the element's class includes product-recommend-plugin, the recommendation section is provided by the Product Recommendation app.
   • If the element contains a data-url attribute beginning with /recommendations/products? but its class does not include product-recommend-plugin, the recommendation section is built into your theme.

If the recommendation section is provided by your theme and you'd prefer to use the Product Recommendation app instead:

1. Add the Product Recommendation component to the page using the Theme Editor.
2. Hide or remove the original theme recommendation section.
3. The Product Recommendation component will then be the only recommendation section displayed on that page.