{"id":13129,"date":"2024-03-20T15:02:49","date_gmt":"2024-03-20T14:02:49","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/template-next-gallery-recommendations\/"},"modified":"2024-03-20T15:02:51","modified_gmt":"2024-03-20T14:02:51","slug":"template-next-gallery-recommendations","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/template-next-gallery-recommendations\/","title":{"rendered":"Template “NEXT GALLERY RECOMMENDATIONS”"},"content":{"rendered":"\n

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<\/a>.<\/p>\n

\n
\"Next<\/a><\/figure><\/div>\n

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. <\/p>\n\n

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.<\/p>\n\n

\"\"<\/a><\/figure>
\n

Gallery > Button<\/h3>\n\n\n\n

Scroll to previous page | Scroll to next page<\/strong>: In these fields, you can select the icons that will appear at the top of the grid to scroll the pages back and forth.<\/p>\n\n\n\n

Page Navigation Button Background | HOVER Page Navigation Button Background<\/strong>: Background color used in buttons to scroll back and forth pages shown at the top and respective color on hover.<\/p>\n\n\n\n

Text Color Navigation Icons | HOVER Navigation Icons Text Color: The<\/strong> color of the icons used in page scroll buttons.<\/p>\n\n\n\n

Navigation Icon Font Size: Font <\/strong>size used for navigation icons<\/p>\n\n\n\n

Right\/Left Padding, Navigation Buttons, and Page Numbers | Top\/bottom padding of navigation buttons and page numbers:<\/strong> padding on all four sides of all buttons, both those for scrolling pages and those containing page numbers<\/p>\n\n\n\n

<\/p>\n<\/div><\/div>\n\n

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

Active View Icon Background Color: Background<\/strong> color for the active grid\/list view icon<\/p>\n\n

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

List\/Grid Arrangement Icons Font Size: Font<\/strong> size used for list\/grid view icons<\/p>\n\n

Padding of List\/Grid Arrangement Icons: Side<\/strong> padding of icons used in list\/grid view buttons<\/p>\n\n

Rounded corners border of list\/grid layout icons<\/strong>: Rounding radius of the outline of list\/grid display icons<\/p>\n\n

Active View Icon Text Color: The<\/strong> font color used for list\/grid view icons for the currently active mode<\/p>\n\n

Hover view icon text: Font<\/strong> color used for list\/grid view icons on hover<\/p>\n\n

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

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

Pagination button rounded corners<\/strong>: Rounding radius of the outline of icons containing the page number<\/p>\n\n

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

Show\/Hide Page Scroll Controls: Show<\/strong> \/hide the buttons at the top of the gallery, containing forward and backward scroll icons.<\/p>\n\n

Show\/hide page numbers:<\/strong> Show or hide the page number display within the pagination buttons at the bottom, below the grid<\/p>\n\n

List View Card Alignment (si_sinistra, no_destra):<\/strong> 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.<\/p>\n\n

Gallery > More<\/h3>\n\n

Enable automatic page scrolling: Enable<\/strong> automatic page switching<\/p>\n\n

Gallery autoplay timeout: <\/strong>The time in milliseconds after which you move to the next page when automatic page switching is turned on<\/p>\n\n

Auto Return to Top on Scrolling:<\/strong> Enables\/disables the placement of the view automatically at the beginning of the card bin with products<\/p>\n\n

Gallery > Location & Size<\/h3>\n\n

Gallery Background | Gallery Border Color: Background<\/strong><\/strong> color and container border of our gallery<\/p>\n\n

Tunnel Edge Thickness: Thickness <\/strong>of the contour edge of the gallery container, put to zero to hide it<\/p>\n\n

Arrange Column Icon | Arrange in grid icon:<\/strong> choose the icons to be shown in the button that activates the grid\/list view<\/p>\n\n

Margin before and after the gallery (in px):<\/strong> margin in pixels to be left before and after the container of our gallery<\/p>\n\n

Maximum tunnel width in px: <\/strong>Maximum tunnel width in px<\/p>\n\n

Number of columns from mobile: <\/strong>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)<\/p>\n\n

Number of items per row | Number of rows: Number<\/strong> of columns and number of rows that will be shown for each page (total items per page<\/em>). In case the number of products extracted by the algorithm is less Total items per page<\/em> 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.<\/p>\n\n

Gallery Rounded Corners: Rounding <\/strong>radius of the edge of the gallery container when set to a value greater than or equal to 1<\/p>\n\n

\"\"<\/a><\/figure>\n\n

Additional content > Message Text<\/h3>\n\n

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

Additional Content Border Thickness: Thickness<\/strong> of the contour border of the additional content container, set to zero to hide it<\/p>\n\n

Hide Additional Content:<\/strong> Hides\/shows additional content, shown in the image above<\/p>\n\n

HTML additional content:<\/strong> HTML field where you can write the additional content you want to show before your gallery<\/p>\n\n

Margin before and after add-on (in px): <\/strong>Margin in pixels to leave before and after the add-on container<\/p>\n\n

Side Image | Hide Side Image | Left side image | Maximum side image width (in px):<\/strong> 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.<\/p>\n\n

Additional Content Link Color | Additional Content Text Color | Additional content text size (in px) :<\/strong> colors of the link within the additional content, of the plain text, its size<\/p>\n\n

Add-on Content Title Color | Additional Content Title Size (in px): The <\/strong>color of the titles within the Additional Content and their font size.<\/p>\n\n

