Come personalizzare i campioni di colore su Shopify
I campioni colore sono attivi, le immagini assegnate, tutto funziona. Ma gli swatch non hanno l’aspetto che vuoi. Troppo piccoli. Forma sbagliata. Il bordo non si abbina al design del negozio. Le varianti esaurite non sono indicate chiaramente.
Rubik Variant Images ti dà il pieno controllo sull’aspetto dei campioni colore. Oltre 100 variabili CSS, un editor visivo e un assistente IA che scrive il CSS su richiesta. In questo articolo vediamo cosa puoi personalizzare e come.
In questo articolo
- I tre tipi di swatch
- Forme: tondo, quadrato, arrotondato
- Dimensioni e spaziatura
- Bordi e stili di selezione
- Effetti hover
- Indicatore variante esaurita
- Personalizzare i tooltip
- L’assistente IA per il CSS
- Domande frequenti
I tre tipi di swatch
Prima di personalizzare, scegli il tipo di swatch per ogni opzione del prodotto.
Campioni colore. Cerchi o quadrati riempiti con un colore pieno. Ideali per opzioni dove il nome corrisponde a un colore chiaro: Rosso, Blu, Nero. Il colore viene determinato automaticamente dal nome della variante o impostato manualmente.
Swatch con immagine. Piccoli thumbnail che mostrano una foto del prodotto nella variante corrispondente. Perfetti per abbigliamento, tessuti e prodotti dove il colore da solo non racconta tutta la storia. Il cliente vede come appare il prodotto in quella variante prima di selezionarla.
Pulsanti a pillola. Rettangoli con bordi arrotondati e testo all’interno. La scelta giusta per taglie (S, M, L), materiali (Cotone, Lino) e tutte le opzioni non rappresentabili con un colore. Per approfondire le differenze, leggi campioni colore vs dropdown.
Puoi usare tipi diversi sullo stesso prodotto. Cerchi per “Colore”, pillole per “Taglia”, thumbnail per “Fantasia”. Rubik gestisce tutto dall’interfaccia dell’app.
Forme: tondo, quadrato, arrotondato
La forma degli swatch si controlla con il border-radius. Rubik offre tre preset: tondo (cerchio perfetto), quadrato (angoli retti) e arrotondato (angoli leggermente smussati). Puoi anche inserire un valore personalizzato.
I cerchi funzionano bene per i colori puri. I quadrati danno un aspetto più moderno e geometrico. Gli angoli arrotondati offrono un compromesso morbido che si adatta alla maggior parte dei design.
La forma si applica per tipo di opzione. Puoi avere cerchi per il colore e rettangoli arrotondati per la taglia sullo stesso prodotto.
Dimensioni e spaziatura
La dimensione degli swatch influisce sull’usabilità. Troppo piccoli e il cliente non li tocca facilmente su mobile. Troppo grandi e occupano spazio prezioso sopra il pulsante “Aggiungi al carrello”.
Rubik ti permette di impostare larghezza e altezza in pixel. Per i campioni colore, 32-40px funziona bene su desktop; 40-48px su mobile. Per gli swatch con immagine, dimensioni più grandi (50-60px) rendono meglio perché il thumbnail deve essere leggibile.
La spaziatura tra gli swatch (gap) si controlla separatamente. Un gap di 8-12px mantiene gli swatch ben distanziati senza sprecare spazio. Su mobile, un gap leggermente più grande facilita il tap.
Bordi e stili di selezione
Il bordo dello swatch segnala al cliente quale opzione è selezionata. Rubik supporta diversi stili: bordo pieno, bordo con offset (un anello esterno separato dallo swatch), ombra e combinazioni.
Il bordo con offset è il più popolare: crea un cerchietto attorno allo swatch selezionato con un piccolo spazio bianco in mezzo. Funziona bene con qualsiasi colore di sfondo e rende la selezione immediatamente visibile.
Puoi personalizzare il colore del bordo, lo spessore e il raggio. Per negozi con sfondo scuro, un bordo chiaro. Per sfondi chiari, un bordo scuro o colorato che riprende i colori del brand.
Effetti hover
L’effetto hover (passaggio del mouse) dà un feedback visivo prima del clic. Rubik offre diverse opzioni: scala (lo swatch si ingrandisce leggermente), ombra, cambio di opacità, bordo in evidenza.
L’effetto scala di 1.1x (10% più grande) è il più naturale. Il cliente capisce che l’elemento è cliccabile senza che l’interfaccia risulti troppo animata.
Su mobile il hover non si applica (non c’è un cursore), quindi l’effetto è rilevante solo per gli utenti desktop. Assicurati che la selezione attiva sia chiara anche senza hover.
Indicatore variante esaurita
Come segnalare che una variante è esaurita? Rubik offre tre approcci. Puoi ridurre l’opacità dello swatch (il colore diventa sbiadito). Puoi sovrapporre una linea diagonale barrata. Oppure puoi nascondere completamente lo swatch.
L’opzione consigliata è la riduzione di opacità combinata con la linea barrata. Il cliente vede che quel colore esiste ma non è disponibile. Nascondere completamente lo swatch può creare confusione se il cliente ha già visto il colore in precedenza.
Puoi anche rendere lo swatch esaurito non cliccabile o lasciarlo cliccabile con un messaggio “Esaurito” nel tooltip.
Personalizzare i tooltip
Quando il cliente passa il mouse sopra uno swatch, un tooltip mostra il nome della variante. Rubik ti permette di personalizzare colore di sfondo, colore del testo, font e bordi del tooltip.
Per uno stile coerente, abbina il tooltip ai colori del tuo tema. Sfondo scuro con testo bianco funziona quasi sempre. Puoi anche disattivare il tooltip se il nome della variante è già visibile altrove sulla pagina.
L’assistente IA per il CSS
Non sai scrivere CSS? Rubik include un assistente IA che genera il codice per te. Scrivi una richiesta in linguaggio naturale: “Rendi gli swatch più grandi, quadrati, con bordo dorato”, e l’assistente genera le variabili CSS corrispondenti.
L’assistente funziona anche per richieste complesse: “Swatch tondi da 40px con ombra leggera, bordo nero da 2px quando selezionato, opacità 50% quando esaurito, tooltip con sfondo nero e testo bianco”. Il risultato è pronto da copiare e incollare.
Per chi lavora con più negozi, questa funzione è particolarmente utile. Invece di ricordare le variabili CSS per ogni personalizzazione, basta descrivere il risultato desiderato.
Se vuoi vedere le immagini multiple per variante in azione insieme ai campioni personalizzati, l’effetto combinato sulla pagina prodotto è notevole.
Domande frequenti
Serve conoscere il CSS per personalizzare gli swatch?
No. Rubik offre un editor visivo con impostazioni predefinite per forma, dimensione e colori. Per personalizzazioni avanzate, l’assistente IA genera il CSS dalla tua descrizione in linguaggio naturale.
Le personalizzazioni si applicano a tutti i prodotti?
Sì. Le impostazioni di stile degli swatch si applicano globalmente a tutti i prodotti del negozio. Questo garantisce coerenza visiva su tutte le pagine prodotto.
Posso avere swatch di dimensioni diverse per desktop e mobile?
Sì. Rubik supporta impostazioni responsive. Puoi definire dimensioni diverse per schermi desktop e mobile attraverso le variabili CSS o l’assistente IA.
Come imposto il colore corretto per ogni swatch?
Rubik determina il colore automaticamente dal nome della variante. “Rosso” diventa rosso, “Blu Navy” diventa blu scuro. Per colori personalizzati o sfumature specifiche, puoi impostare manualmente il codice colore esadecimale.
Le personalizzazioni CSS interferiscono con il tema?
No. Rubik usa il Shadow DOM, che isola completamente il CSS degli swatch dal resto del tema. Le tue personalizzazioni non influenzano altri elementi della pagina e il CSS del tema non modifica gli swatch.
Posso personalizzare gli swatch anche per la pagina collezione?
Rubik Variant Images gestisce gli swatch sulla pagina prodotto. Per i campioni colore nella pagina collezione, serve Rubik Combined Listings, che ha le proprie opzioni di personalizzazione.
Approfondimenti
