Compatibilità:

WebSite X5 Pro

Creare un negozio di e-commerce, soprattutto quando bisogna gestire un gran numero di prodotti, può essere piuttosto impegnativo. Per farti risparmiare tempo, e nel contempo assicurarti di ottenere pagine ottimizzate per la vendita, WebSite X5 è in grado di creare in automatico sia delle card di presentazione dei prodotti che delle vere e proprie pagine Schede Prodotto complete di tutte le informazioni necessarie.


In questa guida ci concentreremo sulle card: vedremo quando vengono utilizzate, come vengono generate e com'è possibile intervenire per personalizzarne composizione e stile grafico.


Card di prodotto: cosa sono

Una card non è altro che un box in cui vengono riassunte alcune informazioni basilari su un prodotto e, nella maggior parte dei casi, reso disponibile il pulsante per l'acquisto. Sono l'equivalente di un biglietto da visita e una pagina web può contenerne molte.


Servono per introdurre sinteticamente i prodotti ai clienti che, in questo modo, possono iniziare a farsi un'idea di ciò che può interessare loro e poi decidere su quali proposte concentrare la loro attenzione.


Quando vengono create

Come abbiamo detto le card di prodotto vengono create in automatico dal software nel caso in cui si usi:

  • l'Oggetto Catalogo Prodotti, utile per presentare in una pagina solo un gruppo selezionato dei prodotti a catalogo;
  • la pagina Ricerca Prodotti, utile per consentire ai clienti di fare ricerche attraverso categorie e filtri all'interno dell'intero catalogo prodotti;
  • la pagina Wishlist, utile per permettere ai clienti di inserire i prodotti in una wishlist in modo da posticiparne l'acquisto in un secondo momento.     

In tutti questi casi, i prodotti individuati vengono mostrati attraverso apposite card.


Come sono composte

Le card sono composte dai seguenti elementi: 

  • Sfondo: è semplicemente uno sfondo colorato o trasparente a cui è possibile disegnare un bordo.
  • Copertina: è l'immagine del prodotto
  • Contenuti: è la parte testuale della card. Comprende tutti gli elementi che seguono:
    • Titolo
    • Descrizione
    • Dettagli
    • Prezzo
    • Pulsante 'Aggiungi al carrello'
    • Pulsante 'Aggiungi alla wishlist'


