{"id":13151,"date":"2024-03-20T15:06:27","date_gmt":"2024-03-20T14:06:27","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/next-side-panel-recommendations-and-next-side-panel-templates\/"},"modified":"2024-03-20T15:06:27","modified_gmt":"2024-03-20T14:06:27","slug":"next-side-panel-recommendations-and-next-side-panel-templates","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/next-side-panel-recommendations-and-next-side-panel-templates\/","title":{"rendered":"“NEXT SIDE PANEL RECOMMENDATIONS” and “NEXT SIDE PANEL” templates"},"content":{"rendered":"\n

We’re going to explain how every single key in this template works.For the initial configuration of the behavioural message, please refer to the dedicated article how to configure a behavioural message<\/a>.<\/p>\n\n

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

SIDEPANEL > Message Text<\/h2>\n\n\n\n

Label Text Color<\/strong> is the text color of the opening label.<\/p>\n\n\n\n

Text color<\/strong> is the text color for the additional HTML content.<\/p>\n\n\n\n

Label Title<\/p>\n\n\n\n

Hover Link Color<\/strong> : Enter the color of the links for the additional text content.<\/p>\n\n\n\n

HTML content<\/strong> : Enter the text content you want to display.<\/p>\n\n\n\n

Title font<\/strong> : Title size indicated in px.<\/p>\n\n\n\n

Title Color<\/strong> : We set the color for H1 titles only.<\/p>\n\n\n\n

Featured Image Link<\/strong> : Enter the url for the link of the featured image.<\/p>\n\n\n\n

Hide Text<\/strong> : We can decide whether to hide the entire additional content block.<\/p>\n\n\n\n

SIDEPANEL > More<\/h2>\n\n\n\n

Label Background Color | Outer Label Border | Outer Label Border Color | Icon on external label | External label border size (in px)<\/strong> external label customizations.<\/p>\n\n\n\n

General padding (in px): The<\/strong> distance between the edge of the container and the contents.<\/p>\n\n\n\n

Image Height (in px)<\/strong> sets the size of the featured image.<\/p>\n\n\n\n

Box border size (in px) | Box Border Color<\/strong> sets the thickness and color of the outer border.<\/p>\n\n\n\n

Rounded Corners box (in px)<\/strong> configures the rounded corners of the div where featured image and content are inserted.<\/p>\n\n\n\n

Background color<\/strong> : We set the background color of the content.<\/p>\n\n\n\n

Show featured image<\/strong> : We can decide whether to show or hide the image next to the text content.<\/p>\n\n\n\n

Featured image<\/strong> : we select the image to be displayed next to the content through the media gallery.<\/p>\n\n\n\n

Container Shadow<\/strong> toggles the drop shadow of the content.<\/p>\n\n\n\n

Additional CSS code<\/strong> : we can insert custom <\/i> CSS code WARNING: insert valid CSS code.<\/strong><\/p>\n\n\n\n

Animation: External label icon<\/strong> : If I activate, the icon rotates 180\u00b0 each time the window opens or closes.<\/p>\n\n\n\n

SIDEPANEL > Location & Size<\/h2>\n\n\n\n

Show Featured Image from Mobile<\/strong> We can decide to hide the featured image from mobile.<\/p>\n\n\n\n

Content Margin<\/strong> : We set the distance between text, form, and rec content.<\/p>\n\n\n\n

Maximum content size<\/strong> : we set the maximum width (in px) of the box where forms, contents and rec are inserted.<\/p>\n\n\n\n

Full-height sidepanel<\/strong> when set to yes, the sidepanel takes up the full height of the viewport.<\/p>\n\n\n\n

Rounded corners of the outer label (in px):<\/strong> we set the rounded corners of the outer label.<\/p>\n\n\n\n

Sidepanel top\/bottom start (in px):<\/strong> We set the distance of the sidepanel from the bottom or top edge (depending on the chosen position) of the viewport.<\/p>\n\n\n\n

Image Highlight Top\/Bottom on Mobile<\/strong> forces the position of the image before or after the content for mobile resolutions.<\/p>\n\n\n\n

Horizontal sidepanel position (yes = left | no = right) | Vertical Position Sidepanel (Yes = Top | No = Bottom<\/strong>): Set the position relative to the viewport.<\/p>\n\n\n\n

Sideways Highlight Image (Yes = Left\/Right | No = Top\/Bottom) | Highlight image at the top (only if “Image positioned sideways” = no) | Highlight image on the left (only if “Image positioned laterally” = yes)<\/strong> we configure the position of the featured image.<\/p>\n\n\n\n

Alt Featured Image<\/strong> : Insert alt text for the featured image.<\/p>\n\n\n\n

Z_index Sidepanel<\/strong> we set a z-index to place the message above our website.<\/p>\n\n\n\n

Left and right padding of the outer label text (in px) | Padding before and after the outer label text (in px)<\/strong> we set the inner margin of the outer vertical label.<\/p>\n\n\n\n

SIDEPANEL > Content recommendation<\/h2>\n\n\n\n

Brand name size (in px) | Original price size (in px) | Size sale price (in px) | Product Name Size (in px) | Product description size (in px):<\/strong> set the size of the texts inside the card.<\/p>\n\n\n\n

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

Order short description | Brand Order | Order Product Name | Image Order | Price order<\/strong> we can decide the order of each item, the higher the value the sooner it will be entered.<\/p>\n\n\n\n

REC Title<\/strong> : Enter the text to be shown in the title before the rec.<\/p>\n\n\n\n

Show REC before content<\/strong> : if set to “yes” the box with the REC will be displayed first and then below the content.<\/p>\n\n\n\n

REC Button Text <\/strong>: We set the button text on the rec card.<\/p>\n\n\n\n

REC Image Animation<\/strong> : We can enable or disable image magnification for hover status on the REC cards.<\/p>\n\n\n\n

Hide REC:<\/strong> We can hide the entire rec box.<\/p>\n\n\n\n

REC separator thickness (in px) | REC Separator Color<\/strong> : Customize the bar that separates the rec from the content.<\/p>\n\n\n\n

Hide REC Title | Hide REC Brands | Hide REC Name | Hide REC Description | Hide REC Image | Hide REC Pricing | Hide REC button:<\/strong> we can decide to hide or show the individual elements of the cards.<\/p>\n\n\n\n

Full-width button<\/strong> : We can set the buy button on full-width cards.<\/p>\n\n\n\n

Original price slanted bar<\/strong> is used to set the parallel or oblique bar to the original price.<\/p>\n\n\n\n

Original Price Bar Color<\/strong> sets the bar color to the original price.<\/p>\n\n\n\n

Maximum Product Image Height (in px):<\/strong> We set the maximum height for card images.<\/p>\n\n\n\n

Product Name Color | Product description color | Original price | Color Reduced Price | Brand name color<\/strong> : we customize the colors of the texts on the cards.<\/p>\n<\/div>\n<\/div>\n\n

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

FORMS AND BUTTONS > Position and size<\/h2>\n\n\n\n

Show Form:<\/strong> We can hide the form if we want.<\/p>\n\n\n\n

Margin between form contents<\/strong> sets the distance between the form and the text contents (in px).<\/p>\n\n\n\n

Title: Label form: in bold:<\/strong> we can set bold on the labels of the form.<\/p>\n\n\n\n

Form Input Background Color | Form Input Border Color | Color checkbox\/radio form | Label form color | Form background color <\/strong>: Set the colors of the form elements.<\/p>\n\n\n\n

Round Corners Form (in px) | Padding forms (in px if background is active)<\/strong> are activated only if the background of the form is visible.<\/p>\n\n\n\n

We<\/strong> can decide whether or not to show the background of the form.<\/p>\n\n\n\n

FORMS & BUTTONS > Button<\/h2>\n\n\n\n

Button Background Color | Pulsed Text Color | Rollover Pulsed Text Color | Button Background | Rollover Buttons Background | Button Text Size (in px) \\ Rounded Corners of Buttons (in px) | Rollover Button Border Color | Button Border Color | Button Border Size | Button side padding (in px) | Padding above\/below button (in px)<\/strong> Let’s customize the form 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 behavioural message, please refer to the dedicated article how to configure a behavioural message. SIDEPANEL > Message Text Label Text Color is the text color of the opening label. Text color is the text color for the additional […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[190],"class_list":["post-13151","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\/13151"}],"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\/13151\/revisions"}],"predecessor-version":[{"id":13152,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13151\/revisions\/13152"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13151"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13151"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}