I visitatori della pagina negozio troveranno tutte le immagini in evidenza degli elementi prodotto in un layout a griglia. La pagina negozio mostra fino a 200 prodotti. Se sono presenti più di 200 prodotti, i clienti possono cliccare su Avanti per vedere altri prodotti.

Per definire lo stile della sezione della pagina del negozio:

1. Apri la Pagina negozio da modificare.
2. Clicca su Modifica.
3. Clicca su Modifica sezione nella sezione del negozio. Puoi personalizzare i dettagli seguenti. Le modifiche si applicano solo a questa sezione del negozio.

Nella scheda Elementi, si può personalizzare:

• Titolo del negozio: mostra il titolo della pagina in alto nella sezione.
• Navigazione: mostra il percorso di navigazione seguito dai visitatori prima di arrivare sulla pagina attuale, esclusi i prodotti correlati e le pagine filtrate per categorie.
• Etichetta Categorie: mostra l'etichetta "Categorie" nel menu delle categorie.
• Etichetta filtri: mostra l'etichetta "Filtri" nel menu dei filtri.
• Filtri: aggiungi i filtri per aiutare i clienti a navigare i tuoi prodotti per tag.
• Descrizione del prodotto: mostra o nascondi la descrizione del prodotto quando è presente il layout elenco.
• Prezzo: mostra o nascondi il prezzo sulla miniatura del prodotto.
• Pulsante Aggiungi al carrello: si visualizza sotto le miniature dei prodotti nella pagina del negozio e nelle pagine dei dettagli dei prodotti.

Nella scheda Design, puoi personalizzare:

• Layout: mostra le miniature dei prodotti in una griglia o in un elenco. Nel layout dell'elenco, mostra un'anteprima delle descrizioni dei tuoi prodotti.
• Allineamento titolo: imposta la giustificazione del testo per il titolo del negozio.
• Posizionamento del menu: visualizza la navigazione delle categorie in alto nella sezione o come barra laterale.
• Stile delle categorie: personalizza il menu delle categorie come menu a discesa, sottonavigazione o pulsanti.
• Numero di colonne nel layout a griglia (minimo due)
• Spaziatura tra colonne e righe
• Sfondo: mostra o nasconde uno sfondo intorno alla miniatura del prodotto, in modo simile a una cornice. Imposta il colore di sfondo, curva gli angoli e scegli il tipo, il colore e lo spessore del tratto.
• Stile e allineamento del pulsante
• Rapporto dimensionale dell'immagine e spaziatura del testo
• Angoli: lo sfondo delle miniature e le immagini dei prodotti possono avere angoli squadrati o curvi.
• Larghezza della sezione e padding verticale.
• Divisore: mostra un divisore tra la sezione del tuo negozio e le altre sezioni della pagina. Scegli forma, tipo di tratto, colore e spessore.

Nella scheda Colori:

• Seleziona un tema della sezione per la sezione del tuo negozio.
• Clicca sull'icona della matita su un tema per personalizzarlo. Le modifiche riguardano tutte le sezioni che utilizzano il tema.

Filtri pagina negozio

Crea filtri prodotto per aiutare i clienti a trovare i prodotti e i servizi più interessanti per loro. I filtri si basano sui tag di prodotto per mostrare una selezione di prodotti sulla tua pagina negozio.

È possibile aggiungere filtri alle pagine negozio che contengono un massimo di 200 prodotti. Il pulsante filtro segue gli stili dei pulsanti principali.

Le opzioni di stile disponibili dipendono dalla famiglia di modelli del tuo sito e dal tipo di pagina negozio.

Nota: Galapagos e Supply seguono tweak di stile diversi. Per avere informazioni sui prodotti per lo stile, visita la guida ai modelli.

Per definire lo stile delle Pagine negozio:

1. Apri la Pagina negozio da modificare.
2. Torna al pannello Sito web.
3. Clicca su Design.
4. Clicca su Stili sito.
5. Utilizza i tweak delle sezioni Prodotti per modificare lo stile della pagina di destinazione.
6. Per i tweak specifici di singole pagine dei dettagli del prodotto, esci da Stili sito, apri un prodotto ed entra di nuovo in Stili sito.

Suggerimento:

