Guida alla configurazione delle immagini varianti su Shopify
Hai i prodotti caricati, le foto pronte e le varianti create. Ora vuoi che ogni variante mostri le sue immagini specifiche. Il cliente seleziona “Verde” e vede solo le foto del verde. Seleziona “Grigio” e la galleria si aggiorna.
Questa guida ti accompagna dall’installazione dell’app fino alla galleria filtrata e funzionante. Ogni passaggio è spiegato in dettaglio, con le soluzioni ai problemi che potresti incontrare.
In questo articolo
- Prerequisiti
- Installazione e attivazione
- Assegnazione manuale delle immagini
- Assegnazione automatica con IA
- Impostare immagini comuni
- Configurare i campioni colore
- Ordinare le immagini
- Test e verifica
- Problemi comuni
- Domande frequenti
Prerequisiti
Prima di iniziare, verifica di avere tutto pronto.
Prodotti con varianti. Le immagini varianti funzionano solo su prodotti che hanno almeno un’opzione (colore, taglia, materiale). Se il tuo prodotto non ha varianti, non c’è nulla da filtrare.
Immagini caricate. Carica tutte le foto nella galleria prodotto di Shopify prima di configurare Rubik. L’app lavora con le immagini già presenti nel prodotto.
Naming convention. Non obbligatoria ma consigliata. Se i tuoi file si chiamano “giacca-rossa-fronte.jpg”, “giacca-rossa-retro.jpg”, l’IA di Rubik li assegna automaticamente alla variante rossa. Con nomi come “IMG_4521.jpg” servirà l’assegnazione manuale.
Installazione e attivazione
Installa Rubik Variant Images dallo Shopify App Store. Dopo l’installazione, il passaggio fondamentale è l’attivazione dell’App Embed.
Vai su Negozio Online > Temi > Personalizza. Nel pannello laterale, cerca la sezione “App Embed” e attiva Rubik Variant Images. Senza questo passaggio l’app non funziona sulla pagina prodotto. Se salti questa fase e ti chiedi perché le immagini varianti non vengono mostrate, il motivo è quasi sempre questo.
Salva il tema e torna all’admin di Shopify. Ora sei pronto per configurare i prodotti.
Assegnazione manuale delle immagini
Nell’admin di Shopify, vai alla sezione dell’app Rubik e seleziona un prodotto. Vedrai due aree: la galleria completa del prodotto in alto e le varianti in basso.
Per ogni variante, trascina le immagini dalla galleria. Per esempio, trascina le prime 4 foto sotto “Rosso” e le successive 4 sotto “Blu”. L’ordine in cui posizioni le foto sarà l’ordine in cui appariranno nella galleria filtrata.
Puoi assegnare la stessa immagine a più varianti. Se hai una foto del prodotto in contesto che funziona per tutti i colori, trascinala sotto ogni variante. Oppure usa la funzione “immagini comuni” (ne parliamo sotto).
Quando hai finito con tutte le varianti, clicca Salva. Le modifiche diventano attive immediatamente sulla pagina prodotto.
Assegnazione automatica con IA
Per chi ha decine o centinaia di prodotti, l’assegnazione manuale immagine per immagine richiede troppo tempo. Rubik offre un sistema di assegnazione automatica basato sull’intelligenza artificiale.
L’IA analizza tre segnali: il nome del file, i colori dominanti nell’immagine e i metadati. Se il file si chiama “borsa-blu-navy-fronte.jpg” e hai una variante “Blu Navy”, il match è immediato. Per immagini con nomi generici, l’IA si basa sull’analisi del colore dominante.
La precisione si aggira intorno all’80-90%. Dopo l’assegnazione automatica, rivedi il risultato e correggi manualmente i casi che l’IA non ha colto. Su un catalogo di 200 prodotti, questa combinazione ti fa risparmiare ore di lavoro manuale.
Impostare immagini comuni
Alcune foto non appartengono a una variante specifica. La guida alle taglie, la foto della confezione, l’immagine del brand: devono apparire indipendentemente dalla variante selezionata.
In Rubik, queste immagini si assegnano come “immagini comuni”. Appariranno sempre nella galleria, in aggiunta alle foto della variante scelta. Puoi posizionarle all’inizio o alla fine della sequenza.
Configurare i campioni colore
Rubik non si limita al filtraggio della galleria. L’app sostituisce anche i dropdown standard di Shopify con campioni colore visivi. Puoi scegliere tra cerchi colorati, thumbnail con foto del prodotto e pulsanti a pillola.
Per ogni opzione del prodotto (Colore, Taglia, Materiale) puoi impostare un tipo di swatch diverso. Cerchi per Colore, pillole per Taglia, thumbnail per Design. La personalizzazione dei campioni include forma, dimensione, bordi, effetti hover e stile dell’indicatore di selezione.
Ordinare le immagini
L’ordine delle immagini nella galleria filtrata corrisponde all’ordine in cui le hai posizionate in Rubik. La prima immagine assegnata diventa l’immagine principale quando quella variante è selezionata.
Un ordine consigliato: foto frontale per prima, poi retro, poi dettagli, poi foto ambientata. Questo schema funziona bene per abbigliamento, accessori e arredamento. Per prodotti tecnici, potresti preferire una panoramica generale seguita dalle specifiche.
Puoi riordinare le immagini in qualsiasi momento trascinandole nella nuova posizione. Il cambiamento si riflette immediatamente dopo il salvataggio.
Test e verifica
Dopo la configurazione, verifica il risultato direttamente sul negozio. Apri la pagina prodotto e prova a selezionare diverse varianti. Controlla questi punti:
- La galleria mostra solo le immagini della variante selezionata.
- Le immagini comuni appaiono per tutte le varianti.
- L’ordine delle foto è corretto.
- I campioni colore (se attivati) funzionano e cambiano la galleria al clic.
- Su mobile il comportamento è identico.
Testa anche la velocità di caricamento. Se tutto è configurato correttamente, non dovresti notare alcun rallentamento. Per consigli sulla performance, leggi i nostri 10 consigli per velocizzare il negozio Shopify.
Problemi comuni
La galleria non si filtra. Controlla che l’App Embed sia attivato nel theme editor. Verifica che il prodotto abbia immagini assegnate in Rubik (non solo nell’admin di Shopify).
Immagini mancanti per una variante. Se una variante mostra tutte le immagini del prodotto, significa che non ha immagini assegnate in Rubik. Apri il prodotto nell’app e completa l’assegnazione.
Ordine sbagliato. Riordina le immagini nell’interfaccia di Rubik trascinandole nella posizione corretta. L’ordine nella galleria Shopify non influisce sull’ordine in Rubik.
Conflitto con il tema. Rubik usa il Shadow DOM per isolare il suo CSS. Se noti problemi visivi, verifica che non ci siano altre app che modificano la galleria prodotto. Per una guida completa alla risoluzione problemi, leggi il nostro articolo sulle immagini varianti non mostrate.
Domande frequenti
Quanto tempo serve per configurare un prodotto?
Un prodotto con 5 varianti e 20 foto si configura in 2-3 minuti con l’assegnazione manuale. Con l’IA automatica, meno di un minuto.
Devo riconfigurare tutto se cambio tema?
No. I dati delle immagini varianti sono salvati nei metafield del prodotto, non nel tema. Se cambi tema, basta riattivare l’App Embed nel nuovo tema e tutto funziona come prima.
Posso configurare più prodotti contemporaneamente?
Sì. L’assegnazione automatica con IA può elaborare più prodotti in batch. Per l’assegnazione manuale, lavori un prodotto alla volta ma puoi navigare rapidamente tra i prodotti nell’interfaccia dell’app.
Cosa succede se aggiungo nuove immagini al prodotto dopo la configurazione?
Le nuove immagini appariranno nella galleria di Rubik ma non saranno assegnate a nessuna variante. Dovrai assegnarle manualmente o rieseguire l’assegnazione automatica per quel prodotto.
Funziona con tutti i temi Shopify?
Rubik funziona con la maggior parte dei temi che supportano gli App Embed, inclusi Dawn e i principali temi a pagamento. Se il tema ha una galleria prodotto fortemente personalizzata, potrebbe servire una configurazione aggiuntiva.
Posso disattivare il filtraggio per un singolo prodotto?
Sì. Se non assegni immagini a un prodotto in Rubik, l’app non interviene e la galleria mostra il comportamento standard di Shopify per quel prodotto.
Approfondimenti
