Pinned items list is a wish-list that allows shoppers to mark their favorite items and view them. The Barilliance pinned list does not require the visitor to register to the website.

In the screenshot above you can see the pinned items list on the right (circled in red) and the icon which adds items to the list embedded in the product image.
The pinned items icon can be embedded in different locations. for example on recommendations widgets and listing pages:

The Pinned items list has a 'closed mode' where it can be minimized to capture less space, which makes it suitable also for mobile.

Before using the pinned items list Barilliance should add support for it on your site. Please contact support and we will be happy to do it for you. Once we are done you can set up the action which is found in 'Additional Tools' section on the management panel.

Here are the different elements which you can set up:

Give the rule a name and click the rule preview Icon. this will open the site in a new tab and show the basic widget.
​

You can change the rule settings, save the rule and refresh the preview tab to see the change in the widget.

Click the Widget, Widget Item, Minimized Widget and Pin Icon tabs to change the design aspects such as fonts, colors, icons etc..

Click the location tab to set the widget and Pin Icon location:

The widget is designed to be aligned to one of the sides of the screen (left/right).
The vertical position is determined by setting top or bottom as the reference point and offset which is either in percentage or pixels.

The pin icon adds a product to the pinned list, therefore it can be attached to product pages, products that appear in recommendations widgets and listing pages.
​

Locating the icon on product pages requires selecting a CSS selector which identify the location on the product page.
On most sites it is possible to click the CSS selector button:

Clicking it will open the site in a new tab where you can open a product page and select the reference element for the Pin Icon location. Usually it will be the main product image.

In case of issues contact Barilliance or ask your developer to find the CSS selector.

Once the reference object is identified you can set the margins to locate the icon. In a usual setup the reference object is the main image and the icon is located relative to the top right of the image. so the setup looks like this:

And the resulting Icon position:

​

Infinite scroll listing pages load elements while the visitor scrolls and therefore need to add Pin icons dynamically. In order to support these pages use the setting 'Category Checking every' in Advanced tab. A recommended setting is 2 seconds. It means that the page will be checked periodically for new items which will get Pin Icons if needed.