We’re going to explain how every single key in this template works.
For the initial configuration of recommendations, please refer to the dedicated article how to configure a recommendation.

The goal of the template is to allow the user to view a grid of recommendations, where the number of rows and columns to be displayed, both desktop and mobile, is chosen, and allows the view to be changed from grid to column.

To take full advantage of all the features of the template, it is advisable to limit the number of recommendations to be shown to a number higher than those that can simply be displayed on a page (given by the number of rows times the number of columns selected) and to limit the conditions to a minimum in order to have a wide range of products that the algorithm can extract.

Display icon position (1 _ left, 2_ center, 3 right): positioning, relative to the gallery, of the display mode (grid/list), forward and backward scrolling, and pagination buttons at the bottom.

Active View Icon Background Color: Background color for the active grid/list view icon

List/Grid Arrangement Icon Background Color | List/Grid Layout Icon Border | Font color of list/grid arrangement icons: The color of the background, border, and font used for the inactive list/grid view icon.

List/Grid Arrangement Icons Font Size: Font size used for list/grid view icons

Padding of List/Grid Arrangement Icons: Side padding of icons used in list/grid view buttons

Rounded corners border of list/grid layout icons: Rounding radius of the outline of list/grid display icons

Active View Icon Text Color: The font color used for list/grid view icons for the currently active mode

Hover view icon text: Font color used for list/grid view icons on hover

Inactive Page Background Color | Active Page Background Color | Active Page Border Color: The background color of buttons containing page numbers in normal mode and once activated (current page) and the corresponding border color

Inactive Page Number Text Color | Active Page Number Text Color: The font color used to show page numbers, if active, in the normal state and once activated (current page)

Pagination button rounded corners: Rounding radius of the outline of icons containing the page number

Show Bottom Navigation Buttons: Show/hide buttons at the bottom of the gallery, containing the page number if enabled or otherwise displayed as bullets.

Show/Hide Page Scroll Controls: Show /hide the buttons at the top of the gallery, containing forward and backward scroll icons.

Show/hide page numbers: Show or hide the page number display within the pagination buttons at the bottom, below the grid

List View Card Alignment (si_sinistra, no_destra): Align the contents of the cards when the list view is selected. The content is aligned to the right or left in a row and no longer in a column as in the grid view.

Gallery > More

Enable automatic page scrolling: Enable automatic page switching

Gallery autoplay timeout: The time in milliseconds after which you move to the next page when automatic page switching is turned on

Auto Return to Top on Scrolling: Enables/disables the placement of the view automatically at the beginning of the card bin with products

Gallery > Location & Size

Gallery Background | Gallery Border Color: Background color and container border of our gallery

Tunnel Edge Thickness: Thickness of the contour edge of the gallery container, put to zero to hide it

Arrange Column Icon | Arrange in grid icon: choose the icons to be shown in the button that activates the grid/list view

Margin before and after the gallery (in px): margin in pixels to be left before and after the container of our gallery

Maximum tunnel width in px: Maximum tunnel width in px

Number of columns from mobile: number of columns that will be shown in the mobile view, the number of rows will be automatically set to the number of products per page displayed in desktop mode (therefore rows by columns)

Number of items per row | Number of rows: Number of columns and number of rows that will be shown for each page (total items per page). In case the number of products extracted by the algorithm is less Total items per page and then the gallery will have only one page, the number of rows to be shown in the container will be automatically decreased so that they all contain at least one item, and the navigation buttons will be automatically hidden.

Gallery Rounded Corners: Rounding radius of the edge of the gallery container when set to a value greater than or equal to 1

Additional content > Message Text

Add-on Content Background | Additional Content Border Color: The color of the border of the additional content and its border, if the next value is set to a greater number equal to 1

Additional Content Border Thickness: Thickness of the contour border of the additional content container, set to zero to hide it

Hide Additional Content: Hides/shows additional content, shown in the image above

HTML additional content: HTML field where you can write the additional content you want to show before your gallery

Margin before and after add-on (in px): Margin in pixels to leave before and after the add-on container

Side Image | Hide Side Image | Left side image | Maximum side image width (in px): settings of the image that we want to show in the additional content, starting from the path of the file, its visibility or not, the positioning whether on the right or on the left and the maximum width in pixels that it will have to respect.

