Campioni di colore nella pagina collezione Shopify
Il cliente naviga la pagina collezione del tuo negozio. Vede una griglia di prodotti, ognuno con una foto, un nome e un prezzo. Per scoprire i colori disponibili, deve cliccare sul prodotto, aspettare il caricamento della pagina e poi tornare indietro per confrontare. Per ogni prodotto, per ogni colore.
I campioni colore nella pagina collezione eliminano questo passaggio. Piccoli cerchi colorati sotto ogni card prodotto mostrano subito quali colori sono disponibili. Il cliente clicca su un colore e l’immagine della card cambia. Confronta i colori senza mai lasciare la pagina collezione.
In questo articolo vediamo come funzionano, quale app serve e come configurarli.
In questo articolo
- Perché i campioni nella collezione contano
- Pagina prodotto vs pagina collezione
- Come funziona Rubik Combined Listings
- Configurazione passo dopo passo
- Vantaggi SEO
- Design e personalizzazione
- Domande frequenti
Perché i campioni nella collezione contano
La pagina collezione è il punto di ingresso per la maggior parte dei clienti. Arrivano da Google, da un annuncio o dalla navigazione interna e si trovano davanti a una griglia di prodotti. La decisione di cliccare su un prodotto dipende dall’immagine e da poche altre informazioni visibili.
Senza campioni colore, ogni prodotto mostra una sola immagine nella card. Se il cliente cerca una borsa rossa e la card mostra la versione nera, potrebbe non cliccare mai. Non sa che esiste la versione rossa.
Con i campioni colore, il cliente vede immediatamente tutti i colori disponibili. Può passare il mouse sul cerchio rosso e vedere l’anteprima del prodotto in rosso direttamente nella griglia. Questo aumenta i clic sulle pagine prodotto e, di conseguenza, le conversioni.
Nike, ASOS e Uniqlo usano questa funzionalità da anni nelle loro pagine categoria. Su Shopify, serve un’app per ottenerla.
Pagina prodotto vs pagina collezione
Questa distinzione è fondamentale. I campioni colore sulla pagina prodotto e quelli sulla pagina collezione sono due funzionalità diverse gestite da app diverse.
Rubik Variant Images mostra i campioni colore e filtra la galleria sulla pagina prodotto. Quando il cliente è sulla scheda di un prodotto specifico, vede gli swatch e la galleria si filtra per variante. Ne parliamo nella guida alla configurazione delle immagini varianti.
Rubik Combined Listings mostra i campioni colore sulle card prodotto nella pagina collezione. Sono due app separate perché risolvono problemi diversi con approcci tecnici diversi.
La pagina collezione lavora con le card prodotto, non con la galleria completa. Ogni card mostra una sola immagine. I campioni cambiano quell’immagine al volo. La struttura dei dati è diversa rispetto al filtraggio della galleria prodotto.
Come funziona Rubik Combined Listings
Rubik Combined Listings prende prodotti che sono varianti colore dello stesso articolo e li collega con campioni colore visibili sia nella pagina collezione sia nella pagina prodotto.
L’approccio sfrutta la funzionalità “Combined Listings” di Shopify. Invece di avere un singolo prodotto con 8 varianti colore, puoi avere 8 prodotti separati (uno per colore), ognuno con le proprie foto dedicate, e collegarli con i campioni colore.
Sulla pagina collezione, ogni prodotto mostra la sua card con i cerchietti colore sotto. Il cliente clicca su un colore e l’immagine della card si aggiorna. Sulla pagina prodotto, i campioni funzionano come link tra i prodotti collegati.
Questo approccio ha un vantaggio extra: ogni colore ha il proprio URL, il proprio set di immagini e i propri metadati SEO. Per negozi con cataloghi ampi, questo migliora l’indicizzazione su Google.
Configurazione passo dopo passo
- Installa Rubik Combined Listings dallo Shopify App Store.
- Crea i prodotti separati per ogni colore (se non l’hai già fatto). Ogni prodotto ha le sue foto specifiche.
- Collega i prodotti nell’interfaccia dell’app. Seleziona i prodotti che appartengono allo stesso gruppo (es. “Borsa X Rossa”, “Borsa X Blu”, “Borsa X Verde”).
- Attiva l’App Embed nel theme editor.
- Verifica nella pagina collezione che i campioni appaiano sotto le card prodotto e che l’immagine cambi al clic.
Come spiega questo articolo su rubikify.com, l’approccio con prodotti separati collegati offre anche vantaggi in termini di gestione dell’inventario e flessibilità dei prezzi per colore.
Vantaggi SEO
Avere prodotti separati per colore significa che ogni colore ha il proprio URL. “borsa-pelle-rossa” e “borsa-pelle-blu” sono pagine distinte, indicizzabili separatamente da Google. Questo aumenta le possibilità di apparire nei risultati per ricerche specifiche (“borsa pelle rossa”).
Per Google Shopping, ogni prodotto separato appare con la propria immagine specifica. Non c’è rischio che la variante blu mostri la foto della versione rossa.
I campioni colore nella pagina collezione generano anche link interni tra i prodotti collegati, che rafforza la struttura del sito agli occhi dei motori di ricerca.
Design e personalizzazione
I campioni nella pagina collezione seguono regole di design leggermente diverse rispetto a quelli sulla pagina prodotto. Lo spazio è più ridotto: la card prodotto ha una larghezza limitata e i campioni devono essere compatti.
Rubik Combined Listings offre opzioni di personalizzazione per dimensione, forma e colore dei campioni nella griglia. Per la personalizzazione avanzata degli swatch, valgono gli stessi principi dell’articolo dedicato.
Un consiglio pratico: per le card della collezione, campioni piccoli (24-32px) funzionano meglio. Troppo grandi e tolgono spazio al nome prodotto e al prezzo. Troppo piccoli e diventano difficili da toccare su mobile.
Se un prodotto ha più di 5-6 colori, valuta di mostrare i primi 5 campioni con un indicatore “+3” per i restanti. Questo mantiene la card pulita senza nascondere la varietà di scelta.
Domande frequenti
Shopify mostra i campioni colore nella pagina collezione senza app?
No. La pagina collezione standard di Shopify mostra una card per prodotto con una sola immagine. Per i campioni colore nella griglia serve un’app come Rubik Combined Listings.
Qual è la differenza tra Rubik Variant Images e Rubik Combined Listings?
Rubik Variant Images mostra campioni colore e filtra la galleria sulla pagina prodotto. Rubik Combined Listings mostra campioni colore sulle card prodotto nella pagina collezione. Sono due app separate per due funzionalità diverse.
Devo creare prodotti separati per ogni colore?
Per i campioni nella pagina collezione con Combined Listings, sì. Ogni colore è un prodotto separato con le sue foto. I prodotti vengono poi collegati nell’app. Questo offre anche vantaggi SEO e per Google Shopping.
I campioni nella collezione funzionano su mobile?
Sì. I campioni sono ottimizzati per il tap su touchscreen. Su mobile, il clic su un campione aggiorna l’immagine della card. Dimensioni consigliate: 28-32px per un buon equilibrio tra visibilità e spazio.
Posso usare entrambe le app insieme?
Sì. Rubik Variant Images per la pagina prodotto (filtraggio galleria + swatch) e Rubik Combined Listings per la pagina collezione (swatch sulle card). Le due app non entrano in conflitto.
Quanti campioni colore posso mostrare per prodotto nella collezione?
Non c’è un limite tecnico. Ma per il design della card, 5-6 campioni visibili con un indicatore “+N” per gli altri è la soluzione più equilibrata.
Approfondimenti
