Recommender logics appear on website pages in the form of recommender widgets, with the widget displaying a selection of relevant products served by the specific logic.

Observing our best practice for using recommender logics and placing the recommender widgets will help your visitors to a better shopping experience, and will ensure that your product recommendations perform optimally.

Contents

Overview of the logics

Below is a list of the standard pages where we recommend to add widgets.

Website page Logic Description Suggested placement Context
Home Page HOME Personalized recommendations for product categories and products within these categories. Multiple widgets should populate the entire page. Personal profile.
Product Page RELATED Related/similar product recommendations. Close to or below the main product image, in the top scroll zone. Currently browsed product.
Cart Page CART Complementary product recommendations matching the cart contents. Below the cart contents list. Current cart contents.
Category Page CATEGORY Personalized recommendations in a given category. At the top of page, above the category list. Currently browsed category.
Search Results Page SEARCH Personalized recommendations matching the search term entered. Above the search results. Search term entered.

Optional logics (use if applicable)

Website page Logic Description Suggested placement Context
Top Level Category DEPARTMENT Personalized recommendations for product sub-categories and products from a given top-level category. Multiple widgets should populate the entire page. Personal profile.
Product Page ALSO_BOUGHT Complementary product recommendations. Below the main product details. Currently browsed product.
Home Page, any PERSONAL Personalized recommendations to match current recent browsing habits. On the home page. If space is too limited for HOME, on a sidebar on other pages. Personal profile.
Category pages POPULAR A simple list of top-selling products in a given category. Sidebar. Currently browsed category.

The Web Recommender widgets

HOME

  • Demo site – http://lifestylelabels.com/#sc_inspector
  • Code example – JSFiddle working code sample
  • Best practice tips

  • Context – This logic drives the Home Page, the page exposed to virtually all your visitors. Its main purpose is to offer a quick overview of the store’s offerings, by populating the page with a dynamic number (5-10) of separate widgets, each showcasing personally relevant product categories and products. Because the visitor has not yet expressed any specific interest, HOME uses the visitor’s most recent browsing behavior as context.

  • Logic – HOME tries to guess the product categories that are most likely to catch the eye of your visitors, much like a shop window. To achieve this, HOME takes the visitor’s most recent browsing behavior, and suggests related product categories, listing personally relevant and trending products within each of these categories. HOME will not display products that have already been viewed or purchased by the visitor. In the case of unknown visitors (first-time visit), HOME will simply display most trending product categories and products.

  • Placement – Our best practice is to display multiple HOME recommendation blocks, inserted between existing Home Page content. Each recommendation block is connected to a specific product category and is rendered by an independent template. The number of widgets actually populated is dynamic (depends on how much Predict knows about the visitor already), but never less than 4-5 widgets, and up to 10.

RELATED

  • Demo site – http://lifestylelabels.com/lsl-men-polo-s-neck.html#sc_inspector
  • Code example – JSFiddle working code sample
  • Best practice tips

  • Context – This is our main recommender logic for the product pages. It is most exposed to traffic, and consequently will generate a major part of your recommender contribution. The main goal of this logic is to help visitors pick the one item that is best fitting their current needs from a shortlist of very similar products. RELATED takes the item ID of the main product being viewed as context.

  • Logic – RELATED reacts to visitor interest in a specific product by offering a selection of related or similar items calculated based on product views by other visitors. It will be the quickest to learn, and will be ready to use in live operation within a matter of days. RELATED addresses known cases where behavior data derived from web traffic is not yet available, such as brand new products (cold start problem) and products that get very low visit rate (long tail products). For these cases RELATED is enriched with the top trending products of the current category.

  • Placement – Our best practice is to display the RELATED widget in the top scroll zone, near the original product image being viewed. This way, if the visitor decides to keep looking after viewing the main product image, the alternate product offerings are right at hand.

CART

  • Demo site – http://lifestylelabels.com/checkout/cart/#sc_inspector
  • Code example – JSFiddle working code sample
  • Best practice tips

  • Context – Visitors are ready to leave the shop on the Cart Page, just stopping to check on the order. CART’s aim is to create an upsell/cross-sell opportunity by suggesting complementary, accessory-like items to the current cart contents.

  • Logic – CART reacts to a visitor’s strong interest in one or multiple products by offering a selection of complementary items, calculated based on purchases made by other visitors. Because products added to the cart are still likely to be abandoned by visitors (60% of carts are abandoned based on industry stats), CART mixes in some alternative or similar products additionally to complementary items.

  • Placement – Our best practice is to display a CART widget below the list of cart contents, before the delivery or purchase options block (if any).

