Attraverso le opzioni proposte in questa sezione è possibile definire alcune impostazioni grafiche relative alle Schede attraverso le quali vengono presentati i Prodotti inseriti nell'elenco.
La Scheda di un Prodotto è composta dai seguenti elementi, tutti impostati in base a quanto definito in E-commerce | Finestra Impostazioni Prodotto:
| • | Copertina: riprende la prima delle immagini inserite per il Prodotto nella sezione Immagine della finestra Impostazioni Prodotto; |
| • | Dettagli: comprende la Categoria, le Varianti di Prodotto, la Disponibilità, il Prezzo, la visualizzazione dell'IVA, il Campo Quantità; |
| • | Pulsante: ha attivo il link che porta all'inserimento del Prodotto nel carrello. |
Ovviamente, nel caso in cui elementi come la Copertina o le Varianti di Prodotto non siano stati specificati, queste informazioni non saranno inserite nella Scheda.
Per quanto riguarda la disponibilità, lavorando con l'edizione Pro, nella Scheda Prodotto viene visualizzata non solo l'icona per la Disponibilità Indicativa ma anche il numero che ne specifica la Disponibilità Effettiva.
Prima di tutto, attraverso le opzioni disponibili nella sezione Impostazioni Schede occorre definire come queste devono essere composte e impaginate scegliendo un tipo di visualizzazione fra i seguenti:
|
Copertina a sinistra, titolo e contenuti a destra
|
|
Titolo e contenuti a sinistra, copertina a destra
|
|
Copertina in alto, titolo e contenuti in basso
|
|
Titolo in alto, copertina e contenuti in basso
|
|
A prescindere dalla tipologia scelta, sul nome ed eventualmente sull'immagine presenti nelle Schede Prodotto viene automaticamente attivato il link impostato attraverso l'opzione Collegamento (es. Pagina scheda prodotto) della finestra Impostazioni Prodotto | Generale.
|
Impostato il tipo di visualizzazione, è poi possibile agire sulle seguenti opzioni:
| ▪ | Schede per riga: specifica quante Schede Prodotto devono essere affiancate su un'unica riga. |
| ▪ | Altezza schede: specifica il valore in pixel che deve essere assunto in altezza dalla singole Schede Prodotto. In base a tale parametro, le immagini associate ai Prodotti vengono automaticamente ridimensionate. Se i testi di descrizione dei Prodotti sono troppo lunghi per poter essere visualizzati in maniera completa, viene visualizzata la barra di scorrimento. |
| ▪ | Margine schede: imposta il valore in pixel della distanza che deve essere mantenuta tra le Schede. |
| ▪ | Dimensione copertina (%): imposta la larghezza dell'immagine di Copertina rispetto ai contenuti, nel caso sia posizionata a sinistra o a destra, o rispetto all'altezza della Scheda, nel caso sia posizionata in alto, sopra o sotto il Nome del Prodotto. |
| ▪ | Margine copertina / Margine contenuti: impostano rispettivamente il valore in pixel per la distanza tra l'immagine di Copertina o il contenuto (Nome e Descrizione) e i bordi della Scheda. |
Definiti questi parametri, è poi possibile impostare le proprietà grafiche dei diversi elementi che compongono le Schede dei Prodotti. Selezionato l'Elemento su cui si vuole agire vengono proposte le opzioni disponibili:
| ▪ | Visibile: fa in modo che l'elemento della Scheda sia visibile o meno. Questa opzione non è disponibile per lo Sfondo e la Copertina. Selezionando l'elemento Dettagli, invece, è possibile specificare se visualizzare o meno informazioni come la Categoria, la Disponibilità o il Prezzo. |
| ▪ | Tipo di Font: specifica il tipo di carattere, le dimensioni e lo Stile del testo per il Nome del Prodotto, la Descrizione, i Dettagli e il Pulsante. Il menu a tendina propone: il comando per applicare il Font di default (definito dallo Stile dell'elemento Testo della Pagina nella finestra Stile dei Testi); la lista dei Safe Fonts, ovvero dei font presenti su tutti i dispositivi e per i quali, quindi, non è necessaria alcuna pubblicazione; tutti i Google Fonts e i Web Fonts aggiunti attraverso la finestra Aggiungi Web Font richiamata dal comando Altri tipi di carattere. |
| ▪ | Colore Testo: specifica il colore del testo per il Nome del Prodotto, la Descrizione, i Dettagli e il Pulsante. Selezionando l'elemento Dettagli, il colore definito per il Testo viene utilizzato anche per la linea posta sotto la Descrizione. |
| ▪ | Colore Sfondo: specifica il colore dello Sfondo della Scheda e del Pulsante. |
| ▪ | Spessore: specifica lo spessore dei bordi dello Sfondo della Scheda e del Pulsante. |
| ▪ | Colore: specifica il colore dei bordi dello Sfondo della Scheda e del Pulsante. |
| ▪ | Smusso: definisce il fattore di smusso per gli angoli dello Sfondo della Scheda e del Pulsante. |
| ▪ | Ombra: applica un'ombra allo Sfondo della Scheda, definendone il colore, la posizione, la diffusione e la dimensione. |
| ▪ | Adatta dimensioni: se attiva, fa in modo che l'immagine di Copertina occupi tutto lo spazio a disposizione all'interno della Scheda, sia larghezza che in altezza. Nel caso in cui le proporzioni non corrispondano, l'immagine viene centrata e tagliata. Se non attiva, invece, l'immagine di Copertina viene adattata o alla larghezza o all'altezza dello spazio a disposizione. |
| ▪ | Mostra Categoria: visualizza nella Scheda Prodotto la Categoria in cui, in base a quanto definito nella finestra E-commerce | Prodotti, è inserito il Prodotto. |
| ▪ | Mostra Campo Quantità: visualizza nella Scheda Prodotto un Campo Quantità per permettere al Cliente di specificare la quantità del Prodotto che intende inserire nel carrello. |
| ▪ |  Mostra Disponibilità: visualizza nella Scheda Prodotto, oltre all'icona per la Disponibilità Indicativa, anche il numero che ne specifica la Disponibilità Effettiva. |
|
Se si attiva l'opzione Mostra Disponibilità ed è presente almeno un Prodotto per il quale è prevista la visualizzazione di questo tipo di disponibilità, per la Pagina che ospita l'Oggetto Catalogo Prodotti deve essere impostata l'estensione .PHP: è possibile farlo tramite l'opzione Estensione del file generato presente nella finestra Proprietà Pagina | Esperto.
|
| ▪ | Mostra Prezzo: visualizza il prezzo associato al Prodotto, con o senza IVA, nella Scheda Prodotto. |
| ▪ | Modalità: specifica se come Pulsante deve essere utilizzato un Testo o un'Immagine. Nel primo caso è possibile sfruttare le opzioni disponibili per definire lo stile del link testuale; nel secondo caso, invece, come immagine viene automaticamente ripresa quella impostata nella sezione Immagini della finestra E-commerce | Opzioni. |
| ▪ | Margini: imposta il valore in pixel per il margine tra la scritta e il bordo del Pulsante. |
Solo nell'edizione Pro, è possibile applicare sulle Schede Prodotto delle Coccarde definendo:
| ▪ | Tipo di Coccarda: definisce le impostazioni per le coccarde da visualizzare nelle Schede Prodotto nei casi di "Nuovo Prodotto" o di "Prodotto in sconto". |
| ▪ | File Immagine: definisce l'immagine che deve essere utilizzata come coccarda. È possibile cliccare sulla freccia presente nel campo per selezionare un'immagine dalla libreria disponibile o cliccare sul pulsante  e importare il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare. |
| ▪ | Allineamento: specifica come deve essere allineata la coccarda all'interno della Scheda Prodotto. |
| ▪ | Larghezza (%): specifica la larghezza della coccarda in percentuale rispetto alle dimensioni della Scheda Prodotto. |
Infine, tramite le funzioni del riquadro Opzioni è possibile definire:
| ▪ | Aggiungi senza visualizzare il Carrello: fa in modo che, cliccando sul pulsante di acquisto, il Cliente aggiunga direttamente il Prodotto fra quelli ordinati senza essere automaticamente indirizzato al Carrello. |
| ▪ | Attiva collegamento su immagine: attiva sulle diverse immagini della Scheda Prodotto il collegamento con le relative immagini ingrandite. Tali immagini ingrandite vengono visualizzate attraverso la finestra ShowBox. Questo collegamento viene sostituito con quello eventualmente impostato attraverso l'apposita opzione presente nella finestra Impostazioni Prodotto | Generale. |
|
L'aspetto della finestra ShowBox può essere completamente personalizzato: attraverso le opzioni presenti al Passo 2 nella finestra Finestra a comparsa ShowBox è, per esempio, possibile impostare colori, ombra, opacità ed effetti di apertura.
|
Best practice:
