{"id":13139,"date":"2024-03-20T15:05:20","date_gmt":"2024-03-20T14:05:20","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/templates-next-horizontal-carousel-recommendations-and-next-vertical-carousel-recommendations\/"},"modified":"2024-03-20T15:05:22","modified_gmt":"2024-03-20T14:05:22","slug":"templates-next-horizontal-carousel-recommendations-and-next-vertical-carousel-recommendations","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/templates-next-horizontal-carousel-recommendations-and-next-vertical-carousel-recommendations\/","title":{"rendered":"Templates “NEXT HORIZONTAL CAROUSEL RECOMMENDATIONS”, and “NEXT VERTICAL CAROUSEL RECOMMENDATIONS”"},"content":{"rendered":"\n

We’re going to explain how every single key in this template works.For the Initial configuration of the Recommendations, please refer to the dedicated article how to create a recommendation<\/a>.<\/p>\n\n

The only difference between the “Vertical” and the “Horizontal” is the direction of scrolling of the RECs, otherwise at the level of keys and settings they are the same.<\/p>\n\n

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

CAROUSEL > More<\/h3>\n\n\n\n

Left Arrow Carousel | Right arrow carousel<\/strong> we can select the icons for the carousel arrows.<\/p>\n\n\n\n

Carousel _ padding between elements (in px)<\/strong> is the distance between the elements of the carousel, the higher the value the greater the spacing.Carousel _ animation timeout<\/strong> is the interval between one automatic animation and another.<\/p>\n\n\n\n

Carousel _ autoplay pause rollover<\/strong> we can activate the pause of the carousel when the cursor is over it.<\/p>\n\n\n\n

Carousel _ autoplay<\/strong> toggles the automatic carousel animation on and off.<\/p>\n\n\n\n

Carousel _ animation speed<\/strong> (in milliseconds) the higher the value, the slower the animation will be<\/p>\n\n\n\n

Carousel controls grouped to the left (only if centered set to off)<\/strong> puts all controls grouped to the left.<\/p>\n\n\n\n

Central carousel controls<\/strong> puts buttons and bullets all central.<\/p>\n\n\n\n

Hide Carousel Controls<\/strong> hides the left and right arrows.<\/p>\n\n\n\n

Hide carousel nav<\/strong> hides pagination bullets.<\/p>\n\n\n\n

Activate drag mouse carousel<\/strong> We can activate or deactivate the drag of the carousel with the mouse.<\/p>\n\n\n\n

Carousel Number of Desktop Visible Items | Carousel Number of Tablet Visible Items | Carousel number of mobile visible items <\/strong>for each device, we can decide how many items will be visible on each page of the carousel.<\/p>\n\n\n\n

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

Carousel Border Thickness | Carousel Border Color | Carousel Wallpaper | Carousel Rounded Corners | Margin before and after the carousel (in px) | Maximum carousel width (in px)<\/strong> Carousel container customizations.<\/p>\n\n\n\n

Color Bullet Border Carousel Rollover | Bullet carousel rollover background color | Color Bullet Carousel Border | Active Bullet Carousel Border Color | Bullet carousel edge thickness (in px) | Active Carousel Bullet Background Color | Bullet carousel size (in px) | Bullet carousel background color<\/strong> Customization of bullets (dots) for the pagination of the carousel.<\/p>\n\n\n\n

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

Background Color Rollover Carousel Controls | Rollover Carousel Controls Icon Color | Rollover Carousel Controls Border Color | Horizontal padding of carousel controls (in px) | Carousel Controls Border Color | Carousel Controls Icon Size (in px) | Vertical padding of carousel controls (in px) | Carousel Control Border Thickness (in px) | Carousel Controls Icon Color | Rounded corners of carousel controls (in px) | Carousel Controls Background Color <\/strong>Button customizations for scrolling through carousel elements.<\/p>\n\n\n\n

Carousel Controls on the Sides<\/strong> inserts arrows on either side of the carousel, one on the left and one on the right, centered vertically to the content.<\/p>\n<\/div>\n<\/div>\n\n

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

LAYOUT > Recommendation content<\/h3>\n\n\n\n

Order Product Name<\/strong> | Brand Order<\/strong> | Image Order<\/strong> | Order short description<\/strong> | We<\/strong> can decide the order of each item, the higher the value and the sooner it will be entered.Original price above the sale price<\/strong> : We set whether the sale price should be next to the price or above.<\/p>\n\n\n\n

Show currency symbol before price <\/strong>if set to “yes” shows the currency before the price, otherwise it inserts it after.<\/p>\n\n\n\n

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

Hide Additional Text Discount Label<\/strong> | Discount Label on the Left<\/strong> | Discount Label at the top<\/strong> | Rounded Corners Discount Label<\/strong> | Discount label text size (in px)<\/strong> | Discount Color Label<\/strong> | Vertical Distance Discount Label (in px)<\/strong> | Horizontal Distance Discount Label (in px)<\/strong> | Discount label internal padding (in px)<\/strong> | Additional Text Discount Label<\/strong> | Discount label background<\/strong> : these parameters are used to customize the discount label.<\/p>\n\n\n\n

Brand name size (in px)<\/strong> | Brand Name Color<\/strong> | Color Reduced Price<\/strong> | Original price<\/strong> | Product description<\/strong> color | Product Name Color<\/strong> | Product description size (in px)<\/strong> | Product Name Size (in px)<\/strong> | Maximum carousel image height (in px)<\/strong> | Bar size original price (in px)<\/strong> | Bar Color Original Price<\/strong> | Size sale price (in px)<\/strong> | Original price size (in px)<\/strong> we set the colors and size of the text content of the cards.<\/p>\n\n\n\n

Original Price Slanted Bar<\/strong> : If set to “Yes”, the bar on the sale price will be oblique, otherwise it will be straight.<\/p>\n\n\n\n

Card Rollover Button Color | Card Rollover Button Border | Card Rollover Button Background |Card Roll Border Color | Card Rollover Background Color | Card Border Color | Card Background Color | Vertical card padding (in px) | Horizontal card padding (in px) | Right Side Card Border Size (in px) | Left side card border size (in px) | Card bottom edge size (in px) | Top card edge size (in px)<\/strong> customizations of individual cards.<\/p>\n\n\n\n

Card Image Animation<\/strong> toggles the image zoom on or off when the mouse hovers over the card.<\/p>\n\n\n\n

Hide Image Discount Label<\/strong> | Hide REC Button<\/strong> | Hide REC Pricing<\/strong> | Hide REC Image<\/strong> | Hide REC Description<\/strong> | Hide REC Name<\/strong> | Hide REC brand:<\/strong> we can hide the elements of the card that we want.<\/p>\n\n\n\n

LAYOUT > Message Text<\/h3>\n\n\n\n

Additional Content Edge Thickness | Additional Content Border Color | Add-on Content Background | Rounded Corners Additional Content | Margin before and after the add-on content (in px):<\/strong> box customizations for the add-on.<\/p>\n\n\n\n

Hide additional content<\/strong> : If set to “yes”, all text and image content before the carousel will be hidden.<\/p>\n\n\n\n

Maximum add-on width (in px):<\/strong> We can set a maximum width for the add-on box.<\/p>\n\n\n\n

HTML additional content<\/strong> : we insert and customize the additional text content to be inserted.<\/p>\n\n\n\n

Side image on the left<\/strong> : if set to “yes” the image will be placed on the left, otherwise it will be placed on the right.<\/p>\n\n\n\n

Side Image | Maximum side image width (in px) <\/strong>We select the image from the media gallery and set the size.<\/p>\n\n\n\n

Additional Content Link Color | Additional Content Text Color | Add-on Content Title Color | Additional Content Title Size (in px) | Text size: Additional content (in px): Size<\/strong> and colors for additional text.<\/p>\n\n\n\n

Hide side image<\/strong> : if set to “yes” the image will not be visible.<\/p>\n\n\n\n

LAYOUT > More<\/h3>\n\n\n\n

Additional CSS code<\/strong> : we can add CSS code to our carousel.<\/p>\n<\/div>\n<\/div>\n\n

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

BUTTONS > Button<\/h3>\n\n\n\n

Button Rounded Corners (in px)<\/strong> We set the rounded corners of the buttons.<\/p>\n\n\n\n

Full-width button:<\/strong> The card button will take the full width available.<\/p>\n\n\n\n

Rollover Button Background Color | Rollover Button Text Color | Rollover Button Border Color | Button Border Color | Button Text Color | Button Background Color<\/strong> : We configure the color of the buttons for the rollover state as well.<\/p>\n\n\n\n

Button text size (in px) | Padding above\/below button (in px) | Button side padding (in px) | Button border size (in px):<\/strong> We set button and text sizes.<\/p>\n\n\n\n

Button Text<\/strong> : We enter the text to be displayed inside the button.<\/p>\n<\/div>\n<\/div>\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 the Recommendations, please refer to the dedicated article how to create a recommendation. The only difference between the “Vertical” and the “Horizontal” is the direction of scrolling of the RECs, otherwise at the level of keys and settings they […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[190],"class_list":["post-13139","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\/13139"}],"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\/13139\/revisions"}],"predecessor-version":[{"id":13142,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13139\/revisions\/13142"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13139"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13139"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}