Come mostrare la foto di ogni colore o variante nella scheda prodotto di PrestaShop
· 2 min di lettura
Un menu a tendina con «Blu, Rosso, Verde» costringe il cliente a indovinare com'è ogni versione. Ti spieghiamo come usare le immagini che le tue combinazioni hanno già per mostrare ogni opzione con la sua foto, cosa controllare nel catalogo e nel tema e come Varianti per attributo lo fa senza programmare.
Il problema: scegliere una variante alla cieca
In molti negozi PrestaShop il colore o la finitura si sceglie da un menu a tendina con i nomi: «Blu, Rosso, Verde», «Noce, Rovere». Il cliente deve immaginarli o cliccare tutte le opzioni aspettando che cambi la foto principale.
- Alcuni si stancano e se ne vanno.
- Altri scelgono la variante sbagliata e la restituiscono, con i costi di spedizione e gestione che ne derivano.
- Da mobile, i menu a tendina sono ancora più scomodi.
Eppure le foto esistono già: sono assegnate a ogni combinazione nel catalogo. Basta mostrarle dove il cliente decide.
La soluzione: una fila di miniature con la foto reale
1. Assegna un'immagine a ogni combinazione
Nella scheda prodotto, nella scheda delle combinazioni, seleziona per ogni combinazione l'immagine che la rappresenta. Senza questo, nessuna soluzione può mostrare la foto giusta. Parti dai prodotti più venduti.
2. Scegli l'attributo principale
Di solito è il colore, ma può essere la finitura, il materiale o la fantasia. Le miniature devono raggruppare per quell'attributo: se un prodotto ha colori e taglie, una miniatura per colore, non una per combinazione.
3. Mostra le miniature accanto al selettore
Il posto migliore è subito sotto il selettore degli attributi, prima di «Aggiungi al carrello». Un clic su una miniatura deve selezionare quell'opzione nel selettore nativo del tema, così prezzo, disponibilità e carrello funzionano come sempre.
4. Cura dimensioni e accessibilità
Usa un tipo di immagine di PrestaShop di dimensioni simili alla miniatura, perché non sia sfocata né pesante. Aggiungi il nome dell'opzione come testo alternativo ed evidenzia la variante scelta.
I temi con «campioni colore» di solito mostrano solo un quadrato del colore dell'attributo, non la foto reale del prodotto in quel colore, che è ciò che aiuta davvero a decidere.
Come ti aiuta Varianti per attributo
Varianti per attributo è il nostro modulo per PrestaShop da 1.6.1 a 9.2 (PHP da 7.1 a 8.4) che porta nella scheda prodotto la foto reale di ogni opzione:
| Esigenza | Cosa fa il modulo |
|---|---|
| Foto reali | Una miniatura per ogni valore dell'attributo scelto, con l'immagine già assegnata alla sua combinazione. Niente di nuovo da caricare. |
| Un clic | La miniatura seleziona l'opzione nel selettore di attributi nativo del tema: prezzi, disponibilità e carrello non cambiano. |
| Qualsiasi attributo | Colore, finitura, materiale, fantasia… il gruppo di attributi che indichi. |
| Dimensioni | Miniature da 24 a 200 px e il tipo di immagine che preferisci, verificato perché non risultino mai sfocate. |
| Chiarezza | Variante attuale evidenziata e nome dell'opzione come tooltip e testo alternativo. Compare solo se il prodotto ha due o più valori. |
| Posizione | Funziona subito dopo l'installazione nell'hook standard displayProductAdditionalInfo; per metterlo subito dopo il selettore basta una riga nel template, spiegata nella scheda Aiuto. |
| Leggero | Solo il suo foglio di stile e il suo script, senza richieste esterne né tabelle aggiuntive. Alla disinstallazione non lascia traccia. |
Scegli il gruppo di attributi e la dimensione, salva, e i tuoi clienti vedono ogni opzione prima di scegliere.