This example assumes that your site has a basic feature setup in place.

This use case example shows you how to display an existing recommendation on a new page. The "new page" can be either an existing page that does not yet have the recommendation or an actual new page that did not exist when the recommendation was originally added to your site.

In this example, you:

  • Create a placement for the new page. The placement determines on which page and where on that page the recommendation gets displayed.
  • Duplicate a modification, and assign the new modification to the new placement. The modification displays the recommendation on the new page.

You work on the placement and modification in the Frosmo Control Panel.

Consider the assumptions and screenshots in this example as just that: examples. In working through the example, feel free to adjust the assumptions to fit your site and needs

If you do not want this example to interfere with the live content on your site, use either test mode or a workspace. You can also safely preview the modification from the Control Panel.

Choose the correct example for your site:


For example purposes, let's assume the following:

  • You want to add the Home page - Recommendation 1 modification to the 404 page of a retail site. Only the 404 page has a <div class="not-found"> element.
  • You want to add the recommendation below the 404 error information, which is inside the <div class="not-found"> element.

The home page and the 404 page both belong to the "other" page type for a recommendation strategy, so you do not need to touch the strategy in this example.

The following figure shows what the recommendation might look like on the 404 page.

Recommendation on the 404 page

Figure: Recommendation on the 404 page (click to enlarge)

To work through the example:

  1. Create the new page placement for the recommendation.
  2. Duplicate the recommendation modification, and set the new modification to use the new placement.

Creating the recommendation placement

To create the recommendation placement:

  1. Log in to the Frosmo Control Panel.
  2. In the main menu, select Modifications > Placements.
  3. Click Create placement.
  4. Define the following settings:

    • Name: Enter "404 page - Recommendation 1".
    • Target element: Select CSS selector, and enter "div.not-found" as the selector name.
    • Display method: Select After element.

    The target element and display method together place the modification below the <div class="not-found"> element on the 404 page.

    Settings for the recommendation placement

    For more information about the settings, see the placement user guide.

  5. Click Save.

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

Duplicating the recommendation modification

To duplicate the recommendation modification:

  1. In the Control Panel, select Modifications > Overview.
  2. In the modifications list, find the modification you want to duplicate, click the quick menu button for the modification, and select Duplicate. In this example, the modification is Home page - Recommendation 1.

    Duplicating the recommendation modification

  3. Enter "404 page - Recommendation 1" as the name for the new modification, do not change the case, and click Duplicate.

    Duplicating the recommendation modification

    For more information about the settings, see the modification user guide.

  4. Select a new placement for the modification:

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

      Selecting the placement for the recommendation modification

    2. Select the placement you created for the new recommendation. In this example, the placement is 404 page - Recommendation 1.

      Selecting the placement for the recommendation modification

    3. Click Save.

    For more information about the settings, see the modification user guide.

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

You have duplicated the modification. The new recommendation is now live.

You're all done with this example!