Immagini e contenuti multimediali
Immagini dei prodotti, immagini degli attributi, immagini delle categorie e dei produttori e video dei prodotti: questa guida spiega dove si trovano i file, come il negozio online genera anteprime in tutte le dimensioni, come sostituire un'immagine e cosa fare se manca un'immagine.
In sintesi
- Un'immagine, tante dimensioni: caricate un'immagine sorgente e il negozio genera automaticamente le anteprime per gli elenchi, la pagina del prodotto e la vista ingrandita. Le dimensioni sono indicate in Impostazioni → Design → Immagini.
- Immagini del prodotto: nella scheda «Immagini» dell’articolo. La prima riga di immagini è l’immagine principale; è possibile modificare l’ordine utilizzando il pulsante con la freccia «Sposta».
- Sostituire l’immagine: il modo più sicuro è utilizzare un nuovo nome file. I browser conservano le immagini fino a un anno e, se il nome rimane lo stesso, spesso continuano a mostrare la vecchia immagine.
- Nomi dei file e formati: solo lettere da a a z, cifre, trattino e trattino basso. Il negozio accetta immagini nei formati JPG, PNG, GIF e WebP.
- WebP: un’impostazione converte tutte le anteprime in WebP. Non è necessario convertire le immagini originali.
- Gestione file: in alto a destra, sopra il proprio nome, alla voce «Strumenti». Il limite di caricamento è stabilito dal server.
In questa guida
Non incluso in questa guida: slider, banner e immagini della pagina iniziale (guida "Progettare la pagina iniziale"), immagini nelle pagine del builder (guida "xoContentEditor"), caratteristiche e varianti in dettaglio (guida "Attributi del prodotto") e la procedura Porter passo dopo passo (guida "Importazione ed esportazione").
Dove si trovano le immagini
Ogni tipo di immagine ha una propria cartella di origine. Un campo immagine nel backend memorizza solo il nome del file relativo a questa cartella, ad esempio tasse-blau.jpg o becher/tasse-blau.jpg.
| Tipo di immagine | Immagini di origine nel File Manager | Immagini di anteprima (generate dal negozio) |
|---|---|---|
| Immagini dei prodotti e anteprime video | Immagini → immagini di origine → prodotti | thumbnail/prodotti/ nelle dimensioni mini, small, medium, large, xlarge |
| Immagini degli attributi (immagine delle opzioni, immagini aggiuntive, immagine del valore) | Immagini → immagini sorgente → opzioni | thumbnail/opzioni/ e thumbnail/opzioni_prodotto/ |
| Immagini delle categorie, oltre alle immagini degli articoli di notizie e provenienti da xoContentEditor | Immagini → immagini sorgente → categorie | thumbnail/categorie/ in small, medium, large |
| Immagini dei produttori (loghi) | Immagini → immagini sorgente → produttori | thumbnail/produttori/ in piccolo, grande |
| Immagini dello slider, compresa la versione mobile | Immagini → immagini sorgente → slider | thumbnail/slider/ |
| Video dei prodotti (MP4) | File → video | – |
- Le miniature vengono generate al primo accesso a una pagina, dopodiché il server fornisce il file definitivo. Il gestore dei file nasconde la cartella "
thumbnail". Non cancellare nulla manualmente da lì; a tale scopo è disponibile la funzione "Elimina miniature", vedi Dimensioni delle immagini. - Nella cartella «quellbilder» non è possibile caricare nulla, ma solo nelle sue sottocartelle.
- I nomi delle cartelle sono riportati in Impostazioni → Generale → Opzioni moduli, ad esempio «Cartella sorgente immagini prodotti». Questo gruppo è visibile solo all’amministratore principale. Non modificare i valori: in caso contrario, il negozio online non sposterà i file e non riuscirà più a trovare le immagini esistenti.
Il gestore file
Con il gestore file è possibile caricare immagini, video e documenti sul server. Si apre in alto a destra: cliccare sul proprio nome e selezionare la voce “Gestore file” sotto “Strumenti”. Inoltre, accanto a ogni campo immagine, è possibile aprirlo tramite il pulsante “Seleziona immagine”, che porta direttamente alla cartella corrispondente.
Il gestore file mostra la cartella delle immagini dei prodotti con le anteprime; i nuovi file vengono aggiunti tramite «Carica». Clicca per ingrandire.
Sezioni e formati
- La cartella «Immagini» contiene le immagini di origine e altri elementi grafici come loghi e simboli. Nelle cartelle delle immagini sotto «immagini di origine», il Gestore file accetta file JPG, PNG, GIF e WebP, mentre nella cartella principale «Immagini» accetta anche SVG e ICO.
- La cartella «File» accetta anche PDF, documenti Office, MP4 e molti altri formati. I video dei prodotti vanno inseriti nella sottocartella «video».
- «Download» contiene i file degli articoli scaricati.
- Il gestore di file non accetta nelle cartelle delle immagini foto in formato HEIC provenienti dallo smartphone, né file AVIF e TIFF. Convertiteli preventivamente in JPG o WebP.
Limite di upload e file di grandi dimensioni
Il limite per un singolo file è determinato dalle impostazioni PHP del server. Viene applicato il valore minore tra quelli relativi al caricamento dei file e ai dati dei moduli. Cliccando su «Carica» si apre direttamente la finestra di selezione file del computer; in questo caso il gestore dei file non mostra il limite. Per sapere qual è il limite nel vostro negozio, rivolgetevi all’assistenza.
Per un file PDF di grandi dimensioni avete tre opzioni: ridurre le dimensioni del file (la maggior parte dei programmi PDF consente di salvare i documenti per il web), caricarlo tramite SFTP nella cartella files oppure chiedere all’assistenza di aumentare il limite.
File con lo stesso nome
Se nella cartella è già presente un file con lo stesso nome, il gestore dei file chiederà conferma. «Sovrascrivi» sostituisce il file esistente, «Rinomina» salva il nuovo file con un nome diverso. Cosa fare dopo la sovrascrittura è spiegato nella sezione «Sostituisci immagine».
Modifica immagine
La matita accanto all’immagine di un prodotto o di un attributo («Modifica immagine sorgente») apre l’editor di immagini del gestore file con le funzioni «Ritaglia», «Ridimensiona» e «Capovolgi/Ruota». Supporta i formati JPG, PNG e GIF, ma non i file WebP. Al termine, salvare l’articolo affinché il negozio online generi nuovamente le immagini di anteprima.
Se il caricamento non va a buon fine
- Se nel gestore file l’anteprima di un PNG rimane vuota o il caricamento di un PNG si interrompe, ciò è dovuto a un innocuo avviso durante la lettura del profilo colore. Da allora il gestore file salva comunque tali file. 4.9.106
- Sui server con PHP 8.5, ogni caricamento di immagini veniva interrotto con un messaggio relativo a
imagedestroy().ab 4.9.47 - Se il caricamento non va a buon fine con una versione aggiornata, contattate l’assistenza indicando il nome del file, la dimensione e il messaggio visualizzato.
Nomi dei file
Un nome file corretto deve essere composto esclusivamente da lettere minuscole a–z, cifre, trattini e trattini bassi, ad esempio trinkflasche-750ml-blau.jpg. Evitate di inserire dieresi, spazi e virgole.
Cosa rinomina il negozio stesso
- Caricamento nel gestore file: la «ü» diventa «u», la «ß» diventa «sz». Gli spazi e tutti gli altri caratteri, ad eccezione di lettere, cifre, trattini e trattini bassi, vengono sostituiti con «_».
- Salvataggio di un articolo, una categoria o un produttore: il negozio rinomina l’immagine di origine (ä → ae, ö → oe, ü → ue, ß → ss, spazi e virgole → «_») e inserisce il nuovo nome. Altri caratteri speciali come «é» o «&» rimangono invariati.
- Importazione tramite URL dell’immagine: il programma di importazione scrive il nome in minuscolo e sostituisce le dieresi.
Perché le dieresi creano comunque problemi
I file che vengono inseriti in una cartella tramite FTP o importazione mantengono il loro nome. Quando si salva un articolo, il negozio rinomina il file. Se un’importazione successiva o un altro articolo riporta il vecchio nome con le dieresi, il negozio non riesce più a trovare il file. L’aiuto di Porter richiede quindi espressamente nomi senza dieresi e spazi.
Inoltre, si fa distinzione tra maiuscole e minuscole: Tasse.JPG e tasse.jpg sono due file diversi per il server.
Caricare e ordinare le immagini dei prodotti
È possibile gestire le immagini dei prodotti alla voce Prodotti → Categorie / Prodotti, nella scheda «Immagini» dell’articolo.
Ogni riga dell’immagine presenta un campo «Immagine del prodotto», una descrizione per ogni lingua e, a destra, la freccia per lo spostamento; la prima riga è l’immagine principale. Cliccare per ingrandire.
Ecco come fare
- Aprire l’articolo e passare alla scheda «Immagini».
- Clicca su «Aggiungi immagine(i)». Il gestore dei file aprirà la cartella delle immagini del prodotto. Carica i file e selezione uno o più di essi. Ogni file diventerà una riga immagine a sé stante.
- In alternativa, con «Aggiungi nuova riga immagine» è possibile creare una riga vuota e selezionare un file nel campo «Immagine del prodotto» tramite «Seleziona immagine».
- Inserite una descrizione per ogni lingua (campi «Descrizione 1», «Descrizione 2» …), ad esempio «Borraccia da 750 ml in blu, vista laterale». Il negozio online le utilizza come testo alternativo per i motori di ricerca e gli screen reader. In assenza di descrizione, verrà visualizzato il nome del prodotto.
- Salvare l’articolo.
Ordine e immagine principale
- La prima riga («Immagine del prodotto 1») è l’immagine principale. Appare negli elenchi dei prodotti, nel carrello e come prima immagine della galleria.
- Trascinare una riga utilizzando il pulsante con la freccia (tooltip «Sposta») in un’altra posizione. Il numero accanto a «Immagine del prodotto» indica la nuova posizione.
- Il cestino rosso rimuove una riga dall’articolo. Il file rimane sul server.
- Se lo stesso file è presente due volte nell’articolo, la galleria lo mostra solo una volta.
Altri campi nella scheda
- «Colonna fissa (vista dettagli)» definisce per questo articolo quale colonna della pagina del prodotto rimane fissa durante lo scorrimento; vedi Pagina del prodotto.
- «Fallback senza immagine del prodotto» determina cosa viene visualizzato nella pagina del prodotto in assenza di immagini; vedi Senza immagine.
- I video si gestiscono nella scheda adiacente «Video», vedi Video del prodotto.
Sostituire un'immagine
È possibile sostituire un’immagine utilizzando un nuovo nome file oppure mantenendo lo stesso nome. Il nuovo nome è l’opzione più sicura.
Con un nuovo nome del file (consigliato)
- Caricare il nuovo file con un nuovo nome, ad esempio
tasse-blau-v2.jpg. - Selezionatela nell’articolo nel campo «Immagine del prodotto» e salvate.
- Poiché l’indirizzo dell’immagine è nuovo, tutti i visitatori vedranno immediatamente la nuova immagine. Il vecchio file potrà essere eliminato in un secondo momento; consultare la sezione “Pulizia”.
Con lo stesso nome del file
- Carica il file nel gestore file nella stessa cartella e seleziona «Sovrascrivi». Fa fede il nome che compare nel campo dell’immagine.
- Per le immagini di prodotto, aprite l’articolo e salvatelo. In questo modo, il negozio online cancella le anteprime di tutte le immagini di quell’articolo e le ricrea al prossimo accesso.
- Per le immagini delle categorie e dei produttori e per le piccole immagini degli attributi nella selezione, il salvataggio non aggiorna le anteprime. Selezionate in Impostazioni → Design → Immagini la scheda «Elimina miniature».
- Aggiorna la pagina nel browser svuotando la cache: su Windows con Ctrl + F5, su Mac con Cmd + Shift + R.
Dimensioni delle immagini, risoluzione e ritaglio
Il negozio genera cinque dimensioni per ogni immagine di prodotto. È il negozio stesso a decidere quali utilizzare e dove; su smartphone carica versioni più piccole rispetto a quelle per schermi di grandi dimensioni. Tutte le impostazioni relative si trovano in Impostazioni → Design → Immagini.
In Impostazioni → Design → Immagini sono disponibili il formato di output, lo sfondo, il ritaglio e le dimensioni delle immagini; le schede sopra di esse contengono gli strumenti per le immagini. Clicca per ingrandire.
| Dimensioni | Predefinite | Dove vengono utilizzate nel negozio |
|---|---|---|
| Mini | 330 × 330 pixel | Carrello, riquadri «Best seller» e «Recensioni», selezione delle immagini nella pagina del prodotto |
| piccolo | 495 × 495 pixel | Slider dei prodotti nella visualizzazione a blocchi e in miniatura, riquadri come “In evidenza” e “Nuovi prodotti” |
| medio | 660 × 660 pixel | Slider dei prodotti in visualizzazione a elenco e a galleria |
| grande | 1320 × 1320 pixel | Pagina del prodotto, ingrandimento al passaggio del mouse |
| ad alta risoluzione | 1980 × 1980 pixel | Visualizzazione ingrandita cliccando sull'immagine, lente di ingrandimento |
Imposta dimensioni
- È possibile regolare «Larghezza immagine prodotto (alta risoluzione)» e «Altezza immagine prodotto (alta risoluzione)». Le dimensioni più piccole mantengono la loro larghezza e assumono automaticamente le proporzioni. Per le immagini di categoria vale lo stesso per la versione grande.
- Sono consentiti valori compresi tra 10 e 5000 pixel. Dopo il salvataggio, il negozio online elimina le anteprime interessate e le ricrea alla successiva visualizzazione.
- I valori determinano la risoluzione delle immagini di anteprima, non le dimensioni con cui un’immagine appare sulla pagina. Lo spazio è determinato dal layout.
Quale risoluzione caricare?
- Caricate immagini dei prodotti di dimensioni almeno pari a quelle ad alta risoluzione, ovvero 1980 × 1980 pixel per impostazione predefinita, e con lo stesso rapporto di aspetto, che per impostazione predefinita è quadrato. Le immagini più piccole vengono ingrandite dal negozio online e risultano quindi sfocate.
- Il negozio online non ridimensiona le immagini sorgente caricate. Preparate le immagini direttamente dalla fotocamera con una lunghezza del lato di circa 2000 pixel, in modo da risparmiare spazio di archiviazione.
- Salvate le foto in formato JPG o WebP, mentre le immagini con sfondo trasparente in formato PNG o WebP.
Ritaglio o bordi
Se le proporzioni di un’immagine non corrispondono alle dimensioni impostate, ci sono due possibilità. Con la «Funzione di ritaglio per immagini», il negozio esegue uno zoom e ritaglia leggermente la parte superiore e inferiore oppure quella sinistra e destra. Per impostazione predefinita, questa funzione è attivata per le immagini dei prodotti, delle categorie e dello slider.
Senza ritaglio, viene inserita l’intera immagine e i margini liberi vengono riempiti con «Miniature: colore di sfondo», impostato di default su #FFFFFF (bianco). È consigliabile caricare le immagini direttamente con le proporzioni corrette, in modo da evitare sia i margini che il ritaglio.
Bordi neri
I bordi neri o uno sfondo nero si verificano quando in «Miniature: trasparenza» è selezionato il valore « products » e le anteprime vengono generate in formato JPG. Il formato JPG non supporta la trasparenza, pertanto le aree trasparenti diventano nere.
Soluzione: deselezionare « products », in modo che il colore di sfondo riempia le aree, oppure impostare il formato di output su webp o png, vedi WebP. Verificare anche che «Thumbnails: Colore di sfondo» non sia impostato per errore su nero. Successivamente, cliccare su «Elimina miniature».
Altre impostazioni
- «Qualità immagine delle miniature» si applica solo ai file JPG. L’impostazione predefinita è 100; la descrizione dell’impostazione indica 80 come un buon compromesso tra qualità e dimensione del file.
- Con «Filigrana immagine» e «Filigrana nelle immagini», il negozio sovrappone un’immagine, ad esempio il vostro logo in formato PNG con sfondo trasparente, ai tipi di immagine selezionati. Potete impostare le dimensioni e la posizione nei campi sottostanti.
- Per le immagini in xoContentEditor sono disponibili gli angoli arrotondati: campo «Arrotondamento» nel blocco immagine, da «Nessuno (angolare)» a «Cerchio (rotondo)», vedi guida xoContentEditor. Per le immagini dei prodotti non è prevista alcuna impostazione in merito.
- Se modificate il colore di sfondo, la qualità, la filigrana o il ritaglio, il negozio cancella automaticamente tutte le immagini di anteprima. In «Miniature: trasparenza» e nel formato di output ciò non avviene; in questi casi dovrete selezionare successivamente «Elimina miniature».
Le schede nella parte superiore del gruppo
| Schede | Effetto |
|---|---|
| «Ricalcola miniature (immagini)» | crea in anticipo le dimensioni selezionate per tutte le immagini |
| «Elimina miniature» | elimina tutte le anteprime; il negozio le ricrea al prossimo accesso. Le immagini originali rimangono inalterate. |
| «Pulisci cartella immagini sorgente» | elimina le immagini sorgenti non utilizzate, vedi Pulizia |
| «Ripristina dimensioni immagini originali» | ripristina tutte le dimensioni delle immagini ai valori predefiniti di fabbrica ed elimina le anteprime |
Le schede compaiono solo se l’opzione «Attiva anteprime immagini» è impostata su « true ». Lascia questa impostazione così com’è: senza di essa, dovresti copiare manualmente ogni dimensione nella cartella delle anteprime.
Miniature in formato WebP
Il formato in cui il negozio fornisce le anteprime è determinato da un’unica impostazione. Non è necessario convertire le immagini di origine.
- Impostare Impostazioni → Design → Immagini → Formato di output predefinito per le miniature su
webp. L’impostazione predefinita èdynamic: l’anteprima mantiene il formato dell’immagine originale. - Selezionate la scheda «Elimina miniature». In caso contrario, le vecchie miniature in formato JPG e PNG continueranno a occupare spazio di archiviazione.
- Visita alcune pagine e controlla le immagini. Gli indirizzi delle immagini terminano ora con
.webp; il negozio li genera dalle tue immagini sorgente in formato JPG, PNG, GIF e WebP.
- L’opzione «Qualità delle immagini delle miniature» non ha effetto sui file WebP.
- Se dopo la conversione salvate un articolo, una categoria o un produttore, il negozio online adatta l’estensione dell’immagine di origine, ad esempio da
tasse.jpgatasse.webp. Il contenuto del file rimane quello originale. - Secondo la descrizione dell’impostazione, la funzione «Catalogo PDF» richiede il formato
jpg.
Lazy Loading
Con il Lazy Loading, il browser carica un’immagine solo poco prima che entri nell’area visibile. In questo modo, la prima visualizzazione di un lungo elenco di prodotti risulta più veloce.
Ecco come funziona
- L’impostazione si trova in Impostazioni → Aspetto → Immagini → Caricamento differito per le immagini ed è preimpostata su
true. - Durante lo scorrimento, il caricamento inizia circa 400 pixel prima che un’immagine diventi visibile, in modo che sia pronta in tempo.
Disattivazione
Se si imposta «Caricamento differito per le immagini» su « false », il browser carica immediatamente tutte le immagini di una pagina, comprese quelle in fondo. Si consiglia quindi di lasciare attiva questa impostazione, a meno che il supporto tecnico non consigli diversamente.
Immagini negli elenchi dei prodotti
Negli elenchi delle categorie, nei risultati di ricerca e nei blocchi dei prodotti, ogni riquadro mostra l’immagine principale. Ulteriori immagini sono disponibili tramite il cambio di immagine al passaggio del mouse, la striscia di anteprima e il pulsante della galleria. Le impostazioni si trovano in Impostazioni → Design → Elenco prodotti.
La striscia di anteprima mostra fino a quattro riquadri sotto l’immagine; le immagini aggiuntive sono raggruppate sotto il simbolo «+N», mentre il pulsante in basso a destra apre la galleria. Cliccare per ingrandire.
Cambio di immagine al passaggio del mouse
Se un riquadro nella vista galleria mostra un’altra immagine al passaggio del mouse, significa che l’opzione «Visualizzazione di immagini alternative nell’elenco dei prodotti» è attivata. Viene visualizzata la seconda riga di immagini dell’articolo. Gli articoli con una sola immagine non cambiano.
L’impostazione si trova nel gruppo Impostazioni → Design → Elenco prodotti. Se non la vedete lì, significa che è abilitata solo per XONIC; l’assistenza la attiverà per voi. Se attivate la striscia di anteprima in un’area, il cambio di immagine in quella zona viene automaticamente disattivato.
Striscia di anteprima
L’opzione «Altre immagini come striscia di anteprima nell’elenco» mostra sotto l’immagine fino a quattro piccole immagini dell’articolo. Cliccandoci sopra si cambia l’immagine principale. Se non ci stanno tutte, l’ultimo riquadro raggruppa il resto come «+N».
È possibile attivare la striscia per ciascuna sezione: elenco delle categorie, presentazione del prodotto (blocchi di prodotto nelle pagine iniziali, di categoria e di prodotto) ed elenco delle opzioni (elenco delle varianti nella pagina del prodotto), sia nella visualizzazione a galleria che in quella a elenco. Per impostazione predefinita, è disattivata ovunque.
Pulsante Galleria
L’opzione «Pulsante galleria nell’immagine dell’elenco» mostra un pulsante in basso a destra nell’immagine. Questo pulsante apre tutte le immagini dell’articolo in una vista ingrandita che consente di sfogliarle e ingrandirle senza dover accedere alla pagina del prodotto. Il pulsante appare solo per gli articoli con più di un’immagine.
Nascondi immagini
«Mostra immagini del prodotto» nasconde le immagini nell’elenco, mentre «Mostra immagini del prodotto (prodotti della stessa famiglia)» nasconde le immagini dell’elenco delle varianti nella pagina del prodotto. Ciò che mostra una tessera senza immagine è descritto nella sezione «Senza immagine».
La galleria immagini nella pagina del prodotto
La galleria si trova nella metà sinistra della pagina del prodotto, con il riquadro dei prezzi subito a destra. Questa disposizione è fissa nel layout. L’aspetto della galleria e i contenuti sottostanti possono essere configurati in Impostazioni → Design → Vista dettagli prodotto.
Nella visualizzazione delle immagini «swiper», sotto l’immagine grande si trova la serie di anteprime; sotto di essa appare un video in una barra separata con l’icona di riproduzione e la sua descrizione come titolo. Cliccare per ingrandire.
| Impostazione | Effetto |
|---|---|
| «Visualizzazione immagini nella scheda del prodotto» | gallery (impostazione predefinita): prima immagine grande, sotto le altre come piccole tessere; a partire dalla sesta immagine, una tessera «+N» raggruppa il resto. swiper: un’immagine grande da sfogliare con anteprime. legacy: la visualizzazione classica della vecchia versione del negozio. Su gallery e swiper, cliccando su un’immagine si apre la visualizzazione ingrandita. |
| «Modalità di visualizzazione delle immagini dinamiche» | solo su swiper: modern (impostazione predefinita) consente di scorrere e bloccare l’immagine; le frecce appaiono sul computer al passaggio del mouse; classic effettua una transizione e mostra le frecce in modo permanente |
| «Frecce di navigazione nella visualizzazione delle immagini» | Frecce sull’immagine grande anziché sulle miniature |
| «Frecce di navigazione su dispositivi mobili» | off nasconde le frecce su smartphone e tablet, dove si scorre con il dito |
| «Vista dettagliata del prodotto: colonna fissa (sinistra / destra / nessuna)» | quale colonna rimane fissa durante lo scorrimento: left la galleria (impostazione predefinita), right informazioni sul prodotto e pulsante del carrello, none nessuna. Impostazioni diverse per ogni articolo nella scheda «Immagini» alla voce «Colonna fissa (vista dettagli)». |
| «Vista dettagliata del prodotto: posizione della descrizione» | original (impostazione predefinita): descrizione sotto le immagini; right_section o left_section: come area espandibile a destra o a sinistra. Su smartphone, l’impostazione predefinita prevede l’area espandibile a destra; ciò è regolato da «Vista dettagli prodotto: posizione della descrizione sui dispositivi mobili». |
Zoom
«Tipo di zoom immagine prodotto» e «Popup zoom immagine prodotto» in Impostazioni → Design → Immagini hanno effetto nella visualizzazione classica legacy: lente di ingrandimento, finestra di zoom o ingrandimento nell’immagine. Le visualizzazioni gallery e swiper aprono, al clic, una vista ingrandita con zoom.
Immagine sopra la descrizione
È possibile inserire un’immagine aggiuntiva nella parte superiore della descrizione dell’articolo nella scheda «Descrizione/Schede»: posizionare il cursore all’inizio, selezionare l’icona dell’immagine nell’editor e importare l’immagine dal gestore dei file. Con il sistema modulare è possibile utilizzarla come modulo immagine; consultare la guida xoContentEditor.
Vista a 360 gradi
Il XONIC Shop System non supporta la vista a 360 gradi. È possibile inserire un video panoramico in formato MP4 nella galleria, si veda la sezione Video dei prodotti. Se nel vostro negozio è integrata una vista a 360 gradi, si tratta di una programmazione personalizzata; per eventuali modifiche, rivolgersi all’assistenza.
Immagini per i valori delle caratteristiche
Un valore di caratteristica come «Blu» può avere un’immagine propria, che appare nel menu di selezione, nella galleria o in entrambi i posti. La guida Attributi del prodotto spiega come creare le caratteristiche.
Il pulsante con il numero accanto all’«Immagine opzionale» apre la finestra «Immagini aggiuntive per…», in cui è possibile inserire ulteriori immagini per quel valore. Cliccare per ingrandire.
Due fonti di immagini
- Immagine del valore: in Prodotti → Caratteristiche del prodotto, accanto al valore. Si applica a tutti gli articoli con questo valore.
- Immagine opzionale: nell’articolo, nella scheda «Caratteristiche» accanto al valore, nel campo «Immagine opzionale». Si applica solo a questo articolo.
- Entrambi i file si trovano nella cartella delle immagini degli attributi (Immagini → Immagini sorgente → Opzioni). Il campo «Immagine opzionale» effettua la ricerca solo in quella cartella e non trova immagini presenti nella cartella delle immagini dei prodotti.
Dove appare l’immagine
Questo è determinato dall’impostazione «Visualizzazione immagine opzione» della caratteristica nella scheda dell’articolo: «direttamente al momento della selezione», «nella galleria immagini» o «combinata (entrambe)».
Nella galleria viene inserita solo l’«immagine opzione» dell’articolo. I pulsanti di selezione mostrano l’immagine delle opzioni e, se questa manca, l’immagine del valore. Se la visualizzazione è impostata su «nella galleria immagini» o «combinata (entrambe)», quando si seleziona un valore la galleria passa all’immagine corrispondente.
Più immagini per ogni valore
A destra del campo «Immagine opzionale» si trova un pulsante con un numero («Immagini opzionali aggiuntive»). Appare non appena l’impostazione di visualizzazione delle immagini opzionali non è impostata su «direttamente al momento della selezione». Nella finestra «Immagini aggiuntive per …» è possibile aggiungere altre immagini cliccando su «Nuova riga» e chiudere con «Salva e chiudi».
Se il cliente seleziona il valore, la galleria mostra l’immagine principale e le immagini aggiuntive relative a quel valore. Cliccando sull’immagine principale si torna alla galleria completa, ma la selezione rimane attiva.
Immagine errata o assente
- La galleria non cambia: al valore manca l’«immagine opzionale» oppure l’impostazione della visualizzazione delle immagini opzionali è impostata su «direttamente alla selezione». In alternativa, la galleria utilizza l’immagine del valore come sostituta se l’opzione «Immagine del valore della caratteristica come sostituta nella galleria immagini» è attivata in Impostazioni → Design → Vista dettagli prodotto. Attivare questa opzione solo se le immagini dei valori sono foto del prodotto e non campioni di colore.ab 4.10
- Stesso file associato a più valori: la galleria mostra ogni file una sola volta e lo associa al primo valore. Assegnate a ciascun valore un file diverso.
- Caratteristiche concatenate come colore e taglia: l’immagine è associata alla combinazione. La visualizzazione dinamica delle immagini è disponibile a partire dalla versione 4.10; prima di allora, viene visualizzata solo l’immagine
legacy.ab 4.10
Video dei prodotti
La pagina del prodotto mostra i video sotto la galleria in una barra separata con una piccola anteprima, l’icona di riproduzione e la descrizione del video come titolo. È possibile gestirli nell’articolo nella scheda “Video” con “Aggiungi nuova riga video”.
I campi
- «Video del prodotto»: un file MP4 dal gestore file (File → video) o un link a YouTube o Vimeo. Il negozio riconosce anche i video provenienti da TikTok e Facebook.
- «Miniatura del video»: un’immagine dalla cartella delle immagini del prodotto. Il negozio vi sovrappone un’icona di riproduzione. Secondo il testo di aiuto, è obbligatoria per i dispositivi Apple; inseritela quindi sempre.
- «Descrizione» per ogni lingua.
Informativa sulla privacy
Il negozio carica i video da YouTube, Vimeo, TikTok e Facebook solo dopo che il visitatore ha confermato l’avviso relativo ai contenuti esterni; YouTube viene integrato tramite youtube-nocookie.com. Indicate comunque tali servizi nella vostra dichiarazione sulla protezione dei dati. Un file MP4 proprio si trova nel vostro negozio e non richiede l’utilizzo di fornitori esterni.
Prodotti senza immagine
Se manca un’immagine, il negozio mostra un segnaposto oppure omette l’area dell’immagine. Per gli elenchi e le pagine dei prodotti sono disponibili impostazioni separate; inoltre, gli articoli senza immagine possono essere spostati in fondo all’elenco. Tutte le informazioni al riguardo sono riportate nella guida «Creare e gestire i prodotti».
Articolo principale con l’immagine di una variante
In caso di importazione da OpenXE o Xentral, un articolo master privo di immagine propria riceve automaticamente l’immagine principale di una variante. Il negozio utilizza la prima variante attiva con disponibilità di magazzino, altrimenti la prima variante attiva, sempre secondo l’ordine indicato in Impostazioni → Design → Elenco prodotti → Ordinamento dei prodotti master/slave. Un’immagine con il nome della famiglia di prodotti ha la precedenza.ab 4.9.106
Senza questa integrazione, è necessario inserire l’immagine direttamente nell’articolo principale, ad esempio utilizzando lo stesso file della variante più popolare.
Immagini di categoria e del produttore
Le immagini di categoria e del produttore vanno selezionate rispettivamente nella categoria o nella scheda del produttore. Il negozio le trasforma in riquadri, immagini di intestazione e loghi di dimensioni fisse.
Immagine di categoria
- In Prodotti → Categorie / Prodotti, modificare la categoria nel campo «Immagine della categoria». Il file si trova in Immagini → Immagini sorgente → Categorie.
- L'immagine appare come immagine di intestazione della pagina della categoria, sulle tessere delle sottocategorie e sulla pagina iniziale, nel menu e nel menu di navigazione a sinistra sullo smartphone.
- Dimensioni: «Larghezza immagine categoria (grande)» e «Altezza immagine categoria (grande)» in Impostazioni → Design → Immagini; le impostazioni predefinite sono 840 × 355 pixel, ovvero circa 2,4 : 1. Il ritaglio per le categorie è predefinito: Le immagini con un rapporto di aspetto diverso vengono ritagliate dal negozio.
- Raccomandazione: JPG o WebP, almeno 840 × 355 pixel, con lo stesso rapporto di aspetto.
Immagine del produttore
- In Prodotti → Produttori, modificare i dati del produttore nel campo «Immagine del produttore». Il file si trova in Immagini → Immagini sorgente → Produttori.
- Il logo appare nella pagina del produttore, nel riquadro del produttore, nello slider del produttore e nella pagina del prodotto.
- Dimensioni: «Larghezza immagine del produttore (grande)» e «Altezza immagine del produttore (grande)», predefinite a 300 × 150 pixel, ovvero 2 : 1. Il negozio online non ritaglia le immagini del produttore per impostazione predefinita, ma riempie i margini liberi con il colore di sfondo.
- Raccomandazione: logo in formato PNG o WebP con proporzioni 2 : 1, almeno 300 × 150 pixel. Una seconda immagine, come un banner del marchio, va inserita nella descrizione del produttore; consultare la guida «Creazione e gestione dei prodotti».
| Desiderate… | Impostazione |
|---|---|
| nascondere la grande immagine di categoria nell’intestazione della pagina della categoria | Impostazioni → Design → Generale → Nascondi immagine di intestazione della categoria: false mostra sempre, true nascondi solo quando è in corso una presentazione (impostazione predefinita), always nascondi sempre |
| Nascondere le immagini dei riquadri delle categorie | «Nascondi immagini delle categorie nella pagina iniziale» e «Nascondi immagini delle tessere delle sottocategorie», anch’esse in Impostazioni → Aspetto → Generale |
| Nascondere le immagini delle categorie nel menu a sinistra | Impostazioni → Design → Off-Canvas → Off-Canvas a sinistra: mostra immagini delle categorie |
| Nascondere il logo nell’intestazione della pagina del produttore | Impostazioni → Aspetto → Pagina del produttore → Nascondi immagine del produttore nella pagina del produttore |
| Nascondere il nome del produttore accanto al logo | "Nascondi il nome del produttore se è presente un'immagine del produttore", sempre nella stessa sezione (impostazione predefinita: attiva) |
Se si sostituisce un’immagine di categoria o del produttore con lo stesso nome, selezionare successivamente «Elimina miniature», vedere Sostituisci immagine.
Immagini tramite importazione
Per inserire le immagini di più articoli o categorie contemporaneamente, utilizzare il Porter. La guida Importazione ed esportazione illustra il funzionamento del Porter.
Immagini dei prodotti
- Nelle colonne delle immagini è riportato il nome del file relativo alla cartella delle immagini dei prodotti. I file devono essere caricati in precedenza nel gestore file o tramite SFTP.
- Con l’opzione di importazione «
path=catch», il Porter carica le immagini da un indirizzo Internet. Accetta file con le estensioni JPG, JPEG, PNG, GIF e WebP; si veda la sezione «Importazione ed esportazione». - Il Porter predefinito «Aggiornamento immagini» contiene le immagini dei prodotti con la relativa descrizione.
Immagini per molte categorie
- Caricate le immagini nella cartella Immagini → immagini sorgente → categorie.
- Eseguite l’esportazione con il porter predefinito «Aggiornamento categorie». Esso contiene la colonna per l’immagine di categoria ed è disattivato di default; consultate la guida Importazione ed esportazione.
- Inserite il nome del file per ogni categoria e reimportate il file.
- L’opzione «
path=catch» non è adatta in questo caso: salva sempre le immagini scaricate nella cartella delle immagini dei prodotti.
Contrassegnare le immagini generate dall’IA
Le immagini che avete creato o modificato con l’IA possono essere contrassegnate dal negozio con l’indicazione «Generata dall’IA». 4.10
Pulsante per ogni immagine
Su ogni immagine è presente il pulsante «Generato dall’IA – Mostra nota»: in ogni riga dell’immagine nella scheda «Immagini», sull’immagine opzionale e sulle immagini aggiuntive nella scheda «Caratteristiche», sull’immagine del valore, sull’immagine della categoria, sull’immagine del produttore, nonché nelle notizie, negli slider, nei banner e nell’xoContentEditor.
Nel negozio
Se attivata, l’immagine riporta una discreta dicitura «Generato dall’IA». Si tratta di testo vero e proprio, che gli screen reader leggono ad alta voce. Per le immagini dei prodotti, il negozio contrassegna inoltre l’immagine nei dati strutturati destinati ai motori di ricerca. La posizione e la visualizzazione (chiara o scura) si impostano in Impostazioni → Design → Contrassegno IA.
Quando è obbligatorio
Ai sensi dell’art. 50 del Regolamento sull’IA (UE) 2024/1689, applicabile dal 2 agosto 2026, devono essere contrassegnati i deepfake: immagini artificiali che assomigliano a persone, oggetti o luoghi reali e che sembrerebbero autentiche. Spetta a voi decidere se un’immagine rientri in questa categoria. In caso di dubbio, consultate il vostro consulente legale.
Al momento dell’importazione, l’indicazione è associata al file: se un’importazione introduce un’altra immagine, l’indicazione non è più valida per la nuova immagine. Nelle maschere vale quanto indicato dal pulsante.
Pulizia delle immagini obsolete
Con il passare del tempo si accumulano anteprime e immagini sorgente non più utilizzate. Due strumenti disponibili in Impostazioni → Design → Immagini consentono di liberare spazio di archiviazione.
«Elimina miniature»: senza rischi
Elimina tutte le anteprime. Il negozio le ricrea al successivo accesso a una pagina; i primi accessi richiederanno quindi un po’ più di tempo. Le immagini di origine rimangono intatte. È utile soprattutto dopo il passaggio a WebP o dopo aver modificato le dimensioni delle immagini.
«Pulisci cartella immagini originali»: solo con backup
Selezionate le cartelle Produttori, Categorie, Opzioni, Prodotti e Slider. Il negozio elimina tutti i file presenti in queste cartelle che non sono stati associati a un produttore, una categoria, un articolo, una caratteristica o uno slider come immagine. Nella cartella “Prodotti” elimina anche i video dei prodotti non utilizzati. I file eliminati non possono essere ripristinati.
Se si eliminano articoli, l’opzione “Elimina immagini dal server” ne rimuove immediatamente anche le immagini; si veda la guida Creazione e gestione dei prodotti.
images/quellbilder e non selezionate «Categorie» se utilizzate le notizie o l’xoContentEditor. In caso di domande, rivolgetevi all’assistenza.Un'immagine non viene visualizzata
Se il negozio online mostra un segnaposto, un’immagine obsoleta o non visualizza nulla, controllate questi punti in ordine.
- Cartella corretta? Un’immagine di prodotto deve trovarsi in Immagini → Immagini sorgente → Prodotti, un’immagine dell’attributo in «Opzioni», un’immagine di categoria in «Categorie», vedi cartelle.
- Il nome è esattamente lo stesso? Confrontate il nome nel campo immagine con il file nel gestore file, prestando attenzione anche alle maiuscole e alle minuscole e all’estensione. Se è preceduto da una sottocartella, questa deve corrispondere.
- Ci sonodieresi o spazi? Rinominate il file e inserite il nuovo nome; consultate la sezione «Nomi dei file».
- Formato? Il negozio online supporta JPG, PNG, GIF e WebP. HEIC, AVIF, TIFF e SVG non sono adatti come immagini di prodotto.
- File danneggiato? Se il gestore dei file non mostra un'anteprima, apri il file sul computer e salvalo nuovamente come JPG o PNG.
- C'è ancora la vecchia immagine? Aggiornare le anteprime (salvare l'articolo o «Eliminare le miniature») e ricaricare il browser svuotando la cache, vedi Sostituire immagine.
- Sfondo nero? Vedi «Bordi neri» nella sezione Dimensioni delle immagini.
- L’immagine dell’attributo manca nella galleria? Controllare il valore di “Immagine opzioni” e “Visualizzazione immagine opzioni”, vedere immagini degli attributi.
- Le immagini sono improvvisamente scomparse? È stata eseguita la funzione “Pulisci cartella immagini sorgente”? In tal caso, ripristinate i file dal vostro backup o contattate l’assistenza.
Domande frequenti
Dove trovo il gestore file nel backend?
In quale cartella si trovano le immagini delle categorie?
Quale risoluzione devono avere le immagini dei prodotti?
Come si modifica la dimensione delle immagini dei prodotti nel negozio?
Quali formati e dimensioni sono adatti per le miniature delle categorie e dei marchi?
Sono consentite le dieresi nei nomi dei file immagine?
Come posso convertire tutte le immagini in WebP?
Come si sostituisce l’immagine di un prodotto mantenendo lo stesso nome del file?
Perché le immagini dei prodotti hanno i bordi neri?
Qual è il limite di caricamento del gestore file e come si caricano file PDF di grandi dimensioni?
Come si disattiva il cambio di immagine al passaggio del mouse nell’elenco dei prodotti?
Come si disattiva il lazy loading delle immagini?
Posso associare più immagini a un valore di caratteristica?
Perché la selezione degli attributi mostra immagini errate?
Perché manca l’immagine dell’attributo negli articoli in bundle?
Come si posiziona la galleria immagini nella pagina del prodotto?
Dove posso inserire un’immagine sopra la descrizione?
Come posso modificare la visualizzazione a 360 gradi?
Come faccio a eliminare le vecchie immagini dei prodotti e liberare spazio di archiviazione?
Quali formati immagine supporta l’importazione?
Come posso caricare immagini per più categorie tramite importazione?
Guide approfondite
Ti aiutiamo con le tue immagini
Verifichiamo insieme a te le dimensioni, il formato e il ritaglio delle immagini, le convertiamo in WebP e scopriamo perché manca un'immagine.
Contatta subito l’assistenza
