Come mostrare solo le immagini della variante selezionata
Il cliente seleziona “Blu” sulla pagina prodotto. L’immagine principale cambia e mostra il prodotto blu. Ma la galleria sotto? Mostra ancora tutte le foto: rosso, verde, nero, blu, tutto mischiato. 40 immagini senza ordine logico.
Questo è il comportamento standard di Shopify. Ogni prodotto ha una galleria unica e tutte le immagini vengono sempre mostrate, indipendentemente dalla variante selezionata. L’unica cosa che cambia è l’immagine principale, se hai assegnato un’immagine alla variante.
Per filtrare la galleria e mostrare solo le foto della variante scelta serve un passaggio in più. Vediamo come.
In questo articolo
- Il comportamento standard di Shopify
- Perché filtrare la galleria
- Come funziona il filtraggio
- Configurazione con Rubik Variant Images
- Immagini condivise tra varianti
- Errori comuni e come evitarli
- Domande frequenti
Il comportamento standard di Shopify
Nella gestione prodotti di Shopify, ogni variante accetta una sola immagine. Quando il cliente seleziona quella variante, Shopify scorre la galleria fino a quell’immagine. Ma non nasconde le altre. Se il prodotto ha 30 foto, il cliente le vede tutte e 30, sempre.
Per prodotti con poche varianti e poche foto, questo non crea problemi. Un prodotto in 2 colori con 3 foto ciascuno mostra 6 immagini totali. Gestibile. Ma quando i colori diventano 6, 8 o 10 e le foto per variante sono 4-5, la galleria diventa un muro di thumbnail dove il cliente si perde.
Il problema è ancora peggiore su mobile. Con uno schermo piccolo, scorrere 40 thumbnail richiede tempo e pazienza. Molti clienti semplicemente abbandonano.
Perché filtrare la galleria
I vantaggi del filtraggio sono diretti. Il cliente vede solo le foto rilevanti per la sua scelta. Meno confusione, meno scorrimento, meno dubbi. Seleziona “Rosso” e vede fronte, retro, dettaglio e foto ambientata del prodotto rosso. Nient’altro.
Questo riduce i resi perché il cliente sa esattamente cosa sta comprando. Aumenta il tempo sulla pagina perché navigare 5 foto specifiche è più coinvolgente che scorrere 40 foto miste. E migliora il tasso di conversione perché il percorso dall’interesse all’acquisto è più diretto.
Secondo i dati, il 22% dei resi online avviene perché il prodotto non corrisponde alle aspettative visive del cliente. Una galleria filtrata riduce significativamente questo problema.
Come funziona il filtraggio
Il concetto è semplice. Invece di assegnare una sola immagine per variante (il limite di Shopify), assegni un gruppo di immagini. Quando il cliente seleziona una variante, la galleria nasconde tutte le foto che non appartengono a quella variante e mostra solo quelle pertinenti.
Tecnicamente questo richiede un livello di dati aggiuntivo rispetto a quello nativo di Shopify. I dati dell’associazione immagine-variante vengono salvati nei metafield del prodotto, che si caricano insieme alla pagina senza rallentamenti.
Il cambio della galleria avviene istantaneamente. Non c’è ricaricamento della pagina, nessuna chiamata al server. Le immagini sono già caricate; il filtraggio semplicemente nasconde e mostra quelle giuste.
Configurazione con Rubik Variant Images
Rubik Variant Images gestisce sia l’assegnazione multipla di immagini sia il filtraggio della galleria. Ecco come configurarlo:
- Installa l’app e attiva l’App Embed nel theme editor di Shopify.
- Apri un prodotto nell’interfaccia di Rubik. Vedrai la galleria completa e l’elenco delle varianti.
- Trascina le immagini sotto ogni variante. Le prime 4 foto sotto “Rosso”, le successive sotto “Blu”, e così via.
- Imposta le immagini comuni (opzionale). Se hai una foto della confezione o della guida taglie che vale per tutte le varianti, assegnala come immagine condivisa.
- Salva e testa. Apri la pagina prodotto, cambia variante e verifica che la galleria si aggiorni correttamente.
Per un catalogo ampio, Rubik offre anche l’assegnazione automatica con IA che analizza nomi dei file e colori dominanti per abbinare le immagini alle varianti corrette. Ne parliamo nella guida sulle immagini multiple per variante.
Immagini condivise tra varianti
Non tutte le foto sono specifiche di una variante. La foto della scatola, la tabella delle taglie, lo scatto lifestyle generico: sono immagini che il cliente deve vedere indipendentemente dal colore selezionato.
Rubik permette di impostare queste foto come “immagini comuni”. Appariranno sempre nella galleria, in aggiunta alle foto specifiche della variante selezionata. Puoi anche decidere la posizione: all’inizio o alla fine della galleria.
Questo risolve un problema frequente: il cliente che cambia variante e non trova più la guida taglie perché era associata solo a un’altra variante.
Errori comuni e come evitarli
Dimenticare di assegnare le immagini a una variante. Se una variante non ha immagini assegnate in Rubik, la galleria mostrerà tutte le immagini del prodotto (comportamento di fallback). Controlla che ogni variante abbia almeno un’immagine.
App Embed non attivato. Dopo l’installazione, devi attivare l’App Embed nel theme editor. Senza questo passaggio, l’app non funziona. Consulta la nostra guida su come risolvere quando le immagini varianti non vengono mostrate.
Immagini duplicate. Se assegni la stessa foto a più varianti e anche come immagine comune, apparirà due volte. Verifica che le immagini condivise non siano anche assegnate a varianti specifiche.
Ordine delle immagini. Rubik rispetta l’ordine in cui trascini le foto. Se vuoi che la foto frontale appaia per prima, posizionala in cima. Puoi anche riordinare le immagini nella nostra guida alla configurazione.
Domande frequenti
Shopify filtra la galleria per variante in modo nativo?
No. Shopify permette di assegnare una sola immagine per variante e scorre fino a quell’immagine quando la variante viene selezionata. Ma non nasconde le altre foto. La galleria completa resta sempre visibile.
Quante immagini posso assegnare per variante con Rubik?
Non c’è un limite nell’app. Puoi assegnare quante immagini servono. Il limite è quello di Shopify: fino a 250 immagini per prodotto.
Il filtraggio rallenta la pagina?
No. Tutte le immagini si caricano con la pagina. Il filtraggio è un’operazione lato client che nasconde e mostra le foto istantaneamente, senza richieste al server.
Posso avere immagini che appaiono per tutte le varianti?
Sì. Le immagini comuni (guida taglie, confezione, foto lifestyle) possono essere impostate per apparire sempre, indipendentemente dalla variante selezionata.
Serve modificare il codice del tema?
No. Rubik funziona come App Embed e si attiva dal theme editor. Nessuna modifica al codice Liquid del tema. Compatibile con la maggior parte dei temi Shopify.
Cosa succede se non assegno immagini a una variante?
La galleria mostrerà tutte le immagini del prodotto per quella variante (comportamento di fallback). Per il filtraggio completo, ogni variante deve avere almeno un’immagine assegnata.
Funziona con i video nella galleria prodotto?
Rubik gestisce le immagini nella galleria. I video Shopify nella galleria prodotto restano visibili e non vengono filtrati. Se hai video specifici per variante, contatta il supporto per soluzioni personalizzate.
Approfondimenti
