> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.icommkt.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to activate Popular Items showcase in HUB

Most Popular, shows the trending products on your site. With this tool, users will discover which are the most visited products. All people who access the site will see the same list, made up of popular products, ordered in descending order. To create this list, we will take into account the number of visits for each product.

### Access

1. Enter the **Notification HUB** module
2. Select the **Showcases** tab
3. Select the **Popular Items** option

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/acceso-itemp-populares_1kxwx4y.jpg)

### Set up
Set up the showcase

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/display-itemp-populares_uw38q5.jpg)

* **Bubble on**
Enable or disable the bubble power button.

* **Define the position**
Select the position in which you would like this bubble to appear on your site:
• Left
• Right

* **Bubble text** 
Select (optional) a title for the bubble up to 35 characters.

* **Bubble color**
Select a color from the palette

* **List title**
It is the one that will be displayed with the latest products browsed by the user.

* **Show prices**
Activate or deactivate the option

* **You can visualize the widget in...**
Select an option:
• On all pages.
• In a specific one.
• All pages except (define).

### Display
Configure the appearance of the showcase

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/html-itemp-populares_71rl0r.jpg)
• Select style: rounded or square.
• Select a font.

* Click on the **Save changes** button to finish

### Upload HTML

Use this option to add your layout in HTML.

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/html-itemp-populares_1iksszv.jpg)

* **Load the HTML for the product container:** inside, the products will be displayed by replacing {{products}} with the list of popular products.

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/html-1_pd81od.jpg)

* **Load the HTML for each product:** Each product in the {{products}} tag will be replaced by this code. Within this HTML, the texts {{name}} {{description}} {{price}} {{image}} {{url}} will be replaced by the title, description, price, image and URL of each product.

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/html-2_1cipw1n.jpg)

||| Important! The link that triggers the action to display the widget must have the id "wpn-ir-inline". Additionally, links to products must have the "wpn-inline-product-link" class.

|| You can use the USE DEFAULT SETTINGS button to return to custom mode

### Preview

You can preview the design of the showcase on the right side of the panel where the version for both Desktop and Mobile will be displayed.

![](https://storage.crisp.chat/users/helpdesk/website/e4b41ef8ae96c800/popular-items-preview_3hxjud.gif)