Configure and add a product recommendation block

Written by Julie Trenque

Updated on 06/05/2023

4 min


Was this content useful?

Kameleoon offers a dedicated interface to create product recommendation blocks thanks to an advanced graphical rules builder, and to analyze the performance of the product recommendation strategy (overall or by block).

This is a premium feature. Please contact your Customer Success Manager to enable it on your Kameleoon Account.

To add and configure a recommendation block, open the Configure menu and click on Recommendation.

Recommender blocks


In the Product Recommendations menu, click on Recommender blocks.

It opens on In use but if none of them is live, there will be an empty list.

Click on All blocks to see all available recommender blocks defined for your website.

  1. Name, description and code (which you need to use when calling our API) of the block. You can also add tags to filter out the blocks in the listing.
  2. Status represents the number of times the block has been displayed to your visitors
  3. The status of the block. Can take the value paused, not installed or in use. The status is Not installed when Kameleoon has not yet been able to detect the block on your website.
  4. CTR is the ratio clicks per view (the visitor has interacted with your block and seen a product page).
  5. Fill rate helps you in understanding the performance of your block in terms of number of products displayed inside the block. It is green if the block always displays the maximum number of products possible. For instance if your block has been designed to show 10 products but Kameleoon algorithms always return less than 10 products (because the rules defined for your block are too restrictive), the Fill rate will turn yellow, orange or red depending on the number of products displayed in the block.
  6. You can pause, copy and delete your block.

On click on a specific block, you can access more details. The page dedicated to a specific block has 5 sections:

  • Performance
  • Rules
  • Template
  • Callbacks


  1. Here you can activate or deactivate the block.
  2. Here you can navigate between the different menus.
  3. Here are displayed the number of impressions (views), clicks, CTR (clicks per impressions), conversions (clicks per purchases) and purchases.

Note: You can also export the products which have been purchased by users being exposed to this recommender block in an XLS file.

Learn more about analyzing the performance of your product recommendation strategy


This allows you to fully configure the rules that define your block: the title of the block that will be displayed on your website; you can combine algorithms and apply advanced filtering and configuration rules (eg. use one algorithm if the product is less than XX euros and another algorithm if it is higher).

To learn how to configure advanced rules for your recommendation block, please read this article.


Kameleoon algorithms determine which products to recommend (e.g. the most popular products, similar products to the one currently being viewed by the user, etc.). To access the list of available algorithms, please read this article.

You can select an algorithm, set a quantity of product returned by this algorithm and add filters.

Note: If you set a limit of 10 products, but the limit of products in the block is 6, only 6 products will be displayed.

To learn how to configure advanced rules for your recommendation block, please read this article. This allows you to fully configure the rules that define your recommendation block: the title of the block that will be displayed on your website, the algorithm(s) you want to use, sorting and filtering rules (eg. use one algorithm if the product is less than XX euros and another algorithm if it is higher).


The template section allows you to fully customize the display of the recommendation block and what product information to show to your visitors (eg. brand, description, etc.)

  1. Here is the code that manage the display of the block. This template supports Liquid Markup. You can use all fields available in the right to customize your block.
  2. Here you can add UTM campaigns parameters in order to track their performance with your analytics platform.

Once you are fine with the code, click on Copy code to get the generated snippet associated with your block. You can paste it on your website page source code where you want to display your block.

Note: Kameleoon also provides a custom widget that you can use directly in any experiment or personalization: please follow these guidelines to set it up

Depending on the algorithms used in your block, you will need to use Kameleoon predefined variables. For instance, if you use the algorithm Similar product and you want to display your block in all product pages, you will need to add in the snippet code the variable data-recommender-item that will contain the ID of the current product. Please see below the list of all Kameleoon variables available.

data-recommender-minNoThe minimum number of products in the response for which the block is rendered. If there are fewer items returned, the block is hidden.
data-recommender-codeYesProduct recommendation block ID.
data-recommender-itemYes (for some algorithms)ID of the current product, if the user is on the product card. Mandatory for the block with the algorithms “Similar” and “They also buy this”.
data-recommender-excludeNoA comma-separated list of product IDs that must be excluded from recommendations.
data-recommender-search_queryNoThe current search term. Used in a block on the page with search results.
data-recommender-callbackNoThe name of the JS function where the results of the API request will be passed if a custom product recommendation handler is required.
data-recommender-errorNoThe name of the JS function where control will be passed if the product recommendation request fails.
data-recommender-categoryNoRecommend products only from the specified category.
data-recommender-categoriesNoRecommend products only from the specified categories (comma-separated list of category IDs).
data-recommender-brandsNoRecommend products only from specified brands (comma-separated list of brands).

Note: This is the easiest way to enable a recommendation block on your website page. Please note that you can also directly use our API. The API response will also use the template code you have added in the template section. So whenever you make a change to it, our API will automatically get it.


In the Product Recommendations menu, click on Design.

This page allows you to customize the design of a recommendation block. 

You can choose between the Basic editor and the CSS one (allowing you to deeply customize the design).

  • In this article :