Il template Spesso comprati insieme è un template per le recommendation, per la configurazione iniziale della raccomandazione si rimanda all’articolo dedicato come configurare una 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.

E’ possibile inserire le raccomandazioni prodotto estratte secondo questo algoritmo solo nella pagina Product Detail Page (page type 103) in quanto fanno riferimento al prodotto contestuale visualizzato.

Il numero di prodotti necessari da acquistare col prodotto affinché l’algoritmo li inserisca nella lista degli articoli spesso comprati insieme è impostato di default a 5, qualora fosse necessario decrementare o incrementare tale valore per rispecchiare maggiormente le esigenze del proprio e-commerce, è possibile inviare una mail al supporto per richiederne la modifica.

Si ricorda che, se non fossero presenti elementi che corrispondono ai requisiti, il contenitore della recommendation non verrà mostrato.

La struttura del template varia a seconda del CMS utilizzato: sarà quindi necessario al momento della configurazione del messaggio scegliere il template indicato per la propria piattaforma di e-commerce (Magento, Prestashop o Shopify). I template sono stati creati e testati all’interno dei temi standard dei vari CRM e potrebbero non essere compatibili con tutti i temi disponibili per le piattaforme CMS, contattare il supporto Blendee per richiedere una fattibilità di personalizzazione.

Sotto possiamo vedere una preview del risultato.

Passiamo ad illustrare gli elementi che sono personalizzabili nel template in oggetto.

Angoli arrotondati pulsanti (in px) | Dimensione bordo pulsanti (in px): spessore della linea del bordo dei pulsanti e raggio di arrotondamento, espresso in pixel

Testo pulsante acquisto totale: personalizzazione della stringa di testo visualizzata nel pulsante di aggiunta al carrello di tutti i prodotti selezionati

Padding sopra sotto pulsanti card (in px) | Padding sinistra destra pulsanti card (in px) : padding in pixel dei pulsanti di aggiunta al carrello del singolo prodotto.

Padding sopra sotto pulsante acquisto totale (in px) | Padding sinistra destra pulsante acquisto totale (in px) : padding in pixel del pulsante di aggiunta al carrello di tutti i prodotti selezionati.

Layout -> Contenuto recommendation

Nascondi descrizione breve prodotto card | Nascondi nome prodotto card | Nascondi pulsante prodotto card | Nascondi quantita’ prodotto card | Nascondi immagine | Nascondi prezzo card prodotto: nasconde / mostra le varie componenti della card del prodotto raccomandato

Colore bordo card rollover | Colore bordo card prodotto: colore del bordo della card normale e al passaggio del mouse

Dimensione prezzo (in px): dimensione del carattere utilizzato per il prezzo originale del prodotto

Colore barra prezzo originale: colore della barra del taglio prezzo del prodotto

Colore prezzo scontato/finale | Colore prezzo originale: colore del carattere utilizzato per il prezzo del prodotto, sia scontato che di partenza

Colore testo card prodotto | Colore testo card prodotto rollover: colore del carattere utilizzato nella card del prodotto

Padding card prodotto (in px): distanza in pixel tra il contenuto e il bordo della card

Larghezza massima immagine card prodotto (in px): larghezza massima in pixel delle immagini

Spessore bordo card prodotto (in px) | Angoli arrotondati card prodotto (in px): spessore del bordo delle card contenenti i prodotti e raggio di arrotondamento degli angoli in pixel

Larghezza massima card prodotti (in px): larghezza massima delle card in pixel, tenere presente la larghezza delle immagini che dovranno essere all’interno di questo contenitore

Color simbolo “+” tra le card: colore del segno + tra una card e l’altra

Nascondere box note: il box note viene visualizzato in fondo alla griglia dei prodotti ed è possibile nasconderlo

Colore sfondo card rollover | Colore sfondo card prodotto: colore dello sfondo delle card nello stato normale e al passaggio del mouse

Colore testi contenitore: colore del carattere utilizzato per il testo generico del contenitore più esterno

Nascondi testo aggiuntivo: è possibile nascondere il testo aggiuntivo visibile in fondo alla recommendation

Testo aggiuntivo label sconto: testo dell’etichetta mostrata sui prodotti con lo sconto

Padding label sconto (in px): padding dell’etichetta che indica lo sconto su un prodotto

Dimensioni testo label sconto (in px): dimensioni del carattere utilizzato nell’etichetta di sconto

Angoli arrotondati label sconto: raggio di arrotondamento del bordo dell’etichetta di sconto

Colore di sfondo label sconto | Colore testo label sconto: colore dell’etichetta dello sconto e del testo al suo interno

Nascondi testo prima delle card: nasconde il testo posto prima della griglia dei prodotti raccomandati

Animazione immagine rollover: abilita e disabilita l’animazione dell’immagine del prodotto al passaggio del mouse

Testo che indica il prodotto visualizzato: stringa di testo che evidenzia il primo prodotto mostrato tra le raccomandazioni, che è il prodotto della product detail page che stiamo visualizzando

Layout -> Posizione e dimensioni

Margine simbolo “+” tra le card: distanza laterale del simbolo + dalle card, in verticale viene centrato automaticamente

Dimensione simbolo “+” tra le card: dimensione del carattere utilizzato per il simbolo +

Colore bordo contenitore | Colore di sfondo contenitore: impostazioni colore del contenitore principale

Angoli arrotondati contenitore (in px) | Dimensione bordo contenitore (in px): impostazione della dimensione del bordo del contenitore principale e raggio di arrotondamento agli angoli

Larghezza massima contenitore (in px) | Margine prima e dopo il contenitore (in px) | Padding contenitore (in px): larghezza occupata dal contenitore principale nella pagina, in pixel, posizionamento verticale indicato dal margine rispetto agli elementi precedente e successivo e padding del contenitore

Nascondi pulsante reset quantita’: è possibile nascondere il pulsante con la freccia che resetta il valore della quantità di oggetti inserita

Colore prezzo totale: colore del carattere utilizzato per indicare il prezzo dato dalla somma del costo di tutti i prodotti selezionati tra quelli proposti

Dimensioni testo prezzo totale (in px) | Dimensioni testo label prezzo totale (in px): dimensioni del carattere utilizzato per il prezzo totale e per la sua etichetta

Nascondi label sconto: è possibile nascondere l’etichetta con lo sconto

Numero di colonne dei prodotti visualizzati: è possibile scegliere il numero di colonne utilizzate per formare la griglia che ospiterà le card coi prodotti estratti. Il numero di prodotti e quindi di righe mostrate varierà a seconda del numero di prodotti spesso comprati insieme al prodotto che stiamo visualizzando. Tale recommendation potrebbe anche non avere prodotti, in questo caso verrà nascosto il contenitore principale.

Layout -> Testo del messaggio

Icona note | Nascondere icona note: è possibile selezionare un’icona personalizzata da mostrare accanto alle note e nasconderla

Label prima del prezzo totale: testo visualizzato prima dell’importo totale di tutti i prodotti selezionati

Testo note prima del totale: testo da visualizzare nelle note in formato HTML

Colore label prezzo totale: colore del carattere utilizzato per la label del totale

CSS aggiuntivo: possiamo inserire codice CSS personalizzato (inserire codice CSS valido).

Layout -> Altro

Testo prima delle card: testo visualizzato prima della griglia con i prodotti raccomandati

Nascondi loader: è possibile nascondere l’animazione al caricamento dei prodotti

Colore icona loader | Colore sfondo loader | Dimensione icona loader: colore, sfondo e dimensione dell’icona utilizzata nell’animazione al caricamento