• Clicca su un'area della pagina nell'anteprima per visualizzare solo i tweak di stile disponibili per quest'area e nascondere il resto.
• Se hai più Pagine negozio, le modifiche di stile si applicano a tutte le Pagine negozio del sito per creare un aspetto coerente.
• Nel tuo modello potrebbero essere presenti alcune funzionalità, come immagini banner o intestazioni di pagina, che influiscono sull'aspetto della Pagina negozio.

Layout della pagina dello store

I visitatori della tua pagina negozio troveranno tutte le immagini in evidenza degli elementi prodotto in un layout a griglia. È possibile personalizzare lo stile della griglia con queste modifiche nella sezione stili sito Prodotto: Layout (pagine negozio - Avanzate) o nella sezione stili sito Prodotti (Pagine negozio classiche), a seconda dei casi.

Descrizione di stile

• Modifica il numero di elementi per riga
  • Piano Advanced: elementi per riga
  • Classico: prodotti per riga
• Modifica lo spazio tra ogni elemento della riga
  • Piano Advanced: spaziatura tra gli elementi
• Modifica la forma dell'immagine. Le immagini vengono ritagliate per adattarsi
  • Piano Advanced: spaziatura tra gli elementi
• Imposta la forma del contenitore dell'immagine
  • Classico: dimensioni elemento prodotto
• Scegli se l'immagine debba essere ritagliata per riempire il proprio contenitore
  • Classico: ritaglio automatico dell'immagine del prodotto
• Modifica il colore visualizzato dietro le immagini non ritagliate in base alle dimensioni del contenitore
  • Classico: colore di sfondo del prodotto

Informazioni sul prodotto nella pagina negozio

Per vedere i tweak per dispositivi mobili per le pagine negozio - Avanzate, seleziona Posizione: sovrapposizione. Puoi personalizzare le informazioni sul prodotto con queste modifiche nella sezione stili sito Prodotto: dettagli (pagine negozio - Avanzate) o nella sezione stili sito Prodotti (pagine classiche del negozio), a seconda dei casi.

Descrizione di stile

• Imposta il titolo e il prezzo da visualizzare sotto l'immagine o al passaggio del mouse
  • Piano Advanced: posizione: sotto, sovrapposizione
  • Classico: titoli della lista prodotti: sotto, sovrapposizione
• Allinea il testo quando Titoli elenco prodotti: sotto è abilitato
  • Classico: allineamento della lista prodotti: centro, sinistra
• Imposta il colore della sovrapposizione al passaggio del mouse quando è selezionato Titoli elenco prodotti: sovrapposizione. Regola il cursore per impostare la trasparenza
  • Classico: colore di sovrapposizione del prodotto
• Scegli la posizione in cui viene visualizzato il testo sui browser mobili
  • Piano Advanced: posizione (mobile): sotto, sovrapposizione
• Scegli la modalità di allineamento del testo
  • Piano Advanced: allineamento
• Imposta il colore della sovrapposizione al passaggio del mouse quando è selezionato Posizione: sovrapposizione. Sposta il cursore per impostare la trasparenza
  • Piano Advanced: colore di sovrapposizione
• Modifica ulteriormente l'allineamento del testo quando è impostato per la visualizzazione al passaggio del mouse
  • Piano Advanced: padding sovrapposizione
• Modifica la spaziatura sotto ogni riga
  • Piano Advanced: spaziatura
• Deselezionare questa opzione per nascondere i titoli degli elementi
  • Piano Advanced: mostra titolo
• Imposta il tipo di carattere del titolo
  • Piano Advanced: tipo di carattere del titolo
• Imposta il colore del titolo
  • Piano Advanced: colore del titolo
• Imposta il colore del titolo su dispositivi mobili
  • Piano Advanced: colore del titolo (mobile)
• Imposta lo spazio tra testo e immagine quando è impostato su Posizione: Sotto
  • Piano Advanced: spaziatura tra i titoli
• Deseleziona per nascondere i prezzi
  • Piano Advanced: mostra il prezzo
  • Classic: mostra il prezzo del prodotto
• Imposta il tipo di carattere del prezzo
  • Piano Advanced: tipo di carattere del prezzo
