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
The Web Recommender widgets
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 | Dependency |
---|---|---|---|---|---|
Home Page |
HOME |
Personalized recommendations for product categories and products within these categories. | Multiple widgets should populate the entire page. | Personal profile. |
recommend command. |
Product Page |
RELATED |
Related/similar product recommendations. | Close to or below the main product image, in the top scroll zone. | Currently browsed product. |
view and recommend commands. |
Cart Page |
CART |
Complementary product recommendations matching the cart contents. | Below the cart contents list. | Current cart contents. |
cart and recommend commands. |
Category Page |
CATEGORY |
Personalized recommendations in a given category. | At the top of page, above the category list. | Currently browsed category. |
category and recommend commands. |
Search Results Page |
SEARCH |
Personalized recommendations matching the search term entered. | Above the search results. | Search term entered. |
searchTerm and recommend commands. |
Optional logics (use if applicable)
Website page | Logic | Description | Suggested placement | Context | Dependency |
---|---|---|---|---|---|
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. |
category and recommend commands. |
Product Page |
ALSO_BOUGHT |
Complementary product recommendations. | Below the main product details. | Currently browsed product. |
view and recommend commands. |
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. |
recommend command. |
Category pages |
POPULAR |
A simple list of top-selling products in a given category. | Sidebar. | Currently browsed category. |
category and recommend commands. |
The Web Recommender widgets
As a quick reminder, here is the onboarding video about 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.
- Dependency – The HOME widget relies on the recommend command.
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).
- Dependency – The CART widget relies on the following commands:
If you would like to use the CART Web Recommender widget, you have to implement the code yourself in your website. Please consider that implementing this widget requires intermediate coding skills and knowledge of HTML.
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.
- Dependency – The CATEGORY widget relies on the following commands:
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.
- Dependency– The SEARCH widget relies on the following commands:
Restrictions!
- The SEARCH widget supports only the default language of your product catalog, therefore it is not suitable for use with multi-language sites and catalogs.
- The SEARCH logic monitors the title and category fields only.
- The match of the search is not case sensitive. For example: "Lego" and "LEGO" would be returned as the same results.
- The SEARCH logic returns the available items only.
- The SEARCH logic is not compatible with the Parent/Child feature. See also, widgets supported by the Parent/Child catalog feature.
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.
- Dependency – The DEPARTMENT widget relies on the following commands:
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 items which are often bought alongside the item being viewed. 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. This means that it could take weeks (or even months, depending on your website’s traffic) for this widget to offer your customers recommendations, because it can only establish the ALSO_BOUGHT relationship when different customers purchased the same product together with another one at least 3 times. Furthermore, it 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.
- Dependency– The ALSO_BOUGHT widget relies on the following commands:
ALSO_BOUGHT with Parent/Child feature with grouped catalogs
-
Context – If you are using the Parent/Child feature you can set up your view events in two ways:
- Send the ID of the parent product (groupID).
Note: This method is not recommended, if you plan to use view event-based Tactics, like Price drop or Back in stock.
- Send the variant ID. -
Logic – In both cases, you can use the ALSO_BOUGHT logic, which will provide relevant recommendations for the product group currently viewed.
Example: If you are viewing a Type A shoe in size 43, you will see recommendations that have been bought together with the Type A shoe in all sizes.
ALSO_BOUGHT_FOR_VARIANT
- Context – It is a sub-logic for ALSO_BOUGHT logic.
-
Logic – You must send the variant ID in the view event.
As an example, if you are viewing a Type A shoe in size 43, the recommendations, in this case, will be relevant for the Type A shoe in size 43, other sizes might get different recommendations. This could be relevant in the fashion industry if your variants are separated by color and not size. - Code example – Modify the code sample as follows:
ScarabQueue.push(['recommend', {
logic: 'ALSO_BOUGHT_FOR_VARIANTS',
containerId: 'alsobought-recs',
templateId: 'alsobought-template',
limit: '8',
}]);
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.
- Dependency – The PERSONAL widget relies on the recommend command.
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. This list is determined based on views instead of sales data, so the top-selling items are the most frequently viewed ones.
- Placement – Our best practice is to display POPULAR on category pages as an optional complement to the CATEGORY recommender.
- Dependency – The POPULAR widget relies on the following commands: