All Collections
Product Recommendations
Adding new onsite recommendation widgets
Adding new onsite recommendation widgets

How to add widgets to new locations or pages

Joel Lang avatar
Written by Joel Lang
Updated over a week ago

Note: if you joined Barilliance before 2020 your recommendation widgets are likely "old style" widgets - widget that are not added via rules in the management panel. To add new widgets or change widget location please contact Barilliance support.

The recommended way to add new widgets is by duplicating an existing widget rule. A quick and easy way to add new widgets without having to design them from scratch.

Duplicating an existing rule

  1. Locate an existing widget rule and open it for editing. You can use the Product Recommendations Widget tag to filter your list of rules:

  2. Click on Duplicate Rule button:

3. You are now editing the new rule. As a first step we suggest to update the rule name and save it.

Define the widget position on the page

You tell the system where to position the widget on the page with a CSS Selector. A selector identifies a specific HTML element in the page structure. You then decide if you want the widget to be inserted before, after or inside the element you specified. The example screenshot below assumes there exists on the page a div element with id recommendations. The widget will be added after that element:

If you are not familiar with CSS selectors and require assistance, we'll be happy to help.


You'll probably want to head to the Title tab next and change title text. Since we duplicated an existing widget design we'll skip the visual related tabs and go straight to the Recommendations Settings tab.

Recommendation Settings

In this tab pay attention to the Widget Slot Number setting. You must use a slot that is not already in use by another widget on the page. If the page you are adding already has one widget then use slot 2, otherwise you can use slot 1.

If you'd like to use a specific recommendation type make sure the page type you select matches the page type where the widget is displayed (e.g a recommendations type for the product page will not work on the cart page). And that Use Setting Below is selected:

If you'd l like to pick specific products that will appear in the widget click on the Promote Items button.

User Segment and Location

Here you'll decide on which pages of the site the widget will appear. If you are adding a widget to a standard page e.g product, cart, search etc... You'll probably want to leave the segment set to all visitors and choose the appropriate site location:

If you want display the widget on a specific URL you can use the URL Contains option in Location. To resolve possible ambiguities you can combine the Location with Current URL User Segment. For example the setting below will trigger the rule on all category pages that have washing-machine in their URL but not on any product pages.

Testing

There are two main aspects you will want to test:

  1. Testing that the widget displays correctly visually and in the correct position on the page

  2. Testing the rule's business logic, both the recommendations logic and/or user segments and site location.

You can test the visual part with Preview Mode - in this mode the the system ignores any user segments or location restrictions so that you may easily preview the rule on any page.

The business logic can be tested by activating the rule but restricting it to your IP address (using the IP address segment).

Did this answer your question?