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.

Nota: abbiamo recentemente aggiornato l'editor di prodotti, pertanto gli step descritti in questa guida potrebbero non corrispondere a ciò che visualizzi sul tuo sito. Puoi passare al nuovo editor di prodotti in qualunque momento, oppure segui la procedura descritta in Usare l'editor di prodotti classico, se non vuoi ancora eseguire il passaggio.

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 negozio 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 negozio sono pagine di destinazione per più prodotti.
  • Le Pagine dei dettagli mostrano i dettagli di un prodotto

Ad esempio, in questa Pagina negozio 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 di Anteprima
  • Immagine principale
  • Additional images
  • Varianti di immagine
  • Immagini di condivisione social alternative

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 del negozio. Gli acquirenti cliccano sull'immagine in miniatura di un prodotto per accedere alla relativa Pagina dei dettagli
  • Blocchi Prodotto
  • Blocchi riepilogo
  • Pagina negozio e pannelli Inventario

Per impostazione predefinita, l'immagine principale del prodotto diventa l'immagine in miniatura. Per impostare un'immagine in miniatura diversa:

  1. Nell'editor di prodotto, clicca su Immagine in miniatura.
  2. Carica un'immagine.
  3. Passa il mouse su Fatto e clicca su Salva.

Immagini principali

L'immagine principale è la prima che appare nelle Pagine dei dettagli dei prodotti. È la prima immagine visualizzata nell'editor di prodotto. Clicca e trascina le immagini per modificarne l'ordine. Clicca sulle immagini e trascinale per modificarne l'ordine.

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. Nell'editor di prodotto, tutte le immagini successive alla prima sono considerate immagini aggiuntive. Clicca sulle immagini e trascinale per modificarne l'ordine.

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, scorri fino alla sezione della variante e clicca su Modifica tutto.
  2. Clicca sull'icona di caricamento immagine accanto a una variante.
  3. Clic sull'icona + per caricare un'immagine oppure seleziona un'immagine già caricata.
  4. Fai clic su Applica.

Puoi anche cliccare su una variante nell'editor di prodotto principale, quindi cliccare su Aggiungi immagini per aggiungere un'immagine della variante. 

Nella versione 7.0, la visualizzazione delle immagini dipende dal tipo di Pagina negozio del 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 negozio classiche o esclusive.
  • Come prima immagine nelle Pagine degli articoli del prodotto.
  • Nel pannello Pagina negozio o nel pannello Inventario.

È la prima immagine visualizzata nell'editor di prodotto. Clicca e trascina le immagini per modificarne l'ordine. 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 immagini in miniatura mostrano un'anteprima dei prodotti in diverse aree del tuo sito. Nei modelli che supportano le Pagine del negozio avanzate, gli acquirenti cliccano sull'immagine in miniatura di un prodotto per accedere alla Pagina dei dettagli del prodotto. Le immagini in miniatura vengono visualizzate 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 del prodotto.
  2. Nella casella Immagine in miniatura, clicca sull'icona Cestino.
  3. Aggiungi un'immagine in miniatura.
  4. Fai clic su 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.

Immagini di condivisione social alternative

L' immagine di condivisione social alternativa di un prodotto viene visualizzata sulle piattaforme di condivisione social o nelle applicazioni di messaggistica di testo quando condividi l'URL della pagina dei dettagli del prodotto. Se non aggiungi un'Immagine di condivisione social alternativa per un prodotto, utilizzeremo invece la miniatura dell'articolo.

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 la modalità di visualizzazione delle immagini del prodotto utilizzando gli stili di sezione e i tweak Articolo nel pannello Stili sito.

Sezioni prodotto

Per modificare la modalità di visualizzazione delle immagini in miniatura dei prodotti nelle sezioni negozio, passa il mouse sopra la sezione e clicca 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.

Se le immagini dei prodotti appaiono ritagliate, visita Risoluzione dei problemi di ritaglio.

Pagine dei dettagli del prodotto

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

  1. Modifica la pagina, apri Stili sito e clicca su Articoli.
  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 negozio presente nella famiglia del tuo modello. Per maggiori informazioni, visita Definire lo stile della Pagina negozio.

  • Classico
  • Avanzato
  • Univoco

Tweak classici

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

  • Pagine negozio - Utilizza i tweak Dimensione articolo, Ritaglio automatico immagini del prodotto e Colore sfondo prodotto per definire il modo in cui le immagini del prodotto vengono visualizzate nella Pagina negozio.
  • 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 negozio avanzate:

  • Pagine negozio - Utilizza il tweak Rapporto dimensionale immagine nella sezione Prodotti: layout per impostare la forma delle immagini nella Pagina negozio. 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 del negozio offrono funzionalità speciali che ti consentono di visualizzare le immagini in modo dinamico. La modalità di visualizzazione dipende dalla versione del tuo sito.

  • 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.

Per assistenza con una di queste funzionalità, visita Funzionalità speciali della Pagina negozio.

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: 35 su 165