• Imposta il colore del prezzo su computer
  • Piano Advanced: colore del prezzo
• Imposta il colore del prezzo su dispositivi mobili
  • Piano Advanced: colore del prezzo (mobile)
• Imposta il colore del prezzo scontato su computer
  • Piano Advanced: colore del prezzo scontato
• Imposta il colore del prezzo scontato su dispositivi mobili
  • Piano Advanced: colore del prezzo scontato (mobile)
• Imposta lo spazio tra prezzo e titolo
  • Piano Advanced: spaziatura tra i prezzi

Qualsiasi modifica si applica a tutte le pagine dei dettagli dei prodotti nella stessa pagina del negozio. Per definire lo stile della pagina dettagli:

1. Apri la pagina dei dettagli del prodotto da modificare.
2. Fai clic su Modifica, quindi su Modifica sezione.

Nella scheda Formato, scegli tra le seguenti opzioni di layout:

• Semplice: l'immagine e la descrizione del prodotto vengono visualizzate fianco a fianco, circondate da spazi bianchi.
• Avvolgi: le immagini del prodotto avvolgono la descrizione. Le immagini sono sempre allineate a sinistra.
• Metà: l'immagine del prodotto divide la pagina con la descrizione. L'immagine è sempre allineata a sinistra.
• Completo: le immagini del prodotto vengono visualizzate in un carosello con smarginatura completa sopra la descrizione.

Se selezioni il layout Semplice, puoi personalizzare queste opzioni:

• Larghezza del contenuto.
• Design e spaziatura delle immagini: scegli tra slideshow, visualizzazione impilata o carosello quando il prodotto ha più immagini. Se il design è slideshow, vengono visualizzate le miniature delle altre immagini del prodotto.
• Visualizzazione delle varianti.
• Allineamento del testo.
• Allineamento del contenuto: scegli tra in alto o al centro. L'allineamento in alto può mostrare il padding tra la parte superiore dell'immagine del prodotto e il testo. L'allineamento del contenuto è disponibile per i design di slideshow e carosello, non per quelli impilati.
• Larghezza modulo.
• Stile di navigazione del prodotto.
• Posizione della descrizione: dove viene visualizzata la descrizione del prodotto.
• Pulsante aggiungi al carrello: l'opzione in linea posiziona il pulsante accanto al campo quantità.
• Rapporto dimensionale della galleria (solo design slideshow e carosello): nel design carosello, il rapporto dimensionale imposta le proporzioni del contenitore dell'immagine, ma l'immagine potrebbe non essere ritagliata per riempirlo. Consigliamo di aggiungere immagini che abbiano lo stesso rapporto dimensionale scelto nelle impostazioni.
• Posizionamento e larghezza della galleria.
• Posizionamento miniature galleria: posiziona le immagini in evidenza del prodotto quando il design è impostato su slideshow.
• Dimensioni della freccia del carosello (solo per design slideshow e carosello).
• Azione al clic: scegli tra nessuna, zoom o lightbox, a seconda del design.
• Azione al passaggio del mouse.

Nella scheda Colori:

• Seleziona un tema della sezione per la sezione del tuo negozio.
• Clicca sull'icona della matita su un tema per personalizzarlo. Tieni presente che questa azione influisce su tutte le sezioni che utilizzano il tema.

Personalizza la visualizzazione delle varianti di prodotto

Nel layout semplice, è possibile visualizzare le varianti sotto forma di pulsanti o in un menu a discesa. Tutti gli altri layout mostrano le varianti in menu a discesa.

• Pulsanti variante: seguono gli stili di modulo del tuo sito. Apri Stili sito, quindi clicca su > accanto a Moduli. Clicca su Opzioni di selezione, quindi su Radio.
• Menu a discesa delle varianti: segue la famiglia dei tipi di carattere dei campi varianti e il colore dipende dal tema cromatico della sezione.

Nota: l’opzione per iscriversi a una lista d’attesa dei prodotti appare solo quando le varianti sono visualizzate nei menu a discesa.

Applica uno stile ai pulsanti Aggiungi al carrello e Checkout nella pagina del negozio

Il pulsante Aggiungi al carrello può essere visualizzato sotto le miniature dei prodotti nella pagina del negozio e nelle pagine dei dettagli dei singoli prodotti.