Naturalmente puoi intervenire sulla composizione delle card e decidere che uno o più di questi elementi non vengano inseriti:

  • Apri la finestra delle impostazioni (lo puoi fare selezionando l'Oggetto Catalogo Prodotti inserito o la pagina Ricerca Prodotti o la pagina Wishlist e, in tutti i casi, cliccando sul pulsante Modifica) e vai nella sezione Impostazioni.
  • Utilizza il menu a discesa in Stile card per selezionare l'elemento sul quale vuoi agire.
  • Clicca per mettere o togliere il segno di spunta accanto all'opzione Visibile per fare in modo che l'elemento in questione sia presente o meno all'interno delle card. 
  • Nel caso specifico dei Dettagli, puoi decidere quali informazioni rendere disponibili nelle card in maniera puntuale.


#tip - Anche se le card sono pensate per l'e-commerce, puoi fare in modo che non contengano l'indicazione del prezzo o il pulsante 'Acquista'. In questo modo puoi sfruttare le card anche se vuoi semplicemente far vedere i tuoi prodotti, senza però metterli in vendita. 


Quali informazioni riportano

Per creare le card WebSite X5 utilizza principalmente le informazioni inserite attraverso la finestra Impostazioni Prodotto a cui si accede quando si aggiunge un nuovo prodotto a catalogo o se ne modifica uno già esistente (Passo 1 - Impostazioni > E-commerce > Prodotti). 


Nello specifico, nella card vengono ripresi:

  • come Copertina, la prima immagine inserita nella sezione Immagine;
  • come Titolo, il nome dato al prodotto nella sezione Generale;
  • come Descrizione, la descrizione breve inserita sempre nella sezione Generale;
  • per i Dettagli:  la categoria è quella in cui è eventualmente inserito il prodotto all'interno del catalogo; le varianti sono riprese dalla sezione Opzioni; la Disponibilità riprende quanto impostato nella sezione Disponibilità;
  • come Prezzo, quello indicato nella sezione Generale.  


Ovviamente se un'informazione non viene specificate attraverso la finestra Impostazioni Prodotto, non verrà inserita nella card.


Come possono essere personalizzate

Come abbiamo detto, le card vengono create in automatico da WebSite X5 utilizzando le informazioni inserite sui prodotti. Di default, l'aspetto delle card è determinato dal Modello che hai scelto per il sito ma puoi personalizzarlo. 

  • Apri la finestra delle impostazioni (lo puoi fare selezionando l'Oggetto Catalogo Prodotti inserito o la pagina Ricerca Prodotti o la pagina Wishlist e, in tutti i casi, cliccando sul pulsante Modifica) e vai nella sezione Impostazioni.
  • Inizia con il definire come vuoi che le card siano disposte all'interno della pagina. Usa l'opzione Disposizione per scegliere tra:
    • Altezza fissa: le card vengono disposte in una griglia. Dal momento che tutte le card assumono la stessa altezza, la griglia risulta regolare e compatta.
    • Altezza variabile: le card vengono sempre disposte in griglia ma l'altezza di ciascuna varia in funzione delle proporzioni dell'immagine usata come Copertina. Le card, dunque, possono non occupare completamente le celle della griglia in cui sono inserite: per questo può rimanere dello spazio vuoto fra card. Questa disposizione è particolarmente indicata quando si decide di visualizzare un'unica card per riga, oppure quando si prevede la visualizzazione su una sola riga divisa in più colonne.
    • Masonry: anche in questo caso l'altezza delle card varia in funzione delle proporzioni dell'immagine di Copertina. La differenza rispetto alla disposizione precedente è che le card non sono incasellate in una griglia regolare ma allineate su più righe e colonne senza lasciare spazi che compensano le dimensioni più ridotte di alcune di esse.
    • SlideShow: (disponibile solo per l'Oggetto Catalogo Prodotti) le card hanno uguale altezza e sono mostrate su una sola riga all’interno di uno slideshow, con tanto di pulsanti di navigazione.
  • A questo punto puoi decidere come devono essere impaginati i diversi elementi all'interno delle card. Usa l'opzione Contenuti per scegliere tra:
    • 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 e contenuti in alto, copertina in basso;
    • Copertina come sfondo.
  • A livello generale puoi anche definire il numero di Card per riga e il numero massimo di Righe per pagina. Se il numero dei prodotti previsto è superiore, verrà introdotta la paginazione.
  • Se vuoi, modifica l'Altezza delle card. Considera che in base a questo parametro verranno ridimensionate le immagini associate ai prodotti. Per quanto riguarda i testi, invece, se risulteranno troppo lunghi verrà visualizzata la barra di scorrimento.
  • Per perfezionare l'aspetto della pagina, puoi ancora intervenire sui Margini tra le card.
  • Infine puoi occuparti degli elementi che compongono le card: usa il menu in Stile card per selezionare l'elemento su cui vuoi agire. In base all'elemento selezionato potrai usare opzioni diverse, come colore, font, margini ed effetti.


Come applicare delle coccarde sulle card

Se hai dei prodotti nuovi o dei prodotti in sconto, puoi metterli in evidenza facendo in modo che sulle loro card sia apposta una coccarda. 


Innanzitutto devi aver già definito quali sono i prodotti nuovi o i prodotti in sconto:

  • In fase di creazione del catalogo (al Passo 1 - Impostazioni > E-commerce > Prodotti) crea un nuovo prodotto o modificane uno già esistente in modo da accedere alla finestra Impostazioni Prodotto.
  • Perché un prodotto sia considerato "nuovo": rimani nella sezione Generale e attiva l'opzione Evidenzia il Prodotto come 'Novità'.
  • Perché un prodotto sia considerato "in sconto": vai nella sezione Sconto e applica uno sconto fisso o in percentuale (vedi, Come si imposta uno sconto su un singolo prodotto).


Predisposti i prodotti puoi tornare a lavorare sulle card:

  • Apri la finestra delle impostazioni (lo puoi fare selezionando l'Oggetto Catalogo Prodotti inserito o la pagina Ricerca Prodotti o la pagina Wishlist e, in tutti i casi, cliccando sul pulsante Modifica) e vai nella sezione Impostazioni.
  • Nella sezione Coccarde, scegli il Tipo di Coccarda che vuoi applicare: Nuovo Prodotto o Prodotto in sconto.
  • Scegli l'immagine che più ti piace per la coccarda: puoi usare una di quelle proposte o importare il File Immagine che preferisci.
  • Infine, definisci l'Allineamento e la Larghezza della coccarda rispetto alla card.


Come gestire i link presenti

Le card sono pensate per offrire le informazioni essenziali sui Prodotti e facilitare ai clienti le operazioni di acquisto. Possono, pertanto, contenere diversi collegamenti. Ecco come li puoi gestire:

  • Pulsante 'Aggiungi al carrello': è uno degli elementi che compongono le card. Come abbiamo visto, puoi selezionarlo dalla lista degli elementi e, tramite, le opzioni disponibili, decidere se mantenerlo o meno (tramite l'opzione Visibile) oltre che personalizzarlo dal punto di vista grafico. Puoi anche fare in modo che al click, il Prodotto sia aggiunto direttamente fra quelli ordinati senza prima passare dalla pagina del Carrello (tramite l'opzione Aggiungi senza visualizzare il Carrello).
  • Pulsante 'Aggiungi alla Wishlist': è analogo al pulsante 'Aggiungi al carrello". Anche in questo caso puoi decidere se averlo o meno all'interno delle card (sempre tramite l'opzione Visibile), impostarne il colore e sfruttare l'opzione Aggiungi senza visualizzare la Wishlist.   
  • Link alla galleria immagini: le immagini sono importanti per permettere ai Clienti di valutare un Prodotto. Quando inserisci un Prodotto (al Passo 1 - Impostazioni > E-commerce > Prodotto > Impostazioni Prodotto > Immagine), puoi importare tutte le immagini che vuoi: la prima è quella che viene visualizzata direttamente nella card; tutte le altre vengono utilizzate per comporre una galleria. Se attivi l'opzione Attiva visualizzazione immagini in ShowBox presente nella finestra Impostazioni, al passaggio del mouse sull'immagine presente nella card verrà visualizzato in sovrimpressione un pulsante con l'icona di una lente d'ingrandimento: cliccando su questo pulsante, i Clienti potranno visualizzare la galleria con tutte le immagini previste per il Prodotto.
  • Link alla Pagina Scheda Prodotto: la card può essere un ottimo modo per suscitare nei Clienti la voglia di saperne di più sui Prodotti. Se predisponi la creazione delle Pagine Schede Prodotto (al Passo 1 - Impostazioni > E-commerce > Prodotto > Impostazioni Prodotto > Dettagli), al passaggio del mouse sull'immagine presente nella card, verrà visualizzato in sovrimpressione un pulsante con l'icona di una scheda: cliccando su questo pulsante, i Clienti potranno visualizzare la Pagina Scheda Prodotto di approfondimento. In qualsiasi caso, il link alla Pagina Scheda Prodotto è attivo anche sul Titolo della Card.