This example shows you how to create a recommendation for products that visitors typically purchase together. The example uses a recommendation configuration to generate the recommendation data. The example covers the entire development workflow from creating and testing the configuration 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 page.

Figure: Product page with a recommendation for products purchased together (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 configuration.
  2. Create the recommendation slider template.
  3. Create the modification and associated placement for displaying the recommendation on product pages.

Creating and testing the recommendation configuration

The recommendation configuration returns up to 10 other products most often purchased together with a given product in the past 30 days.

Creating the recommendation configuration

To create the recommendation configuration:

  1. In the Frosmo Control Panel, in the sidebar, select More > Recommendations.
  2. Select the Configurations tab.
  3. Click Create recommendation configuration.
  4. In the code editor, replace the default recommendation configuration with the following code.

    {
        "name": "Products purchased together",
        "description": "Top 10 products purchased together with the current product in the past 30 days",
        "type": "bundle_converted",
        "frequency": "1d",
        "hours": 720,
        "limit": 10,
        "map_ids": "product",
        "params": [
            "productId"
        ],
        "options": {
            "product_attrs": [
                "id"
            ]
        }
    }

    Note the following settings:

    For more information about the settings, see the recommendation configuration reference.

  5. Click Save. The platform queues the recommendation configuration for data generation.
  6. To return to the recommendation configurations list, click Cancel.

You have created the recommendation configuration. Once the recommendation configuration status changes to Success, the recommendation data has been successfully generated, and you can retrieve and review the data.

Recommendation data has been successfully generated

Figure: Recommendation data has been successfully generated

Testing the recommendation configuration

Testing the recommendation configuration means reviewing the generated recommendation data to ensure that the data meets your expectations.

To test the recommendation configuration:

  1. In the Control Panel, in the recommendation configurations list, find the configuration, click the quick menu button for the configuration, and select Preview.

    Testing the recommendation configuration

    The full recommendation data opens in a new tab. The data is retrieved with the Recommendations API.

  2. Enter a product ID in the request URL, so that you can view the recommendation data for a specific product.

    Testing the recommendation configuration

    Testing the recommendation configuration

    If the product has been purchased together with other products by one or more visitors in the past 30 days, the page displays the corresponding recommendation data in the JSON format. If the product has not been purchased together with other products, or if the product ID is invalid, the page displays an error.

    If you need to find out what products IDs are available on your site, make a Graniitti API GET request to /sites/<site_id>/products, and check the product_id values in the response data.

    curl -X GET \
    --header 'Authorization: Bearer <access_token>' \
    'https://<graniitti_api_base_url>/sites/<site_id>/products'



You have tested the recommendation configuration. 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 customizing the title and the number of displayed products for 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 parts of the recommendation slider (click to enlarge)

To create the recommendation slider template:

  1. In the Control Panel, in the sidebar, select Modifications.
  2. Select the Templates tab.
  3. Click Create template.
  4. 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.

  5. 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

  6. 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 page, they see a recommendation for up to 10 other products that visitors have typically purchased together with the current product.

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

Recommendation slider below the main product details on a product page

Figure: Recommendation slider below the main product details on a product page (click to enlarge)

The URL scheme, content layout, and source code structure of a product page on your site almost certainly differ from the above. You could also use a trigger instead of a URL matcher to identify product 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, on the Modifications page, select the Placements tab.
  2. Click Create placement.
  3. Define the following settings:

    The target element, display method, and URL matcher together place the modification below the main product details on every product 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, on the Modifications page, select the Overview tab.
  2. Click Create modification.
  3. Enter "Product page - Recommendation - Purchased together" 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 both Recommendation title and Number of products to recommend. The following figure shows one example of setting the options.

      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!