{"id":13114,"date":"2024-03-20T14:59:42","date_gmt":"2024-03-20T13:59:42","guid":{"rendered":"https:\/\/helpcenter.blendee.com\/article\/often-bought-together-template\/"},"modified":"2024-03-20T21:03:47","modified_gmt":"2024-03-20T20:03:47","slug":"often-bought-together-template","status":"publish","type":"article","link":"https:\/\/helpcenter.streamwise.it\/en\/article\/often-bought-together-template\/","title":{"rendered":"“OFTEN BOUGHT TOGETHER” template"},"content":{"rendered":"\n

The template Often bought together <\/strong>is a template for recommendations<\/em>, for the initial configuration of the recommendation please refer to the dedicated article how to configure a recommendation<\/a>.<\/p>\n\n

Tra gli algoritmi per la selezione dei prodotti da mostrare<\/a> nelle recommendation troviamo quello chiamato “Frequently Bought Together<\/em>“, per cui \u00e8 stato pensato questo template.<\/p>\n\n

It is possible to insert the product recommendations extracted according to this algorithm only in the Product Detail Page<\/em> (page type 103) as they refer to the contextual product displayed.<\/p>\n\n

The number of products needed to be purchased with the product in order for the algorithm to include them in the list of items often bought together<\/em> It is set to 5 by default, if you need to decrease or increase this value to better reflect the needs of your e-commerce, you can send an email to support to request the change.<\/p>\n\n

Please note that if there are no elements that match the requirements, the recommendation container will not be shown.<\/p>\n\n

The structure of the template varies depending on the CMS used: it will therefore be necessary to choose the template indicated for your e-commerce platform (Magento, Prestashop or Shopify) when configuring the message. The templates have been created and tested within the standard themes of the various CRMs and may not be compatible with all the themes available for CMS platforms, please contact Blendee support to request a feasibility of customization.<\/p>\n\n

Below we can see a preview of the result.<\/p>\n\n

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

Let’s move on to illustrate the elements that are customizable in the template in question.<\/p>\n\n

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

Layout -> Button<\/h3>\n\n\n\n

Rollover Button Border Color | Rollover Buttons Text Color | Rollover Button Background:<\/strong> customization of the border color, text, and background of the buttons within the hover recommendation (added to the cart of the individual and all selected products)<\/p>\n\n\n\n

Button Text Color |<\/strong> Button Border | Button background: <\/strong>text color, border, and button background<\/p>\n\n\n\n

Card button text:<\/strong> customization of the text string displayed in the add to cart button of the individual product<\/p>\n\n\n\n

Total Buy Button Text Size (in px) | Text size of card buttons (in px): <\/strong>size of the font used in the label of the add to cart buttons of the individual product and of all the selected ones.<\/p>\n<\/div><\/div>\n\n

Button Rounded Corners (in px) | Button border size (in px): Button<\/strong> border line thickness and rounding radius, in pixels<\/p>\n\n

Total Purchase Button Text: Customize<\/strong> the text string displayed in the add-to-cart button of all selected products<\/p>\n\n

Padding above below card buttons (in px) | Padding left right card buttons (in px) <\/strong>: padding in pixels of the buttons to add to the cart of the single product.<\/p>\n\n

Padding above below total purchase button (in px) | Padding left right button total purchase (in px)<\/strong> : padding in pixels of the add to cart button of all selected products.<\/p>\n\n

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

Hide short description product card | Hide Card Product Name | Hide Card Product Button | Hide card product quantity | Hide Image | Hide Product Card Price<\/strong>: Hides\/shows the various card components of the recommended product<\/p>\n\n

Card Roll Border Color | Product Card Border Color: Normal <\/strong>and hover card border color<\/p>\n\n

Price size (in px): The<\/strong> font size used for the product’s original price<\/p>\n\n

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

Color Sale\/Final Price | Original Price Color: Font<\/strong> color used for the price of the product, both discounted and starting<\/p>\n\n

Product Card Text Color | Product Card Rollover Text Color: The<\/strong> <\/strong>color of the font used in the product card<\/p>\n\n

Product padding card (in px): <\/strong>distance in pixels between the content and the edge of the card<\/p>\n\n

Maximum product card image width (in px):<\/strong> Maximum width in pixels of images <\/p>\n\n

Product card edge thickness (in px) | Product Card Rounded Corners (in px):<\/strong> Thickness of the edge of the cards containing the products and the rounding radius of the corners in pixels<\/p>\n\n

Maximum product card width (in px): <\/strong>maximum width of the cards in pixels, keep in mind the width of the images that must be inside this container<\/p>\n\n

“+” symbol color between cards:<\/strong> color of the + sign between cards<\/p>\n\n

Hide box notes:<\/strong> The box notes appear at the bottom of the product grid, and you can hide it<\/p>\n\n

Card Rollover Background Color | Product Card Background Color: The<\/strong> background color of the cards in the normal state and on hover<\/p>\n\n

Container Text Color: The <\/strong>font color used for the generic text of the outermost container<\/p>\n\n

Hide additional text:<\/strong> You can hide additional text that is visible at the bottom of the recommendation<\/p>\n\n

Discount label add-on text: Text<\/strong> of the label shown on the products with the discount<\/p>\n\n

Discount padding label (in px): <\/strong>padding of the label that indicates the discount on a product<\/p>\n\n

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

Discount label rounded corners: <\/strong>Rounding radius of the edge of the discount label<\/p>\n\n

Discount Label Background Color | Discount label text color:<\/strong> The color of the discount label and the text within it<\/p>\n\n

Hide text before cards:<\/strong> hides the text placed before the grid of recommended products<\/p>\n\n

Rollover Image Animation: Enables<\/strong> and disables product image animation on hover<\/p>\n\n

Text indicating the product being viewed<\/strong>: a string of text that highlights the first product shown among the recommendations, which is the product on the product detail page we are viewing<\/p>\n\n

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

Margin of the “+” symbol between the cards: <\/strong>lateral distance of the + symbol from the cards, vertically it is automatically centered<\/p>\n\n

“+” symbol size between cards: Font<\/strong> size used for the + symbol<\/p>\n\n

Container border color | Container Background Color: Color<\/strong> settings of the main container<\/p>\n\n

Rounded corners of container (in px) | Container border size (in px):<\/strong> Setting the size of the main container border and rounding radius at the corners<\/p>\n\n

Maximum container width (in px) | Margin before and after the container (in px) | Container padding (in px):<\/strong> width occupied by the main container on the page, in pixels, vertical positioning indicated by the margin relative to the previous and next elements, and padding of the container<\/p>\n\n

Hide Quantity Reset Button: <\/strong>it is possible to hide the button with the arrow that resets the value of the quantity of objects entered<\/p>\n\n

Total Price Color: Font<\/strong> color used to indicate the price given by the sum of the cost of all the products selected from those offered<\/p>\n\n

Text size total price (in px) | Total price label text size (in px): Font<\/strong> size used for the total price and its label<\/p>\n\n

Hide discount label:<\/strong> You can hide the discount label<\/p>\n\n

Number of columns of the products displayed:<\/strong> you can choose the number of columns used to form the grid that will host the cards with the extracted products. The number of products and therefore the number of rows shown will vary depending on the number of products often bought together with <\/em>the product we are viewing. Such a recommendation may also have no products, in which case the main container will be hidden.<\/p>\n\n

Layout -> Message Text<\/h3>\n\n

Notes Icon | Hide notes icon:<\/strong> You can select a custom icon to show next to your notes and hide it<\/p>\n\n

Label before total price: Text <\/strong>displayed before the total amount of all selected products<\/p>\n\n

Notes Text Before Total: Text <\/strong>to be displayed in notes in HTML format<\/p>\n\n

Total Price Label Color: The<\/strong> font color used for the total label<\/p>\n\n

Additional CSS: <\/strong>We can insert custom CSS code (insert valid CSS code).<\/strong><\/p>\n\n

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

Text before cards: Text<\/strong> displayed before the grid with recommended products<\/p>\n\n

Hide loader:<\/strong> you can hide the animation when loading products<\/p>\n\n

Loader Icon Color | Loader Background Color | Loader Icon Size: Color <\/strong>, background, and size of the icon used in the animation on load<\/p>\n\n

<\/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":"

The template Often bought together is a template for recommendations, for the initial configuration of the recommendation please refer to the dedicated article how to configure a recommendation. Tra gli algoritmi per la selezione dei prodotti da mostrare nelle recommendation troviamo quello chiamato “Frequently Bought Together“, per cui \u00e8 stato pensato questo template. It is […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","format":"standard","article-category":[563],"article-tag":[569,190],"class_list":["post-13114","article","type-article","status-publish","format-standard","hentry","article-category-template-en","article-tag-frequently-bought-together-en","article-tag-template-en"],"_links":{"self":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13114"}],"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":4,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13114\/revisions"}],"predecessor-version":[{"id":14159,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article\/13114\/revisions\/14159"}],"wp:attachment":[{"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/media?parent=13114"}],"wp:term":[{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-category?post=13114"},{"taxonomy":"article-tag","embeddable":true,"href":"https:\/\/helpcenter.streamwise.it\/en\/wp-json\/wp\/v2\/article-tag?post=13114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}