Additional Content Rounded Corners: Rounding <\/strong>radius of the add-on container contour<\/p>\n\n

Additional Content > Embedded Content<\/h3>\n\n

Additional CSS Code: <\/strong>A text field where you can insert your custom stylesheet.<\/p>\n\n

Recommendation > Button<\/h3>\n\n

Button Background Color | Rollover Button Background Color | Button Border Color | Rollover Button Border Color: The <\/strong>background and border color of the button contained within the recommended product cards in the normal state and rollover state.<\/p>\n\n

Button border size (in px): The <\/strong>size of the card button border, not visible when set to zero<\/p>\n\n

Full-width button: <\/strong>activate\/deactivate the display mode of the button as wide as the entire card minus the internal padding<\/p>\n\n

Padding above\/below REC buttons | Right\/left PADDING REC buttons:<\/strong> padding in pixels of the button inside the recommendation cards<\/p>\n\n

Button Rounded Corners (in px): Rounding <\/strong>radius of the button outline<\/p>\n\n

Button Text: Text<\/strong> that appears inside the card button<\/p>\n\n

Button Text Color | Rollover Button Text Color | Button text size (in px): The<\/strong> color of the text inside the button in its normal state and on hover and its font size<\/p>\n\n

Recommendation > Location & Size<\/h3>\n\n

Card Image Animation: Toggle Image Zoom <\/strong>on Hover<\/p>\n\n

Card Background Color | Card Rollover Background Color | Card Border Color | Rollover card border color<\/strong>: The background color of the card containing the recommendation and its border in the normal state and on hover<\/p>\n\n

Card Rollover Button Background | Card Rollover Button Color<\/strong> | Card Rollover Button Border: Background<\/strong> color of the button inside the card with the recommendation in the normal state and on hover and the corresponding border color.<\/p>\n\n

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<\/strong> size in pixels of the card container border line, when set to a value greater than or equal to 1<\/p>\n\n

Card Side Margin (in px) | Card top_bottom margin (in px):<\/strong> Pixel margin of cards<\/p>\n\n

Horizontal card padding (in px) | Vertical card padding (in px): <\/strong>padding in pixels of the cards<\/p>\n\n

Show currency symbol before price:<\/strong> Show the currency symbol before or after the price of the product<\/p>\n\n

Discount Label Background: <\/strong>Background color of the DISCOUNT label when applied on top of the card<\/p>\n\n

Hide Image Discount Label: <\/strong>Show\/Hide DISCOUNT Label Above Card<\/p>\n\n

Discount Label Color:<\/strong> Text color of the DISCOUNT label above the card<\/p>\n\n

Internal padding discount label (in px):<\/strong> internal padding of the DISCOUNT label in pixels<\/p>\n\n

Discount Label on the Left | Top Discount Label: Placement<\/strong> at the top\/bottom of the DISCOUNT label card<\/p>\n\n

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

Rounded corners of the DISCOUNT label<\/strong>: rounding of the corners of the DISCOUNT label in pixels<\/p>\n\n

Discount label additional text: <\/strong>text on the inside of the DISCOUNT label<\/p>\n\n

Hide additional text discount label: <\/strong>show\/hide DISCOUNT label above the product card<\/p>\n\n

Discount label text size (in px): The <\/strong>font size used for the discount label text<\/p>\n\n

Brand Name Color | Brand name size (in px): The <\/strong>color and size of the font used for the brand name.<\/p>\n\n

Border color between description and price: <\/strong>color separating the description and price on the card if the corresponding control “Hide border between description and price” is set to<\/p>\n\n

Bar Color Original Price | Slanted bar original price | Original price bar size (in px): <\/strong>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<\/p>\n\n

Product description color | Product description size (in px): The<\/strong> color and size of the font used for the product description<\/p>\n\n

Sale Price Color: Font <\/strong>color used for the final price net of discounts<\/p>\n\n

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

Maximum carousel image width (in px):<\/strong> maximum size of the images shown in the cards expressed in pixels<\/p>\n\n

Product Name Color | Product name size (in px): The<\/strong> color and font size used for the product name<\/p>\n\n

Starting Price Color: Font<\/strong> color used for the original price<\/p>\n\n

Show Sale Price: Show <\/strong>\/hide Sale Price<\/p>\n\n

Size sale price (in px) | Original price size (in px): <\/strong>The size of the font used to show the sale price and starting price of the product<\/p>\n\n

Brand Order | Order Product Name | Short description order: <\/strong>sort the position of the brand, product name, and description fields (from 1 to 3)<\/p>\n\n

Order content in addition to the image | Image Order vs. Additional Content: <\/strong>Sorting the position of the image relative to the additional content and vice versa (values 1 and 2)<\/p>\n\n

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

Original price above the sale price:<\/strong> shows\/hides the original price above the sale price<\/p>\n\n

Maximum side image height (in px):<\/strong> maximum height of the product image shown on the card<\/p>\n

\n

Was this content useful?<\/strong><\/div><\/p>\n

Thanks for contributing!<\/p>\n

\nYes<\/a>\nNo<\/a>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[190],"class_list":["post-13129","article","type-article","status-publish","format-standard","hentry","article-category-template-en","article-tag-template-en"],"_links":{"self":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13129"}],"collection":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":3,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13129\/revisions"}],"predecessor-version":[{"id":13132,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13129\/revisions\/13132"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13129"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13129"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}