1. Visually Help Center
  2. Upsells & Product Recommendations

Product Recommendation

Increase CR with smart product recommendations

 

Product Recommendation is an effective navigation tool that helps the user discover additional products to increase conversion rate. It can be placed in the homepage, collection page, product page, landing page, blog page and so on.

Layout

The Product Recommendations widget has several layout options. The List and Mini Collection layouts are highly recommended at the bottom of the page, after the user reviews the entire page. The Slider is commonly placed higher on the page, or at the very bottom (right above the footer) as a Recently Viewed section.

General Customization

  • How many products do you want to appear?

  • Would you like only a few products to be visible and the rest to be revealed upon clicking a "Show More" button? (this option is not available in all layouts)

  • Define the position of the "Add To Cart" button

  • Zoom button - If you choose to incorporate a zoom feature in your Product Recommendations widget, clicking on the magnifying glass icon will open a slider displaying all images of the product from the product page. This helps the user make a decision without leaving the page.

  • Product Reviews

Product Reviews

Algorithm

Having selected a layout, it is now time to select the algorithm that will determine the products displayed in the product recommendations section. It is recommended to A/B test different options:

  1. Create one experience for everyone (without an A/B test)

  2. Duplicate it and change the algorithm, and define that this experience will be shown to 50% of the visitors. Once you have a winner, set it to 100% and pause the other one.

When to use each option?

  • Manually - When you want to define specific products that will be shown to all users.

  • Viewed Together - The "Viewed Together" algorithm is employed in "Product Recommendation" sections on product pages (PDPs). It examines data on which PDPs are most frequently viewed together in the same session and uses this information to make the most relevant product recommendations for each PDP.

  • Personalized - Each visitor will see different products, tailored to their individual behavior, such as page views, items added to the cart, and past purchases. For users without any recorded data, the default will be "Purchased Together" or "Viewed Together" products.

  • Purchased Together - Display products commonly bought with those already in the customer's cart.

  • Advanced Ruling - Instead of using pre-defined algorithms, set your own set of rules.

  • Most Popular - Display the best-selling products in the last 30 days.

  • Recently Viewed - Display the most recent products that were viewed by the user. If there aren't any, the entire section won't be shown.

Advanced Editing

When a selection is made, an "Advanced Editing" option becomes available. Clicking it will reveal a variety of options that can be combined using OR and AND logic.

  • Tag - You can define to exclude or only include products that share a specific tag (note that new tags will appear a few hours after creation)

  • Inventory - It is highly recommended to always define "Inventory greater than 0"

  • Price - In some cases it is more effective to limit the price of the recommended products. Using this option you can define the desired minimum/maximum/range.

  • Reviews Count - Commonly used to show only products with a minimum review count.

  • Reviews Rating - Commonly used to show only products with a high review rating.

  • Collection - Define that only products from specific collections will be presented.

  • Show variants per product - Define if you want the product variants to be presented separately as individual products.

Customize The Design

To access all design setting options, click the colored "Customize The Design" button. The "Add To Cart" and "Zoom" settings are located in their own respective tabs, while all other options, including the "Reviews" setting, can be found under the "General" tab.

Design Customization Options

  • Choose the font family, weight, and size to make it fit your store

  • Set the spacing (padding)

  • Define the Product Tile "width" and "border-radius" (0px results in sharp corners, while increasing the value results in progressively more rounded corners)

  • Add border and shadow

  • Add a background color or image

  • Text design: define separately the text design of the "Product Name", "Product Price" and "Product Compare At Price"

  • Reviews - define the spacing, size and color of the stars

  • Set the design of the "Show More" button

  • The background and spacing of the entire section can be customized under "Container"

Important Tips

  • Use the Algorithm "Advanced Settings" to define that only products with "Inventory greater than 0" will be shown.

  • Create an "Excluded Products" tag for products you don't want to show on the Product Recommendations section (if there are any) and use the "Advanced Settings" to define this exclusion this way: "Tag Is Not ___"

  • There are several "Spacing" settings, each referring to a different element (text, background, the entire container, etc. If you tried one and it didn't make the desired change, try the next one.

  • Empty Cart - It is highly recommended to add a "personalized Product Recommendations Mini Collection" section to the cart drawer or page when its empty (after removing all products or clicking the cart icon when it's empty).

  • When using the "Advanced Editing" or "Advanced Ruling" option, make sure to use correctly the "Greater Than" and "Greater Eq Than" options or "Lower Than" and "Lower Eq Than" (Eq = equal).