Andremo a spiegare il funzionamento di ogni singola chiave di questo template.
Per la configurazione iniziale delle Recommendations si rimanda all’articolo dedicato come creare una recommendation.

Il template attiva un’animazione della pagina che ne ridimensiona il contenuto e lo dispone in uno dei quattro angoli della finestra e, nello spazio ottenuto, mostra le raccomandazioni prodotti se impostate. Si ispira al layout pubblicitario televisivo chiamato appunto picture-in-picture.

Sono disponibili due versioni di questo template per i messaggi comportamentali, sia con la possibilità di inserire le raccomandazioni all’interno che senza, che mostra solo un’immagine di sfondo.

Padding Top/Bottom Card REC: spazio tra il contenuto e il box che contiene la recommendation in pixel, dall’alto e dal basso.

Dimensione bordo della card: dimensione della riga di delimitazione del bordo della card

Larghezza card REC (%): larghezza in percentuale della card contenente il prodotto

Padding prezzo (REC in riga): distanza tra il prezzo e il suo contenitore, nel caso di recommendations disposte in riga (se selezionato Si su Posizione e dimensioni – REC riga (si) _ REC colonna (no))

Colore sfondo contenitore REC: colore dello sfondo della card contenente la recommendation.

Colore barra prezzo originale: colore della barra del taglio prezzo

Dimensione barra prezzo originale (in px): spessore della barra del taglio prezzo

Colore prezzo scontato: colore del prezzo al netto degli sconti

Nascondi label sconto immagine: visualizza o nasconde l’etichetta “sconto” sopra alla card

Barra inclinata prezzo originale: è possibile inclinare la barra del taglio prezzo o lasciarla orizzontale

Dimensione prezzo scontato (in px): dimensione del carattere utilizzato per il prezzo al netto degli sconti

Colore sfondo card hover: colore di sfondo della card al passaggio del mouse

Colore bordo card hover: colore della linea del bordo della card al passaggio del mouse

Colore sfondo pulsante REC hover: colore di sfondo del pulsante del prodotto al passaggio del mouse

Dimensione del testo nelle card: dimensione del carattere utilizzato nelle card dei prodotti

Dimensione immagine nelle REC (px): dimensione in pixel delle immagini dei prodotti

Colore sfondo card REC: colore di sfondo della card del prodotto

Colore sfondo pulsante REC: colore di sfondo del pulsante del prodotto

Margine superiore pulsante REC: spazio dall’alto del contenitore del pulsante, in pixel

Margine superiore prezzo promo REC: spazio dall’alto del contenitore del prezzo scontato, in pixel

Margine superiore prezzo di partenza REC: spazio dall’alto del contenitore del prezzo originale, in pixel

Colore prezzo promo REC: colore del prezzo scontato del prodotto

Colore prezzo di partenza REC: colore del prezzo di partenza del prodotto

Colore descrizione prodotto REC: colore del carattere della descrizione del prodotto

Margine superiore descrizione REC: spazio dall’alto del contenitore della descrizione del prodotto

Colore scritta pulsante REC hover: colore del carattere del testo del pulsante della card al passaggio del mouse

Layout -> Posizione e dimensioni

REC riga (si) _ REC colonna (no): se selezionato SI i prodotti compaiono disposti per riga, la cui posizione può essere scelta tra in alto e in basso dal campo Posizione REC: alto (si), basso(no); altrimenti se si seleziona NO i prodotti vengono mostrati in colonna che può trovarsi a destra o a sinistra dello schermo, tale posizione può essere scelta agendo sul campo sotto.

Posizione REC: destra(si), sinistra(no): se selezionato SI i prodotti vengono visualizzati a destra dello schermo; se selezionato NO i prodotti vengono visualizzati a sinistra dello schermo. Tutto questo solo se abbiamo scelto la visualizzazione in colonna nella casella iniziale.

Posizione REC: alto (si), basso(no): Se selezionato SI i prodotti vengono mostrati in alto, altrimenti con NO vengono visualizzati in basso. Tale opzione è in funzione solo se abbiamo selezionato la visualizzazione in riga nella prima casella.

Immagine di sfondo: di default sullo sfondo viene mostrato un colore che può essere impostato nel punto seguente; se vogliamo invece visualizzare una immagine di sfondo qui è possibile caricarla

Colore background: colore di sfondo sotto il contenitore della pagina ridimensionata e la riga o colonna delle raccomandazioni

Layout -> Pulsante

Colore background icona SWIPE: colore di sfondo dell’icona utilizzata per scorrere a destra e sinistra le recommendation, attiva solo nel caso di visualizzazione in riga.

Nascondi icona SWIPE: nascondi/mostra icona swipe visibile nell’immagine sopra, evidenziata in rosso. Questa icona è disponibile solo per la visualizzazione delle recommendations in riga.

Colore icona pulsante chiusura: colore dell’icona del pulsante Chiudi

Colore rollover pulsante chiusura: colore al passaggio del mouse dell’icona del pulsante Chiudi

Colore rollover sfondo pulsante chiusura: colore dello sfondo del pulsante per chiudere le recommendations al passaggio del mouse.

Forma quadrata pulsante chiusura (SI: quadrato _ NO:cerchio): forma del pulsante di chiusura quadrato o rotondo

Icona pulsante chiusura: icona del pulsante chiudi, di default X

Dimensione pulsante chiusura (in px): dimensione del font utilizzato per l’icona del pulsante di chiusura

Colore sfondo pulsante chiusura: colore di sfondo del pulsante Chiudi

Colore bordo card REC: colore della linea che delimita le cards contenenti le recommendations

Colore icona SWIPE: colore del carattere utilizzato per l’icona Swipe

Layout -> Altro

Timer: in questo campo è possibile impostare dopo quanto tempo dal caricamento l’animazione deve essere attivata.

Layout -> Contenuto incorporato

Aggiungi CSS personalizzato: campo di testo dove è possibile inserire il foglio di stile personalizzato.