CATEGORY

  • Demo site – http://lifestylelabels.com/men/shirts.html#sc_inspector
  • Code example – JSFiddle working code sample
  • Best practice tips

  • Context – On Category pages, a visitor’s interest is already focused around a specific product category. CATEGORY logic aims to highlight the items from the category that are personally most relevant to a given visitor, using the current category-level information as context.

  • Logic – CATEGORY reacts to a visitor’s interest in the current category, so it takes trending products from the category and combines this information with the visitor’s known personal browsing behavior to offer best-matching items from the category.

  • Placement . Our best practice is to display a CATEGORY widget on top of the category listing, highlighting best-matching items from the list that follows.

SEARCH

  • Demo site – http://lifestylelabels.com/catalogsearch/result/?q=polo#sc_inspector
  • Code example – JSFiddle working code sample

  • Context – Our dedicated widget for the search results page, the page returning hits for the specific search term entered by the visitor. SEARCH logic will look up the product catalog for products matching the search term, and rank these items depending on personal relevance to visitor. SEARCH uses the search term entered and the visitor’s most recent browsing preferences as context.

  • Logic – SEARCH reacts to the search term, looking up the product catalog to find items that match. It will also take into consideration the information available about the visitor’s recent browsing interest to offer best matching items.

  • Placement – Our best practice is to display the SEARCH widget on top of the search results page, highlighting best matching items from the list that follows.

DEPARTMENT

  • Demo site – http://lifestylelabels.com/men.html#sc_inspector
  • Code example – JSFiddle working code sample

  • Context – This logic is dedicated to top category pages in stores that have very large and varied product catalogs. DEPARTMENT’s main purpose is to give an overview of the current top category, by populating the page with a dynamic number (5-10) of separate widgets, each showcasing personally relevant subcategories and products. DEPARTMENT uses the current category-level information as context, taking into account the visitor’s most recent browsing behavior.

  • Logic – DEPARTMENT tries to guess the product categories that are most likely to interest the visitor based on past browsing behavior, suggesting relevant subcategories and listing personally relevant and trending products within each of these categories. DEPARTMENT will not display products that have already been viewed or purchased by the visitor.

  • Placement – Our best practice is to display multiple widgets inserted between existing top category page content. Each widget represents a product category and is rendered by an independent template. The number of widgets actually populated is dynamic (it depends on how much Predict knows about the visitor already), but never less than 4-5 subcategories.

ALSO_BOUGHT

  • Demo site – http://lifestylelabels.com/lsl-men-polo-s-neck.html#sc_inspector
  • Code example –JSFiddle working code sample
  • Best practice tips

  • Context – This is an optional recommender logic for the product page designed to showcase compatible accessories to the main product being viewed.

  • Logic – ALSO_BOUGHT reacts to visitor interest in a specific product by offering a selection of complementary accessory-like items calculated based on purchases. This logic is not recommended for all webshops; it is best suited to a vertical such as electronics and computing, where accessory-type product relationships are very strong. Because ALSO_BOUGHT works exclusively from purchase data, it is our “slow learner” logic, and may not always return recommendations.

  • Placement – Our best practice is to display ALSO_BOUGHT on the bottom of the product page, below the product details block.

PERSONAL

  • Code example – JSFiddle working code sample
  • Best practice tips

  • Context – PERSONAL can be used in any context on the website, so recommendations are not constrained by a category or similarity to another product. Instead, it returns a list of personalized product offers that are closely related to the current browsing of the visitor.

  • Logic – PERSONAL keeps track of the visitor’s current browsing interest, and tries to offer items that are closely related to the ones browsed. PERSONAL is for discovering new items, so it will not display products that have already been viewed or purchased by the visitor. In the case of unknown visitors (first-time visit), it will simply display most trending products.

  • Placement – PERSONAL can act as a replacement for HOME on a home page that’s limited in available screen real-estate. It can also be used as a secondary widget on category pages, and in general, on all pages where no dedicated widgets are used.

POPULAR

  • Code example – JSFiddle working code sample

  • Context – On Category pages, a visitor’s interest is already focused around a specific product category. POPULAR offers a simple list of top selling items within the current category.

  • Logic – A simple list of top-selling products.

  • Placement – Our best practice is to display POPULAR on category pages as an optional complement to the CATEGORY recommender.
See also