This example shows you how to create a recommendation for products currently trending in a product category. The example uses a recommendation strategy to generate the recommendation data. The example covers the entire development workflow from creating and testing the strategy to creating the modification that displays the recommendation.

In this example, you:

You create all the components of the recommendation in the Frosmo Control Panel.

The following figure shows an example of the final recommendation on a product category page.

Product category page with a recommendation for trending products

Figure: Product category page with a recommendation for trending products (click to enlarge)

For generating the recommendation, this example relies on product data and transaction data collected from the site. The example therefore assumes that product and transaction tracking are correctly set up on the site.


If you're trying out this example on a production site, but do not want the example to interfere with production content, use either test mode or a workspace in creating the example. You can also safely preview the modification from the Control Panel.

To create the recommendation:

  1. Create and test the recommendation strategy.
  2. Create the recommendation slider template.
  3. Create the modification and associated placement for displaying the recommendation on product category pages.

Creating and testing the recommendation strategy

The recommendation strategy returns up to 5 products most often viewed and up to 5 products most often purchased in a given category in the past 24 hours.

To create and test the recommendation strategy:

  1. In the Control Panel, select Data Management > Recommendations > Strategies.
  2. Click Create recommendation strategy.
  3. Define the following settings:

    The following figure shows the complete recommendation strategy in the Control Panel. Click the figure to view a larger version.

    For more information about the settings, see Creating and editing a recommendation strategy.

  4. Click Save. The Frosmo Platform generates the recommendation data for the new strategy. The data generation may take a while.
  5. Test the strategy by previewing the products it returns:

    1. In the Preview section, in the empty field, enter the name of a category whose recommended products you want to preview. The name must be the exact full name tracked for the category by the platform.
    2. Click Show. The preview displays the recommended products in slot order, that is, in the order in which the items are recommended to visitors. The preview also displays selected information, such as ID and name, for each product.

    Previewing the products recommended by the strategy

You have created and tested the recommendation strategy. You can now use its recommendation data in a modification.

Creating the recommendation slider template

The template creates a simple product recommendation slider. The template provides variation content options for defining the slider title, selecting the recommendation strategy to use, and selecting the maximum number of products to display in the slider. The template uses content prerendering to fetch and process the recommendation data before building and rendering the final slider element.

Customizable parts of the recommendation slider

Figure: Customizable visual parts of the recommendation slider (click to enlarge)

To create the recommendation slider template:

  1. In the Control Panel, select Modifications > Templates.
  2. Click Create template.
  3. Define the following settings:

    The following figure shows the complete template in the Control Panel. Click the figure to view a larger version.

    Settings for the recommendation slider template

    For more information about the settings, see Creating and editing a template.

  4. Use the content options UI preview at the bottom of the editor to test that the content options schema and content options UI schema are correctly defined.

    The preview is fully interactive, so any changes you make to the schemas are automatically reflected in the preview. You can also set the content options in the preview as you would in the actual content options UI, and you can see a preview of the JSON object generated based on the set values.

    The following figure shows the content options UI preview for template.

    Content options UI preview for the recommendation slider template

  5. Click Save.

You have created the template. You can now use the template in a modification to display the template content.

Displaying the recommendation

When a visitor navigates to a product category page, they see a recommendation for up to 10 trending products in that category.

For example purposes, let's assume that a product category page can be identified by /category/ in the page URL, and that the page header is contained in a <div class="page-header"> element. You'll place the recommendation slider below the header on every category page.

Recommendation slider below the page header on a product category page

Figure: Recommendation slider below the page header on a product category page (click to enlarge)

The URL scheme, content layout, and source code structure of a product category page on your site almost certainly differ from the above. You could also use a trigger instead of a URL matcher to identify category pages, and you might want to place the recommendation slider differently.

To display the recommendation:

  1. Create the recommendation slider placement.
  2. Create the recommendation slider modification.

Creating the recommendation slider placement

To create the recommendation slider placement:

  1. In the Control Panel, select Modifications > Placements.
  2. Click Create placement.
  3. Define the following settings:

    The target element, display method, and URL matcher together place the modification below the page header on every product category page.

    Settings for the recommendation slider placement

    For more information about the settings, see Creating and editing a placement.

  4. Click Save.

You have created the placement. You can now use the placement in a modification.

Creating the recommendation slider modification

To create and activate the recommendation slider modification:

  1. In the Control Panel, select Modifications > Overview.
  2. Click Create modification.
  3. Enter "Category page - Recommendation - Trending in category" as the modification name, select Personalization as the modification case, and click Create.

    Creating the recommendation slider modification

    You could also select another case, but since this modification needs only the one variation, Personalization is the natural choice here.

    For more information about the settings, see Creating and editing a modification.

  4. Select the placement for the modification:

    1. In the Basic settings view, in the Placement section, click Select placement.

      Selecting the placement for the recommendation slider modification

    2. Select the placement you created for the recommendation slider.

      Selecting the placement for the recommendation slider modification

    3. Click Save.

    For more information about the settings, see Defining the placement for a modification.

  5. Define the content for the modification:

    1. In the Basic settings view, in the Content section, click the variation name.

      Defining the content for the recommendation slider modification

    2. In the Variation settings section, click Select type.
    3. In the Content templates list, select the template you created for the recommendation slider, and click Select.

      Defining the content for the recommendation slider modification

    4. In the Content options section, define the content options. You must define Recommendation title, Recommendation strategy, and Number of products to recommend. Enter an appropriate title, select the strategy you created for trending products, and set the number of products to 10. Feel free to try out other values for the number of products.

      Defining the content for the recommendation slider modification

    5. At the bottom of the view, click Save.
    6. Back in the Content section, click the quick menu button for the variation, and select Activate.

      Defining the content for the recommendation slider modification

    7. If you want to disable the comparison group for the modification, click the quick menu button for the group, and select Deactivate.

    For more information about the settings, see Defining the content for a modification.

  6. Activate the modification:
    1. At the bottom of the Basic settings view, click Activate.
    2. To confirm, click Activate.

You have created and activated the modification. The recommendation is now live, and you're done with this example!