Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Immagini Prodotto

Immagini dei prodotti perfette sono una parte importante della gestione di un negozio online. Puoi utilizzare le immagini per rappresentare i prodotti in tutto il sito, evidenziare le caratteristiche principali e offrire uno sguardo più da vicino ai dettagli e alle strutture. Questa guida illustra vari modi per utilizzare le immagini dei prodotti.

Suggerimento: per ottenere il massimo da questa guida, crea innanzitutto una Pagina dei prodotti e aggiungi prodotti al tuo negozio.

Guarda un video

Prima di caricare le immagini

Consulta le nostre linee guida per la formattazione delle immagini per assicurarti che le tue immagini abbiano le dimensioni e la qualità appropriate per la visualizzazione online.

Il rapporto dimensionale di un'immagine influisce sul modo in cui viene visualizzata applicando le tue opzioni relative alle dimensioni del prodotto e al ritaglio automatico. Prima di caricarle, ti consigliamo di modificare le immagini per portarle al rapporto dimensionale desiderato. Inoltre, dopo il caricamento puoi regolare la focalizzazione dell'immagine ritagliata utilizzando il relativo punto focale.

Suggerimento: inizia caricando alcune immagini di prova per vederne l'aspetto e sperimentare le diverse opzioni di stile.

Differenza tra Pagine dei prodotti e pagine dei dettagli del prodotto

Prima di discutere delle immagini dei prodotti, è utile capire come Squarespace struttura i prodotti su tutti i siti. I prodotti sono organizzati in due parti:

  • Le Pagine dei prodotti sono pagine di destinazione per più prodotti. Nella versione 7.1 sono chiamate Pagine negozio.
  • Le Pagine dei dettagli mostrano i dettagli di un prodotto

Ad esempio, in questa Pagina dei prodotti, i visitatori possono esplorare più prodotti.

Galapagos__.jpg

Cliccando su un prodotto si aprirà la relativa pagina dei dettagli, dove sarà possibile visualizzare più immagini e informazioni sul prodotto stesso.

Teresa_Jacket___Galapagos.jpg

Tipi di immagini del prodotto

Quando aggiungi o modifichi un prodotto, puoi aggiungere le seguenti immagini:

  • Immagine principale
  • Additional images
  • Thumbnail image
  • Varianti di immagine

La modalità di visualizzazione dipende dalla versione del tuo sito.

Immagini in miniatura

Le immagini in miniatura rappresentano il prodotto nella maggior parte delle aree del tuo sito, perciò conviene utilizzare l'immagine che desideri venga vista per prima dai clienti. L'immagine è visibile in queste aree: 

  • Pagine dei prodotti. Gli acquirenti cliccano sull'immagine in miniatura di un prodotto per accedere alla relativa Pagina dei dettagli
  • Product Blocks
  • Blocchi riepilogo
  • Pannelli Pagina dei prodotti e Inventario

Per impostazione predefinita, la prima immagine aggiunta nella scheda Articolo dell'editor di prodotto diventa l'immagine in miniatura. Per impostare un'immagine in miniatura diversa:

  1. Clicca sulla scheda Opzioni nell'editor di prodotto.
  2. Nella casella Immagine in miniatura, clicca sull'icona Cestino.
  3. Aggiungi un'immagine in miniatura.
  4. Clicca su Save (Salva).

Se rimuovi l'immagine in miniatura senza impostarne una sostitutiva, viene visualizzata l'immagine principale.

Immagini principali

L'immagine principale è la prima che appare nelle Pagine dettagli dei prodotti.

L'immagine principale è l'immagine nell'angolo in alto a sinistra nella scheda Articolo dell'editor di prodotto. Clicca sulle immagini e trascinale per modificarne l'ordine.

product_primary_image.png

Additional images

Le immagini aggiuntive offrono agli acquirenti una visione completa dei tuoi prodotti. Utilizza le immagini aggiuntive per mostrare foto di dettagli, oppure scattate da varie angolazioni, o ancora foto del prodotto indossato o inserito in un'ambientazione. Le immagini aggiuntive sono visibili nelle Pagine dettagli dei prodotti. Nella scheda Articolo dell'editor di prodotto, tutte le immagini successive alla prima sono considerate immagini aggiuntive. Clicca sulle immagini e trascinale per modificarne l'ordine. 