Per preservare l'aspetto delle pagine dettagli del tuo prodotto, le modifiche del padding orizzontale non incidono sui pulsanti Aggiungi al carrello. Quando un prodotto è esaurito, il pulsante Aggiungi al carrello si visualizza in grigio.

Nelle pagine del negozio, i colori dei pulsanti seguono i colori del testo e dello sfondo del prodotto. Il pulsante Aggiungi al carrello nelle pagine dei dettagli del prodotto e il pulsante Pagamento nella pagina del carrello seguono entrambi i Tweak di stile del pulsante principale e le impostazioni di colore del tuo sito.

Gestire i colori dei mini carrelli

Il mini carrello utilizza le combinazioni di colori della tua sezione per garantirne la visibilità. Il colore del mini carrello contrasta automaticamente con lo sfondo della sezione. Per cambiare il colore del mini carrello, cambia il colore di sfondo della sezione o modifica le combinazioni di colori del sito.

Posso nascondere il pulsante Aggiungi al carrello nella pagina negozio?

Non puoi nascondere il pulsante Aggiungi al carrello senza usare codice personalizzato. Questo argomento è stato trattato nello Squarespace Forum, ma esula dall'ambito della nostra Assistenza.

Per promuovere i tuoi prodotti senza la possibilità di acquistarli, puoi mostrarli sul tuo sito utilizzando una pagina di layout con blocchi di immagini e blocchi di testo.

Quando appare il campo quantità nella pagina negozio?

Il campo della quantità viene visualizzato nella pagina dettagli se:

• Il livello delle scorte del prodotto è maggiore di uno.
• Il prodotto ha delle varianti, indipendentemente dai livelli di scorte della singola variante.

Per visualizzare l'attuale livello delle scorte di ciascuna variante nella pagina dettagli, attiva le etichette di disponibilità limitata. In questo modo impedirai ai clienti di aggiungere più di un prodotto al carrello quando il livello delle scorte è pari a uno.

Non puoi cambiare la dimensione del campo quantità. Puoi nascondere il campo quantità per i prodotti fisici e composti da servizi nelle impostazioni di pagamento.

Personalizza i prodotti correlati

La sezione dei prodotti correlati nelle pagine dei dettagli del prodotto segue i tweak degli stili della sezione negozio e i tweak tipo di carattere a livello di sito.

Se vendi prodotti in abbonamento, puoi modificare i colori visualizzati nella sezione della frequenza di abbonamento della pagina dettagli del prodotto. Apri le palette di colori del tuo sito e modifica i colori nella pagina dettagli del prodotto: abbonamenti.

Le opzioni di stile disponibili dipendono dalla famiglia di modelli del tuo sito e dal tipo di pagina negozio.

Nota: Galapagos e Supply seguono tweak di stile diversi. Per avere informazioni sui prodotti per lo stile, visita la guida ai modelli.

Layout della pagina Dettagli del prodotto

Applica lo stile al layout nella sezione stili sito Prodotto: Layout (pagine negozio - Avanzate) o nella sezione stili sito Prodotti (Pagine negozio classiche), a seconda dei casi.

Descrizione di stile

• Modifica la spaziatura tra elementi
  • Piano Advanced: spaziatura
• Aggiungi spazio vuoto nella parte superiore della pagina
  • Piano Advanced: padding superiore
• Modifica visualizzazione impaginazione
  • Piano Advanced: visualizzazione nav: solo breadcrumb, solo impaginazione, breadcrumb e impaginazione, nessuno
  • Classico: mostra navigazione elemento prodotto
• Modifica testo impaginazione
  • Piano Advanced: stile di impaginazione: precedente/successivo, titoli
• Modifica testo impaginazione
  • Piano Advanced: allineamento navigazione: sinistra, centro, destra, dividi
• Modifica tipo di carattere impaginazione
  • Piano Advanced: tipo di carattere navigazione
• Modifica colore impaginazione
  • Piano Advanced: colore navigazione
• Modifica il colore della freccia tra i titoli di pagina nella navigazione
  • Piano Advanced: colore del separatore di navigazione

Nota:

