{"id":13136,"date":"2024-03-20T15:03:47","date_gmt":"2024-03-20T14:03:47","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/templates-next-picture-in-picture-and-next-picture-in-picture-recommendations\/"},"modified":"2024-03-20T15:03:47","modified_gmt":"2024-03-20T14:03:47","slug":"templates-next-picture-in-picture-and-next-picture-in-picture-recommendations","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/templates-next-picture-in-picture-and-next-picture-in-picture-recommendations\/","title":{"rendered":"Templates “NEXT PICTURE IN PICTURE” and “NEXT PICTURE IN PICTURE 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 create a recommendation<\/a>.<\/p>\n\n

The template activates an animation of the page that resizes its content and arranges it in one of the four corners of the window and, in the space obtained, shows the recommendations produced if set. It is inspired by the television advertising layout called picture-in-picture. <\/p>\n\n

There are two versions of this template available for behavioral messages, both with the option to insert recommendations inside and without, which only shows a background image.<\/p>\n\n

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

Layout -> Recommendation Content<\/h3>\n\n\n\n

REC Button Edge Radius: Rounding radius<\/strong> of the button containing the card link<\/p>\n\n\n\n

REC Button Text Color: The<\/strong> color of the text inside the button containing the card link<\/p>\n\n\n\n

REC content padding (px):<\/strong> The space between the contents of the rec and the box that contains it in pixels.<\/p>\n\n\n\n

REC button padding:<\/strong> space between the content of the button and the box that contains it in pixels.<\/p>\n\n\n\n

REC Button Text: Text<\/strong> contained in the body of the button<\/p>\n\n\n\n

Left\/Right Card REC margin: <\/strong>Outer space from the container in pixels, from the left and right.<\/p>\n\n\n\n

Top\/Bottom Card REC Margin:<\/strong> Outer space from the container in pixels, top, and bottom.<\/p>\n\n\n\n

Padding Left\/Right Card REC: <\/strong>space between the content and the box that contains the recommendation in pixels, from left to right.<\/p>\n<\/div>\n<\/div>\n\n

Padding Top\/Bottom Card REC:<\/strong> space between the content and the box that contains the recommendation in pixels, from the top and bottom.<\/p>\n\n

Card border size: <\/strong>size of the card border bounding line<\/p>\n\n

REC Card Width (%):<\/strong> Percentage width of the card containing the product<\/p>\n\n

Price padding (REC in row):<\/strong> distance between the price and its container, in the case of recommendations arranged in a row (if selected Yes<\/em> on Position and dimensions – REC row (yes) _ REC column (no)<\/em>)<\/p>\n\n

REC Container Background Color: The<\/strong> background color of the card containing the recommendation.<\/p>\n\n

Original Price Bar Color: Price<\/strong> Cut Bar Color <\/p>\n\n

Original price bar size (in px):<\/strong> thickness of the price cut bar<\/p>\n\n

Sale Price Color: Color <\/strong>of the price net of discounts<\/p>\n\n

Hide image discount label: <\/strong>show or hide the “discount” label above the card<\/p>\n\n

Original Price Slanted Bar: <\/strong>You can tilt the price cut bar or leave it horizontal<\/p>\n\n

Sale price size (in px): Font<\/strong> size used for the price minus discounts<\/p>\n\n

Hover Card Background Color: Hover <\/strong>card background color<\/p>\n\n

Hover Card Border Color: Hover<\/strong> card border line color<\/p>\n\n

REC hover button background color:<\/strong> Background color of the product button on hover<\/p>\n\n

Card Text Size: Font <\/strong>size used in product cards<\/p>\n\n

Image size in REC (px): Size<\/strong> in pixels of product images<\/p>\n\n

REC Card Background Color:<\/strong> The background color of the product card<\/p>\n\n

REC Button Background Color: The<\/strong> background color of the product button<\/p>\n\n

REC Button Top Margin: Space <\/strong>from the top of the button container, in pixels<\/p>\n\n

REC Promo Price Top Margin: Space <\/strong>from the top of the sale price container, in pixels<\/p>\n\n

Top Margin Starting Price REC: Space<\/strong> from the top of the original price container, in pixels<\/p>\n\n

REC Promo Price Color:<\/strong> Color of the product’s discounted price<\/p>\n\n

REC Starting Price Color: The<\/strong> color of the product’s starting price<\/p>\n\n

REC Product Description Color: Font<\/strong> color of the product description<\/p>\n\n

Top margin REC description:<\/strong> space from the top of the product description container<\/p>\n\n

REC hover button lettering color:<\/strong> hover button text font color<\/p>\n\n

Layout -> Location & Size<\/h2>\n\n

Row REC (yes) _ Column REC (no):<\/strong> if selected YES<\/strong> The products appear arranged by row, the position of which can be chosen from up<\/span> and down<\/span> from the field REC Position: High (Yes), Low (No)<\/em>; Otherwise, if you select NO<\/strong> The products are shown in a column that can be on the right or left of the screen, this position can be chosen by acting on the field below.<\/p>\n\n

REC position:<\/strong> right(yes), left(off)<\/strong>: if YES<\/strong> is selected, the products are displayed on the right side of the screen; If NO is selected ,<\/strong> the products are displayed on the left side of the screen. All this only if we have chosen the column view in the home box.<\/p>\n\n

REC position: high (yes), low (no):<\/strong> If YES<\/strong> is selected, the products are shown at the top, otherwise with NO<\/strong> they are displayed at the bottom. This option only works if we have selected the in-row view in the first box.<\/p>\n\n

Background image: <\/strong>by default, a color is shown in the background that can be set in the following point; If you want to display a background image here, you can upload it<\/p>\n\n

Background color: The<\/strong> background color below the resized page container and the recommendation row or column<\/p>\n\n

Layout -> Button<\/h2>\n\n
\"\"<\/a>
Swipe icon highlighted in red, available for recommendations arranged in a row.<\/figcaption><\/figure>\n\n

SWIPE icon background color: <\/strong> background color of the icon used to scroll left and right through recommendations, active only in the case of in-line display.<\/p>\n\n

Hide SWIPE icon:<\/strong> Hide\/show swipe icon visible in the image above, highlighted in red. This icon is only available for displaying in-line recommendations.<\/p>\n\n

Close button icon color: The<\/strong> color of the close button icon <\/p>\n\n

Close Button Rollover Color: Hover<\/strong> color of the Close button icon<\/p>\n\n

Close button background rollover color: The <\/strong>color of the button background to close hover recommendations.<\/p>\n\n

Square Latch Button Shape (YES: Square _ NO:Circle)<\/strong>: Square or Round Latch Button Shape<\/p>\n\n

Close button icon:<\/strong> Close button icon, default X<\/p>\n\n

Close button size (in px):<\/strong> The size of the font used for the close button icon<\/p>\n\n

Close button background color: <\/strong>The background color of the Close button<\/p>\n\n

REC card border color:<\/strong> color of the line that delimits the cards containing the recommendations<\/p>\n\n

SWIPE Icon Color: The<\/strong> font color used for the Swipe icon<\/p>\n\n

Layout -> More<\/h2>\n\n

Timer:<\/strong> In this field, you can set how long it takes for the animation to be activated after uploading.<\/p>\n\n

Layout -> Embedded Content<\/h2>\n\n

Add Custom CSS: A<\/strong> text field where you can insert your custom stylesheet.<\/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 create a recommendation. The template activates an animation of the page that resizes its content and arranges it in one of the four corners of the window and, in the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[190],"class_list":["post-13136","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\/13136"}],"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":1,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13136\/revisions"}],"predecessor-version":[{"id":13137,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13136\/revisions\/13137"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13136"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13136"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}