Additional_Image.png 

Varianti di immagine

Nelle Pagine dettagli dei prodotti, le immagini delle varianti mostrano agli acquirenti l'aspetto di ogni variante del prodotto. Ad esempio, puoi utilizzare le immagini delle varianti per mostrare le diverse dimensioni/taglie e i colori disponibili per un prodotto. Per impostazione predefinita, l'immagine in miniatura di un prodotto è visibile fino a quando gli acquirenti non selezionano una variante dal menu a discesa.

Per personalizzare una variante di immagine:

  1. Nell'editor di prodotto, clicca su Prezzi e varianti.
  2. Nella colonna all'estrema sinistra, clicca sul campo dell'immagine per modificarlo.

Nella versione 7.0, la visualizzazione delle immagini dipende dal tipo di pagina dei prodotti del tuo modello.

Immagini principali

L'immagine principale rappresenta il prodotto nella maggior parte delle aree del tuo sito, perciò è meglio utilizzare un'immagine che desideri venga visualizzata per prima dalla gran parte dei clienti. L'immagine è visibile in queste aree:

  • Nelle Pagine dei prodotti classiche o singole.
  • Come prima immagine nelle Pagine degli articoli del prodotto.
  • Nei pannelli Pagina dei prodotti e Inventario.

L'immagine principale è l'immagine nell'angolo in alto a sinistra nella scheda Articolo dell'editor di prodotto. Clicca sulle immagini e trascinale per modificarne l'ordine.

product_primary_image.png

Additional images

Le immagini aggiuntive offrono agli acquirenti una visione completa dei tuoi prodotti. Utilizza le immagini aggiuntive per mostrare foto di dettagli, foto scattate da varie angolazioni, o foto del prodotto indossato o inserito in un'ambientazione. Le immagini aggiuntive vengono visualizzate nelle seguenti posizioni:

Nella scheda Articolo dell'editor di prodotto, tutte le immagini successive alla prima sono considerate immagini aggiuntive. Clicca sulle immagini e trascinale per modificarne l'ordine.

Additional_Image.png

Immagini in miniatura

Le miniature mostrano un'anteprima dei prodotti in diverse aree del tuo sito. Nei modelli che supportano le Pagine dei prodotti avanzate, gli acquirenti cliccano sull'immagine in miniatura di un prodotto per accedere alla Pagina dei dettagli. Le immagini in miniatura vengono visualizzate anche nelle seguenti aree: 

Per impostazione predefinita, la prima immagine aggiunta nella scheda Articolo dell'editor di prodotto diventa l'immagine in miniatura. Per impostare un'immagine in miniatura diversa:

  1. Clicca sulla scheda Opzioni nell'editor di prodotto.
  2. Nella casella Immagine in miniatura, clicca sull'icona Cestino.
  3. Aggiungi un'immagine in miniatura.
  4. Clicca su Save (Salva).

Se rimuovi l'immagine in miniatura senza impostarne una sostitutiva, viene visualizzata l'immagine principale.

Varianti di immagine

Nelle Pagine dettagli dei prodotti, le immagini delle varianti mostrano agli acquirenti l'aspetto di ogni variante del prodotto. Ad esempio, puoi utilizzare le immagini delle varianti per mostrare le diverse dimensioni/taglie e i colori disponibili per un prodotto. Per impostazione predefinita, l'immagine in miniatura di un prodotto è visibile fino a quando gli acquirenti non selezionano una variante dal menu a discesa.

Per personalizzare una variante di immagine:

  1. Nell'editor di prodotto, clicca su Prezzi e varianti.
  2. Nella colonna all'estrema sinistra, clicca sul campo dell'immagine per modificarlo.

Definire lo stile delle immagini del prodotto

La modalità di scelta dello stile dei titoli dipende dalla versione di Squarespace su cui si trova il sito.

