Popular Items Carousel in Notification Hub
The most popular products will be displayed in carousel format above the site's footer on the home page. In the desktop version, up to 7 products can be shown.
Go to the Notifications Hub module
Select the Carousels function
Access the Most Popular option

You can customize the carousel settings.
Choose a title
It will be displayed as the carousel header. For example: "The most chosen products"
Link color
Show prices
With this option, you can choose whether to display the prices of the most popular products or not.

Configure the look and feel of the carousel
Product container border
Select this option to outline the products that will be displayed in the carousel in a box. You can choose a square or rounded style.

Colors
Select:
Border color
Background color
Title color
Price color

Use this option to add your HTML design.

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

Upload HTML for each product: Each product of 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.

You can use the USE DEFAULT SETTINGS button to return to custom mode
You can preview the carousel design in the configuration window.

Access
Go to the Notifications Hub module
Select the Carousels function
Access the Most Popular option

Setting
You can customize the carousel settings.
Choose a title
It will be displayed as the carousel header. For example: "The most chosen products"
Link color
Show prices
With this option, you can choose whether to display the prices of the most popular products or not.

Display
Configure the look and feel of the carousel
Product container border
Select this option to outline the products that will be displayed in the carousel in a box. You can choose a square or rounded style.

Colors
Select:
Border color
Background color
Title color
Price color

Upload HTML
Use this option to add your HTML design.

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

Upload HTML for each product: Each product of 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.

You can use the USE DEFAULT SETTINGS button to return to custom mode
Visualization
You can preview the carousel design in the configuration window.

Updated on: 12/12/2023
Thank you!