• L'ordine dei prodotti è impostato in base al punto in cui i prodotti vengono visualizzati nelle pagine negozio. Sono ordinati da sinistra a destra.
• L'impaginazione mostra tutti i prodotti. Non è possibile limitarlo a una categoria specifica.

Immagini della pagina dettagli

Quando guardano un singolo articolo, i clienti visualizzano le immagini del prodotto. Le immagini di stile sono definite nella sezione stili sito Galleria prodotti (pagine negozio - Avanzate) o nella sezione stili sito Prodotti (pagine negozio classiche), a seconda dei casi.

Descrizione di stile

• Modifica allineamento immagine
  • piano Advanced: posizione: sinistra, destra
• Modifica stile galleria
  • piano Advanced: design: slideshow, impilato
• Modifica larghezza immagine
  • Piano Advanced: larghezza
• Imposta la forma dell'immagine
  • piano Advanced: rapporto dimensionale
  • Classico: dimensioni della galleria prodotti
• Scegli se l'immagine del prodotto debba essere ritagliata per riempire il proprio contenitore. In caso contrario, il Colore di sfondo del prodotto verrà visualizzato dietro l'immagine.
  • Classico: ritaglio automatico della galleria dei prodotti
• I tweak delle miniature influiscono sulle miniature di navigazione visualizzate sotto l'immagine quando Design: Slideshow è selezionato.
  • Piano Advanced: allineamento delle miniature: sinistra, centro, destra
• Modifica larghezza miniature
  • piano Advanced: larghezza della miniatura
• Modifica la spaziatura tra miniature
  • piano Advanced: spaziatura tra le miniature
• Modifica lo spazio tra le immagini quando Design: Impilato è selezionato.
  • Piano Advanced: spaziatura

Pagina dettagli, informazioni sul prodotto

Applica lo stile alle informazioni del prodotto nella sezione stili sito Prodotti: dettagli (pagine negozio - Avanzate) o nella sezione stili sito Prodotti (pagine negozio classiche), a seconda dei casi.

Descrizione di stile

• Modifica il posizionamento dei dettagli nella pagina
  • Piano Advanced: allineamento: sinistra, centro, destra
• Modifica l'altezza della linea
  • Piano Advanced: altezza riga. Il tweak altezza linea nella sezione Corpo: tipo di carattere incide sull'altezza della linea anche qui.
• Modifica la spaziatura tra lettere
  • Piano Advanced: spaziatura
• Mostra o nascondi titolo del prodotto
  • Piano Advanced: mostra titolo
• Modifica tipo di carattere titolo del prodotto
  • Piano Advanced: tipo di carattere del titolo
• Modifica colore titolo del prodotto
  • Piano Advanced: colore del titolo
• Mostra o nascondi il prezzo
  • Piano Advanced: mostra il prezzo
• Modifica tipo di carattere prezzo
  • Piano Advanced: tipo di carattere del prezzo
• Modifica colore prezzo
  • Piano Advanced: colore del prezzo
• Modifica il colore per gli articoli in offerta
  • Piano Advanced: colore del prezzo scontato
• Seleziona dove mostrare la descrizione del prodotto
  • Piano Advanced: Posizione estratto: sopra il prezzo, sotto il prezzo, sotto il pulsante aggiungi al carrello
• Modifica tipo di carattere descrizione prodotto
  • Piano Advanced: tipo di carattere estratto
• Modifica colore descrizione prodotto
  • Piano Advanced: colore estratto
• Modifica colore link descrizione prodotto
  • Piano Advanced: colore Link estratto
• Nascondi o visualizza i pulsanti di condivisione
  • Piano Advanced: mostra pulsanti di condivisione
  • Classico: condivisione social dei prodotti
• Utilizza i tweak della sezione Pulsanti di condivisione
  • Piano Advanced: stile dei pulsanti di condivisione
  • Classico: definisci lo stile dei pulsanti di condivisione

Pagina dettagli di prodotto, quantità e varianti

Quantità e varianti di stile nella sezione Prodotti: opzioni degli stili sito (pagine negozio - Avanzate) o nella sezione Contenuti principali degli stili sito (pagine negozio classiche), a seconda dei casi.

Descrizione di stile