Additional Content Link Color | Additional Content Text Color | Additional content text size (in px) : colors of the link within the additional content, of the plain text, its size

Add-on Content Title Color | Additional Content Title Size (in px): The color of the titles within the Additional Content and their font size.

Additional Content Rounded Corners: Rounding radius of the add-on container contour

Additional Content > Embedded Content

Additional CSS Code: A text field where you can insert your custom stylesheet.

Recommendation > Button

Button Background Color | Rollover Button Background Color | Button Border Color | Rollover Button Border Color: The background and border color of the button contained within the recommended product cards in the normal state and rollover state.

Button border size (in px): The size of the card button border, not visible when set to zero

Full-width button: activate/deactivate the display mode of the button as wide as the entire card minus the internal padding

Padding above/below REC buttons | Right/left PADDING REC buttons: padding in pixels of the button inside the recommendation cards

Button Rounded Corners (in px): Rounding radius of the button outline

Button Text: Text that appears inside the card button

Button Text Color | Rollover Button Text Color | Button text size (in px): The color of the text inside the button in its normal state and on hover and its font size

Recommendation > Location & Size

Card Image Animation: Toggle Image Zoom on Hover

Card Background Color | Card Rollover Background Color | Card Border Color | Rollover card border color: The background color of the card containing the recommendation and its border in the normal state and on hover

Card Rollover Button Background | Card Rollover Button Color | Card Rollover Button Border: Background color of the button inside the card with the recommendation in the normal state and on hover and the corresponding border color.

Right Side Card Border Size (in px) | Top card edge size (in px) | Card bottom edge size (in px) | Card Left Side Border Size (in px): The size in pixels of the card container border line, when set to a value greater than or equal to 1

Card Side Margin (in px) | Card top_bottom margin (in px): Pixel margin of cards

Horizontal card padding (in px) | Vertical card padding (in px): padding in pixels of the cards

Show currency symbol before price: Show the currency symbol before or after the price of the product

Discount Label Background: Background color of the DISCOUNT label when applied on top of the card

Hide Image Discount Label: Show/Hide DISCOUNT Label Above Card

Discount Label Color: Text color of the DISCOUNT label above the card

Internal padding discount label (in px): internal padding of the DISCOUNT label in pixels

Discount Label on the Left | Top Discount Label: Placement at the top/bottom of the DISCOUNT label card

Horizontal Distance Discount Label (in px) | Vertical distance discount label (in px): offset from the top and/or bottom of the DISCOUNT label positioned on the card

Rounded corners of the DISCOUNT label: rounding of the corners of the DISCOUNT label in pixels

Discount label additional text: text on the inside of the DISCOUNT label

Hide additional text discount label: show/hide DISCOUNT label above the product card

Discount label text size (in px): The font size used for the discount label text

Brand Name Color | Brand name size (in px): The color and size of the font used for the brand name.

Border color between description and price: color separating the description and price on the card if the corresponding control “Hide border between description and price” is set to

Bar Color Original Price | Slanted bar original price | Original price bar size (in px): color and size of the bar placed above the starting price of the product, you can choose between a horizontal straight line or a slanted bar

Product description color | Product description size (in px): The color and size of the font used for the product description

Sale Price Color: Font color used for the final price net of discounts

Hide border between description and price | Border size between description and price (in px): show/hide the dividing line between description and price in the card and set its thickness in pixels

Maximum carousel image width (in px): maximum size of the images shown in the cards expressed in pixels

Product Name Color | Product name size (in px): The color and font size used for the product name

Starting Price Color: Font color used for the original price

Show Sale Price: Show /hide Sale Price

Size sale price (in px) | Original price size (in px): The size of the font used to show the sale price and starting price of the product

Brand Order | Order Product Name | Short description order: sort the position of the brand, product name, and description fields (from 1 to 3)

Order content in addition to the image | Image Order vs. Additional Content: Sorting the position of the image relative to the additional content and vice versa (values 1 and 2)

Hide REC Brands | Hide REC Description | Hide REC Image | Hide REC Name | Hide REC Pricing | Hide REC button: shows/hides the brand name, description, image, item name, prices, card button fields respectively

Original price above the sale price: shows/hides the original price above the sale price

Maximum side image height (in px): maximum height of the product image shown on the card