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 è stato pensato questo template.

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

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 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.

Please note that if there are no elements that match the requirements, the recommendation container will not be shown.

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.

Below we can see a preview of the result.

Let’s move on to illustrate the elements that are customizable in the template in question.

Button Rounded Corners (in px) | Button border size (in px): Button border line thickness and rounding radius, in pixels

Total Purchase Button Text: Customize the text string displayed in the add-to-cart button of all selected products

Padding above below card buttons (in px) | Padding left right card buttons (in px) : padding in pixels of the buttons to add to the cart of the single product.

Padding above below total purchase button (in px) | Padding left right button total purchase (in px) : padding in pixels of the add to cart button of all selected products.

Layout -> Recommendation Content

Hide short description product card | Hide Card Product Name | Hide Card Product Button | Hide card product quantity | Hide Image | Hide Product Card Price: Hides/shows the various card components of the recommended product

Card Roll Border Color | Product Card Border Color: Normal and hover card border color

Price size (in px): The font size used for the product’s original price

Original Price Bar Color: Product Price Cut Bar Color

Color Sale/Final Price | Original Price Color: Font color used for the price of the product, both discounted and starting

Product Card Text Color | Product Card Rollover Text Color: The color of the font used in the product card

Product padding card (in px): distance in pixels between the content and the edge of the card

Maximum product card image width (in px): Maximum width in pixels of images

Product card edge thickness (in px) | Product Card Rounded Corners (in px): Thickness of the edge of the cards containing the products and the rounding radius of the corners in pixels

Maximum product card width (in px): maximum width of the cards in pixels, keep in mind the width of the images that must be inside this container

“+” symbol color between cards: color of the + sign between cards

Hide box notes: The box notes appear at the bottom of the product grid, and you can hide it

Card Rollover Background Color | Product Card Background Color: The background color of the cards in the normal state and on hover

Container Text Color: The font color used for the generic text of the outermost container

Hide additional text: You can hide additional text that is visible at the bottom of the recommendation

Discount label add-on text: Text of the label shown on the products with the discount

Discount padding label (in px): padding of the label that indicates the discount on a product

Discount label text size (in px): The size of the font used in the discount label

Discount label rounded corners: Rounding radius of the edge of the discount label

Discount Label Background Color | Discount label text color: The color of the discount label and the text within it

Hide text before cards: hides the text placed before the grid of recommended products

Rollover Image Animation: Enables and disables product image animation on hover

Text indicating the product being viewed: 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

Layout -> Location & Size

Margin of the “+” symbol between the cards: lateral distance of the + symbol from the cards, vertically it is automatically centered

“+” symbol size between cards: Font size used for the + symbol

Container border color | Container Background Color: Color settings of the main container

Rounded corners of container (in px) | Container border size (in px): Setting the size of the main container border and rounding radius at the corners

Maximum container width (in px) | Margin before and after the container (in px) | Container padding (in px): 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

Hide Quantity Reset Button: it is possible to hide the button with the arrow that resets the value of the quantity of objects entered

Total Price Color: Font color used to indicate the price given by the sum of the cost of all the products selected from those offered

Text size total price (in px) | Total price label text size (in px): Font size used for the total price and its label

Hide discount label: You can hide the discount label

Number of columns of the products displayed: 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 the product we are viewing. Such a recommendation may also have no products, in which case the main container will be hidden.

Layout -> Message Text

Notes Icon | Hide notes icon: You can select a custom icon to show next to your notes and hide it

Label before total price: Text displayed before the total amount of all selected products

Notes Text Before Total: Text to be displayed in notes in HTML format

Total Price Label Color: The font color used for the total label

Additional CSS: We can insert custom CSS code (insert valid CSS code).

Layout -> More

Text before cards: Text displayed before the grid with recommended products

Hide loader: you can hide the animation when loading products

Loader Icon Color | Loader Background Color | Loader Icon Size: Color , background, and size of the icon used in the animation on load