Negli acquisti online, gli utenti basano le loro scelte sui propri sensi. In base a questi infatti, i clienti decidono se fare un acquisto o meno. Per questo motivo, è fondamentale per ogni prodotto di un E-Commerce, fornire agli utenti alcune indicazioni in più circa il prodotto. Ecco che quindi diventa fondamentale integrare gli Swatches.
In ogni E-Commerce nel quale ci sono prodotti configurabili, si possono settare gli swatches.
Ma cosa sono esattamente i color swatches in Magento 2?
I color swatches sono degli strumenti che consento all’utente che naviga un sito E-Commerce, di selezionare differenti colori del prodotto che sta visualizzando.
Se pensiamo alla vendita di una T-Shirt, l’utente potrà, selezionando un quadratino colorato, osservare il prodotto in diverse tonalità di colore: questi sono i color swatches.
Nello store view, gli swatches di un prodotto sono visualizzati sulla pagina del catalogo e del dettaglio prodotti. Un esempio è visibile nella seguente screenshot:
Vediamo insieme come poter impostare questa nuova feature in Magento 2.
Text-based Swatches
Se non è disponibile un’immagine per uno swatch, il valore dell’attributo viene visualizzato come testo. Uno swatch testuale è come un pulsante con un’etichetta di testo e si comporta esattamente nello stesso modo di uno swatch con immagine. Quando gli swatches di testo vengono utilizzati per mostrare le taglie disponibili, qualora una di queste non fosse disponibile, lo swatch relativo si cancella.
Gli Swatches nella Layered Navigation
Gli swatches, sia i Color Swatches che i Text-Based Swatches, possono essere utilizzati anche nella layered navigation, a condizione che alla voce “Usa nella Layered Navigazion”, sia impostato “Si”.
Come configurare i Color Swatches
1. Creare gli Swatches
Di seguito troverai due metodologie per creare gli swatches.
Opzione 1: Aggiungere un Color Swatches
- Identifica l’esatto colore per il tuo prodotto
- Nel menù dell’ Admin, vai su Negozi—>Attributi –>Prodotti
- Nell’elenco, seleziona l’attributo “Colore“
- Verifica che la sezione “Tipo di Input per Proprietario Store” sia impostato su “Visual Swatch“
- Nella sezione “Gestione Swatch“, clicca su “Aggiungi Swatch” per aggiungere una nuova definizione in cima alla lista.
Una volta fatto questo, procedi come di seguito:
1. Nel menù degli Swatch, seleziona “Scegli un colore“
2. Nel “color picker“, metti il cursore sul campo # e premi lo spazio per cancellare il valore corrente. Poi immetti 6 numeri che rappresentano il valore esadecimale del colore che vuoi creare.
3. Per salvare lo swatch, clicca sul “Color Wheel” 
.
4. Inserisci le etichette per l’ Admin e lo Storefront. In questo esempio, vengono messi anche gli SKU nelle etichette dell’ admin, come riferimento perché questi colori sono utilizzati solo per uno specifico prodotto. E’ possibile includere un underscore, ma non un trattino, nell’etichetta.
5. Seleziona la voce “Is default“, per impostare il colore di default di cui hai bisogno.
6. Per cambiare l’ordine, ti basterà semplicemente trascinare lo swatch nella posizione desiderata.
7. Fatto questo, basterà cliccare su “Salva Attributo”, poi quando richiesto, aggiorna la cache.
8. L’ultimo passo da compiere è aprire ogni prodotto, nella sezione “Modifica” e aggiornare l’attributo “Colore” con il corretto swatch.
Opzione 2: Upload di un’immagine di Swatch
Per catturare un’immagine per uno swatch, occorrerà aprire l’immagine del prodotto in un photo editor e salvare un’area quadrata dell’immagine che ritrae il colore, il modello o la struttura. Bisognerà ripetere l’operazione per ogni variazione di prodotto. Le dimensioni dello swatch sono determinate dal tema. In generale salvando l’immagine come un quadrato, si mantengono intatte le proporzioni del modello.
A questo punto dovrai seguire questi step:
- Nel menù dell’ Admin, vai su Negozi—>Attributi –>Prodotti
- Nell’elenco, seleziona l’attributo “Colore“
- Verifica che la sezione “Tipo di Input per Proprietario Store” sia impostato su “Visual Swatch“
- Nella sezione “Gestione Swatch“, clicca su “Aggiungi Swatch” per aggiungere una nuova definizione in cima alla lista.
Una volta fatto questo, procedi come di seguito:
1.Nel menù dello swatch, seleziona Upload File
2.Scegli l’immagine desiderata dal tuo computer
3.Ripeti questi step per ogni altra immagine di swatch
4.Immetti l’etichetta per il colore nell’ Admin e nel Default Store View
5.Quando l’iter è stato completato, seleziona “Salva Attributo” e quando richiesto esegui un refresh della cache.
6.In fine vai nella sezione ” Modifica” di ogni prodotto e aggiorna l’attributo “Colore” con il corretto swatch.
2. Aggiornare i tuoi prodotti
- Nella sidebar dell’ Admin vai su: Prodotti —> Inventario –> Catalogo
- Filtra la lista tramite nome o SKU per includere solo i prodotti applicabili.
- Nell’elenco, seleziona la checkbox di ogni prodotto per il quale si applica lo swatch.
- Scorri fino all’attributo “Colore” e seleziona “Cambia” nella checkbox
- Seleziona lo swatch che vuoi applicare ai prodotti selezionati e clicca su “Salva”. Successivamente esegui un refresh della cache.
Con questi pochi passi hai imparato come si configura un color swatches in Magento 2.
Se hai dubbi o domande, lasciaci pure un commento.