Adding recommendation frames

Find out how to add recommendation frames to your e-shop's website by yourself.

Written by Martyna Woźniszczuk
Updated over a week ago

Adding recommendation frames by yourself for the first time only applies to customers who use the self-implementation method. In the case of the QONizer method, our team will do it for you. However, in the course of regular cooperation, you can still add widgets yourself.

Creating and editing recommendation frames is possible in the QuarticOn customer’s panel. Placements for frames are developed by us on the basis of our clients’ choices, long-term working experience and methods tested by us. Therefore the system predefines them for you:

However, placements can be modified by the user.

The names of the pages and places on the pages indicate the preset position where the recommendation frame will be triggered. For example, if your goal is to add a frame to the product card under a short description of the product, but before any additional product information, we recommend that you use the placement PRODUCT PAGE -> Middle.

Within one placement you can define more than one recommendation frame. This will result in a random selection of frames each time a placement to which they are attached is triggered (a user opens a given subpage and/or scrolls down until they reach the placement).

Adding recommendation frames

To add a new recommendation frame, go to the Recommendations tab and select the Add widget button. You will be redirected to the editor, which consists of five stages:

Selecting a placement

In the Select a placement for the recommendation widget tab, select a place in the defined structure in which the frame should appear.

Widget settings

In this tab you can match a frame with a defined group of users (user segments). If you created some of them before, you can pick them from the list.

If not, add a new user segment (Add an audience).

Advanced settings

After choosing your audience, go to advanced settings where you can set the capping, priority or scheduling option.

Selecting a product recommendation strategy

In the next tab Select a product recommendation strategy there are 12 predefined recommendation strategies available. When you move the cursor over the strategy, a short description will appear. Select one of them and decide which products should be displayed to the user.

In this tab you can also go to advanced strategy settings.

Advanced settings

Depending on the selected recommendation strategy, the advanced settings option allows you to:

1. sort products

2. filter products by their price

3. filter products by their category

4. exclude popular products

Drag&drop editor

The next step is editing the appearance of recommendation frames in theDrag&drop creator. In this article you will find detailed instructions on how to do this.


Save all your settings by going to the Summary tab.

After that, the system will come back to the report view.

Displaying frames on the website

In order to download a frame and display it on a website in a defined form, it is necessary to:

1. go to the tab Recommendations Widgets

2. scroll to the field where the previously defined widget is placed

3. click on the Get snippet button

4. by default, the newly created widget appears as disabled in the panel. To appear on the page, copy the contents of the field and add where the recommendations should be displayed.

An example of implementing a recommendation frame in the structure of a website:

A well-added frame in the page code will look like this:

The recommendation frame code can be modified by adding a dynamic filter, thanks to which only products from a given category will appear on the widget.

<div id=”_qS_6p6o” class=”qONjs” data-filter=” ENTER HERE THE ID OF THE CATEGORY FROM THE PRODUCT CATALOGUE.”></div>

If you have a frame on the shopping cart page, you should send to the script the products that are currently in the shopping cart. The modified code looks as follows:

<div id=”_qS_5x5y” class=”qONjs” data-product=” ENTER HERE THE ID OF THE PRODUCTS IN THE CART AFTER THE COMMA”></div>

Please note that the system can process newly saved widgets or changes in the widget for up to several minutes (usually about 20 minutes), so please do not report problems until this time has elapsed.

Did this answer your question?