• Mostra o nascondi varianti
  • Piano Advanced: mostra varianti
• Mostra o nascondi quantità. La quantità viene visualizzata solo quando sono disponibili più articoli.
  • Piano Advanced: Mostra quantità
• Modifica la visualizzazione della quantità
  • Piano Advanced: stile: solo testo, quadrato, arrotondato, pillola
• Aggiungi un colore bordo alla visualizzazione della quantità
  • Piano Advanced: colore del bordo
• Aggiungi un colore di sfondo alla visualizzazione della quantità
  • Piano Advanced: colore di sfondo
• Modifica il tipo di carattere della visualizzazione della quantità
  • Piano Advanced: etichetta tipo di carattere
• Modifica il colore della visualizzazione della quantità
  • Piano Advanced: colore dell'etichetta
• Imposta il tipo di carattere di quantità e varianti
  • Piano Advanced: tipo di carattere
  • Classico: segue le modifiche apportate all'intestazione o al titolo 1 a livello di sito.
• Imposta il colore del testo di quantità e varianti
  • Piano Advanced: colore del testo
• Modifica il tipo di carattere visualizzato nella variante. Non è possibile cambiare il tipo di carattere delle voci di menu.
  • Piano Advanced: tipo di carattere

Quando appare il campo quantità nella pagina dettagli del prodotto?

Il campo Quantità viene visualizzato nella pagina dei dettagli del prodotto se:

• Il livello delle scorte del prodotto è maggiore di uno.
• Il prodotto ha delle varianti, indipendentemente dai livelli di scorte della singola variante.

Suggerimento: per visualizzare il livello attuale delle scorte per ogni variante nella pagina dei dettagli del prodotto, abilita le etichette di disponibilità limitata. Ciò impedirà ai clienti di provare ad aggiungere più di un prodotto al carrello quando il livello delle scorte è uno.

Posso nascondere il menu a discesa della quantità?

Puoi nascondere la quantità di prodotto nella versione 7.0, se il modello del sito appartiene alle famiglie Brine, Farro, Skye, Tremont o York. In questi modelli, per nascondere il menu a discesa delle quantità nelle pagine degli articoli:

1. Vai alla tua pagina negozio.
2. Apri il singolo articolo.
3. Torna al pannello Sito web, quindi clicca su Progettazione e poi su Stili sito.
4. Scorri fino alla sezione Prodotti: opzioni.
5. Deseleziona Mostra quantità.

Suggerimento: l'opzione quantità verrà comunque visualizzata al momento del pagamento. Puoi disabilitarla per i servizi in tutti i modelli.

Pulsante Aggiungi al carrello nella pagina dettagli

Quantità e varianti di stile nella sezione Mostra pulsanti , stili sito (pagine negozio - Avanzate), o nella sezione Pulsanti , stili sito (pagine negozio classiche), a seconda dei casi.

Descrizione di stile

• Nascondi il pulsante
  • Piano Advanced: deseleziona il pulsante mostra
• Modifica lo stile del pulsante
  • Piano Advanced: stile: tinta unita, bordato, in rilievo
  • Classico: stile: predefinito, tinta unita, contorno, in rilievo
• Modifica la forma del pulsante
  • Piano Advanced: forma: quadrata, arrotondata, a pillola
  • Classico: forma: quadrata, arrotondata, a pillola
• Aggiungi o rimuovi padding pulsanti
  • Piano Advanced: spaziatura: piccola, media, grande
• Modifica colore pulsante
  • Piano Advanced: colore
  • Classico: colore del pulsante
• Modifica colore testo pulsante
  • Piano Advanced: colore del testo
  • Classico: colore del testo
• Modifica tipo di carattere pulsante
  • Piano Advanced: tipo di carattere
  • Classico: tipo di carattere

Nota: quando un prodotto è esaurito, il pulsante Aggiungi al carrello viene visualizzato in grigio.

Pulsante di pagamento della pagina dei dettagli di prodotto

Il pulsante Pagamento visualizzato nella pagina del carrello segue le impostazioni di colore del tuo sito. Non è possibile personalizzarne la forma o il tipo di carattere.

Prodotti correlati nella pagina dettagli

Prodotti correlati visualizzati in una griglia in basso sulla pagina.