Immagini Prodotto

Suggerimenti per aggiungere al negozio fotografie di prodotti di grande impatto.

Ultimo aggiornamento 3 gennaio 2025

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

registrati al nostro webinar Suggerimenti di progettazione per aumentare le vendite del tuo negozio in cui presenteremo strumenti e suggerimenti che potrai utilizzare per far risaltare i tuoi prodotti sul tuo sito e incrementare le vendite.

Guarda un video

Prima di aggiungere immagini

Puoi aggiungere immagini a un prodotto caricandole direttamente o riutilizzando le immagini che hai già caricato in altre aree del sito.

Prima di caricare un'immagine, consulta le nostre linee guida per la loro formattazione, in modo da assicurarti che abbiano dimensioni e qualità adeguate per la visualizzazione online.

Il rapporto dimensionale di un'immagine influisce sul modo in cui essa appare, una volta selezionate le dimensioni e le opzioni di ritaglio automatico. Ti consigliamo di modificare le immagini nel rapporto desiderato prima di caricarle. È inoltre possibile modificare la messa a fuoco di un'immagine ritagliata dopo averla aggiunta utilizzando il suo punto focale.

Un prodotto può avere fino a 100 immagini. Tuttavia, sovraccaricare il prodotto di immagini può rallentare il caricamento della pagina. Consigliamo di mantenere le pagine sotto i 5 MB.

Suggerimento

inizia aggiungendo alcune immagini di prova per vedere come appaiono, e poi sperimenta le 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

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

Teresa_Jacket___Galapagos.jpg

Tipi di immagini del prodotto

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

  • Immagine in evidenza
  • Immagine principale
  • Additional images
  • Varianti di immagine
  • Immagini di condivisione social alternative

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

Le immagini in evidenza 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 evidenza di un prodotto per accedere alla relativa Pagina dei dettagli
  • Blocchi Prodotto
  • Blocchi riepilogo
  • La pagina del negozio e i pannelli dei prodotti

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

  1. Nell'editor del prodotto, clicca sulla miniatura dell'immagine in evidenza.
  2. Carica un'immagine.
  3. Passa il mouse su Salva 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 relative ai 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 evidenza 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. Le immagini delle varianti vengono visualizzate nella galleria delle immagini aggiuntive nella pagina dei dettagli del prodotto. 

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 della pagina del negozio o nel pannello 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.

product_primary_image.png

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

Le immagini in evidenza 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 evidenza di un prodotto per accedere alla Pagina dei dettagli del prodotto. Le immagini in evidenza vengono visualizzate nelle seguenti aree:

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

  1. Clicca sulla scheda Opzioni nell'editor del prodotto.
  2. Nella casella Immagine in evidenza, clicca sull'icona Cestino.
  3. Aggiungere un'immagine in evidenza.
  4. Fai clic su Salva.

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

Varianti di immagine

Nelle pagine relative ai 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 evidenza 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.

Le immagini delle varianti vengono visualizzate nella galleria delle immagini aggiuntive nella pagina dei dettagli del prodotto.

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 quando condividi l'URL della pagina dei dettagli del prodotto. Se non aggiungi un'immagine di condivisione social alternativa per un prodotto, utilizzeremo invece l'immagine in evidenza dell'articolo.

Eliminare le immagini dei prodotti

Per eliminare le immagini dei prodotti:

  1. Modifica il prodotto
  2. Nella sezione Immagini, passa il mouse sopra l'immagine e fai clic sull'icona del cestino
  3. Clicca su Elimina

Eliminare l'immagine di una variante dalla galleria di immagini aggiuntive la rimuove anche dall'editor delle varianti.

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 evidenza 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 e clicca su Modifica design.
  2. Apri gli stili di sezione e clicca sul menu a discesa dei layout.
  3. Seleziona un layout.
  4. Clicca su Salva per salvare il lavoro e continuare ad apportare modifiche, oppure clicca su Esci e poi su Salva per chiudere l'editor.

Puoi definire lo stile di elementi come il rapporto dimensionale delle immagini, l'allineamento del testo e il design della galleria di prodotti. Per ottenere un design coerente, queste modifiche di stile si applicano a tutti i prodotti del tuo negozio. Non è possibile modificare queste impostazioni per prodotti specifici.

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:

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 alt alle immagini dei prodotti consente ai browser e ai motori di ricerca di identificare il contenuto delle immagini. In tal modo, le immagini vengono visualizzate nei risultati di ricerca per immagini e il tuo sito risulta più accessibile ai visitatori che utilizzano lettori di schermo assistivi.

Quando aggiungi testo alt, usa termini brevi che descrivono l'immagine specifica e il prodotto. Per esempio, “Fermaglio in ottone per chiusura” e “Prendisole fiorato schiena.” Puoi aggiungere testo alt fino a 200 caratteri a ciascuna immagine del prodotto. Consulta questa guida per saperne di più sulla creazione di un sito Commerce accessibile.

Migliorare le immagini dei prodotti con le estensioni

Collega soona, uno studio virtuale di contenuti fotografici e video per l'ecommerce, al pannello delle estensioni del tuo sito per creare immagini di qualità professionale che valorizzino il tuo negozio online. È sufficiente inviare i tuoi prodotti a soona, condividere ciò che vuoi creare, creare il tuo servizio fotografico o selezionare un pacchetto a prezzo fisso e partecipare virtualmente al tuo servizio.

Anche se collaboriamo con servizi di terze parti per garantire il corretto funzionamento di Squarespace Extensions, le estensioni non rientrano nell'ambito della nostra assistenza. Possiamo aiutarti a collegare o scollegare le estensioni. Per tutte le altre domande, contatta direttamente il fornitore.

Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.