Personalizza il modo in cui vengono visualizzate le immagini dei prodotti utilizzando gli stili di sezione e i tweak dell'articolo prodotto nel pannello Design.

Sezioni prodotto

Per modificare la modalità di visualizzazione delle miniature relative ai prodotti nelle sezioni Prodotto, passa il mouse sopra la sezione e fai clic sull'icona della matita.

È possibile modificare la spaziatura, le colonne, il rapporto dimensionale e l'allineamento del testo. È inoltre possibile mostrare o nascondere i prezzi. Per modificare i colori, fare clic su Colori.

Pagine dei dettagli del prodotto

Per modificare la modalità di visualizzazione dei prodotti nella pagina dei dettagli del prodotto:

  1. Nel Menu Home, clicca su Design, quindi su Prodotti.
  2. Apporta le modifiche, poi fai clic su Salva.

È possibile impostare lo stile di elementi come il rapporto dimensionale dell'immagine, l'allineamento del testo e il design della galleria prodotti.

Utilizza il pannello Stili sito per personalizzare l'aspetto delle immagini del prodotto. I layout e le opzioni di stile disponibili dipendono dal tipo di Pagina dei prodotti della tua famiglia di modelli:

Tweak classici

Di seguito sono riportati i tweak specifici delle immagini per le Pagine dei prodotti classiche:

  • Pagine dei prodotti - Utilizza i tweak Dimensioni articoloRitaglio automatico immagini del prodottoColore sfondo prodotto per definire lo stile della visualizzazione delle immagini del prodotto nella pagina dei prodotti.
  • Pagine degli articoli - Utilizza i tweak Dimensioni galleria prodotti e Ritaglio automatico galleria prodotti per impostare dimensioni e ritaglio dell'immagine per le pagine dei dettagli.

Tweak avanzati

Di seguito sono riportati i tweak specifici delle immagini per le Pagine dei prodotti avanzate:

  • Pagine dei prodotti - Utilizza il tweak Rapporto dimensionale immagine nella sezione Prodotti: layout per impostare la forma delle immagini nella Pagina dei prodotti. Le immagini vengono ritagliate automaticamente per adattarsi alla forma.
  • Pagine degli articoli - Utilizza i tweak nella sezione Prodotti: Galleria, come ad esempio Design, Rapporto dimensionale, Allineamento miniature e Larghezza miniature, per definire lo stile delle immagini nelle pagine dei dettagli.

Tweak singoli

Per assistenza nella definizione dello stile delle immagini del prodotto nei modelli seguenti, visita le relative guide ai modelli:

Opzioni speciali per le immagini

Alcune Pagine dei prodotti offrono funzionalità speciali che ti consentono di visualizzare le immagini in modo dinamico. 

  • Anteprima prodotti - I clienti possono cliccare su un pulsante per visualizzare i dettagli dell'articolo in una lightbox senza abbandonare la pagina corrente. Nella versione 7.1, questa opzione è disponibile solo nella Pagina dettagli del prodotto.
  • Zoom sull'immagine del prodotto - I clienti possono ingrandire le immagini del prodotto per osservare più da vicino materiale, texture e minimi dettagli. Nella versione 7.1, questa opzione è disponibile solo nella Pagina dettagli del prodotto.
  • Immagine alternativa al passaggio del mouse - Questo è un ottimo modo per mostrare una caratteristica particolare, una differente angolazione o un dettaglio fondamentale per ogni prodotto. Questa opzione è disponibile solo nella versione 7.0.

Per assistenza con una di queste funzionalità, visita le funzionalità speciali della Pagina dei prodotti.

Aggiungere testo alternativo

L'aggiunta di testo alternativo alle immagini del prodotto identifica il contenuto delle immagini per browser e motori di ricerca. Questo consente di visualizzare le immagini nei risultati di ricerca delle immagini e di rendere il sito più accessibile ai visitatori che utilizzano lettori di schermo assistivi.

Quando aggiungi del testo alternativo, utilizza termini brevi descrittivi dell'immagine specifica e del prodotto. Ad esempio, “Fermaglio in ottone per chiusura” e “Prendisole fiorato schiena.”

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 14 su 62
Immagini Prodotto