Personalizza le pagine negozio e le pagine dei dettagli dei prodotti del tuo sito.
Puoi personalizzare la modalità di visualizzazione dei prodotti sul tuo sito in base al design e alla presentazione del tuo brand. Utilizza questa guida per scoprire le opzioni di stile disponibili per le Pagine negozio e le pagine dei dettagli del prodotto in base alla versione del tuo sito.
Per saperne di più su come apportare modifiche allo stile accessibile, visita Creare un sito Commerce accessibile.
Differenza tra Pagine del negozio e Pagine dei dettagli del prodotto
Prima di definire lo stile dei tuoi prodotti, può essere utile comprendere come Squarespace li struttura in tutti i siti. I prodotti sono organizzati in due parti: le Pagine negozio, che creano una pagina di destinazione da sfogliare, e le singole pagine dei dettagli del prodotto. Queste aree hanno alcuni tweak di stile in comune e opzioni di stile specifiche. Per maggiori informazioni, visita Aggiungere prodotti al tuo negozio.
Apri le opzioni di stile
Puoi modificare le opzioni di stile della Pagina negozio e della pagina dei dettagli del prodotto in due posizioni:
- Pagine del negozio - Clicca su Modifica nell'anteprima del sito, quindi clicca su Modifica sezione nella sezione del negozio per modificare le opzioni di layout e design. Ogni pagina del negozio ha uno stile di sezione specifico.
- Pagine dettagli prodotto - Apri la pagina dei dettagli del prodotto che vuoi modificare. Clicca su Modifica, poi su Modifica sezione nella sezione dei dettagli del prodotto per cambiare il layout e le opzioni di design. Queste impostazioni di stile si applicano a tutte le pagine dei dettagli dei prodotti nella stessa pagina del negozio.
Sia nelle pagine del negozio che nelle pagine dei dettagli del prodotto, clicca su Modifica, quindi clicca sull'icona del pennello per apportare modifiche agli stili del sito, come tipi di carattere e colori. Alcune opzioni negli stili del sito sono specifiche per queste pagine, mentre altre interessano l'intero sito.
Per definire lo stile delle Pagine negozio:
- Apri la Pagina negozio da modificare.
- Ritorna sul pannello Sito web, fai clic su Progettazione, quindi su Stili sito.
- Utilizza i tweak delle sezioni Prodotti per modificare lo stile della pagina di destinazione.
- 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.
Suggerimenti:
- 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.
Pagina negozio
I visitatori della tua pagina negozio troveranno tutte le immagini in evidenza degli articoli in un layout a griglia. La pagina negozio mostra fino a 200 prodotti. Se ci sono più di 200 prodotti, i clienti possono fare clic su Avanti per visualizzare altri prodotti.
Per definire lo stile della sezione della pagina del negozio:
- Apri la Pagina negozio da modificare.
- Clicca su Modifica nell'angolo in alto a sinistra, quindi 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 Formato, si può personalizzare:
- Larghezza del contenuto.
- Spaziatura colonne.
- Spaziatura righe.
- Numero di colonne (minimo due).
- Rapporto dimensionale immagine.
- Allineamento del testo.
- Spaziatura testo dell'immagine.
- Pulsante Aggiungi al carrello: mostra il pulsante Aggiungi al carrello nella pagina negozio, oltre che nelle pagine dei dettagli dei prodotti, se questi hanno al massimo una variante. Se il prodotto ha più di una variante, nella pagina del negozio viene visualizzato un pulsante Visualizza opzioni. Una conferma pop-up viene visualizzata dopo che un cliente aggiunge qualcosa al carrello e il testo segue il colore di sfondo della sezione.
- Mostra o nascondi il prezzo.
- Visualizza la navigazione categorie nella parte superiore della sezione o come barra laterale. Non è possibile nascondere la navigazione per categorie.
- Titolo categoria - Mostra il titolo della pagina nella parte superiore della sezione.
- Allineamento del testo dell'intestazione.
- 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.
Nella scheda Colori:
- Seleziona un tema sezione per la sezione del tuo negozio.
- Clicca sull'icona della matita su un tema per personalizzarlo. Tieni presente che questo influisce su tutte le sezioni che utilizzano il tema.
Utilizza la tabella riportata di seguito per trovare le opzioni di stile per queste famiglie di modelli:
- Avanzate - Brine, Farro, Skye, Tremont, York
- Classiche - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
- Esclusive - Galapagos e Supply seguono tweak di stile diversi. Consulta la guida al tuo modello per scoprire come definire lo stile dei prodotti.
Layout
I visitatori della tua pagina negozio troveranno tutte le immagini in evidenza degli articoli in un layout a griglia. Definisci lo stile della griglia con questi passaggi.
Sezione Stili sito
- Avanzate - Prodotto: Layout
- Classiche - Prodotti
| Descrizione | Avanzato | Classico |
| Modifica il numero di elementi per riga | Elementi per riga | Prodotti per riga |
| Modifica lo spazio tra ogni elemento della riga | Spaziatura elementi | n/a |
| Modifica la forma dell'immagine. Le immagini vengono ritagliate per adattarsi | Rapporto dimensionale immagine | n/a |
| Imposta la forma del contenitore dell'immagine | n/a | Dimensioni articoli |
| Scegli se l'immagine debba essere ritagliata per riempire il proprio contenitore | n/a | Ritaglio automatico immagine del prodotto |
| Modifica il colore visualizzato dietro le immagini non ritagliate in base alle dimensioni del contenitore | n/a | Colore di sfondo del prodotto |
Informazioni sul prodotto
Per visualizzare i tweak per dispositivi mobili per le Pagine negozio avanzate, seleziona Posizione: Sovrapposizione.
Sezione Stili sito
- Avanzate - Prodotti: dettagli
- Classiche - Prodotti
| Descrizione | Avanzato | Classico |
| Imposta il titolo e il prezzo da visualizzare sotto l'immagine o al passaggio del mouse | Posizione: Sotto, Sovrapposizione | Titoli elenco prodotti: Sotto, Sovrapposizione |
| Allinea il testo quando Titoli elenco prodotti: Sotto è abilitato | n/a | Allineamento elenco prodotti: Al centro, A sinistra |
| Imposta il colore della sovrapposizione al passaggio del mouse quando Titoli elenco prodotti: Sovrapposizione è abilitato. Regola il cursore per impostare la trasparenza | n/a | Colore di sovrapposizione del prodotto |
| Scegli la posizione in cui viene visualizzato il testo sui browser mobili | Posizione (Dispositivi mobili): Sotto, Sovrapposizione | n/a |
| Scegli la modalità di allineamento del testo | Allineamento | n/a |
| Imposta il colore della sovrapposizione al passaggio del mouse quando Posizione: Sovrapposizione è selezionato. Sposta il cursore per impostare la trasparenza | Colore di sovrapposizione | n/a |
| Modifica ulteriormente l'allineamento del testo quando è impostato per la visualizzazione al passaggio del mouse | Padding sovrapposizione | n/a |
| Modifica la spaziatura sotto ogni riga | Spaziatura | n/a |
| Deselezionare questa opzione per nascondere i titoli degli elementi | Mostra titolo | n/a |
| Imposta il tipo di carattere del titolo | Tipo di carattere titolo | n/a |
| Imposta il colore del titolo | Colore titolo | n/a |
| Imposta il colore del titolo su dispositivi mobili | Colore titolo (Mobile) | n/a |
| Imposta lo spazio tra testo e immagine quando è impostato su Posizione: Sotto | Spaziatura titolo | n/a |
| Deseleziona per nascondere i prezzi | Mostra prezzo | Mostra prezzo del prodotto |
| Imposta il tipo di carattere del prezzo | Tipo di carattere prezzo | n/a |
| Imposta il colore del prezzo su computer | Colore prezzo | n/a |
| Imposta il colore del prezzo su dispositivi mobili | Colore prezzo (Mobile) | n/a |
| Imposta il colore del prezzo scontato su computer | Colore Prezzo scontato | n/a |
| Imposta il colore del prezzo scontato su dispositivi mobili | Colore prezzo scontato (Mobile) | n/a |
| Imposta lo spazio tra prezzo e titolo | Spaziatura prezzo | n/a |
Pagina dettagli del prodotto
Per definire lo stile della pagina dettagli:
- Apri la pagina dei dettagli del prodotto da modificare.
- Clicca su Modifica nell'angolo in alto a sinistra, quindi clicca su Modifica sezione. Puoi personalizzare i dettagli seguenti. Qualsiasi modifica si applica a tutte le pagine dei dettagli dei prodotti nella stessa pagina del negozio.
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 anche personalizzare queste opzioni:
- Larghezza del contenuto.
- Progettazione dell'immagine - Scegli tra slideshow, impilate 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 dei contenuti è disponibile per i design di slideshow e carosello, non 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 della 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 in galleria.
- Posizionamento miniature galleria - Posiziona le immagini in evidenza del prodotto quando il design è slideshow.
- Larghezza della galleria.
- Spaziatura delle immagini.
- Dimensioni della freccia del carosello (solo per design slideshow e carosello).
- Azione al clic - Scegli tra nessuno, zoom o lightbox, a seconda del design.
- Azione al passaggio del mouse (solo slideshow e design in pila) - Scegli tra nessuno o zoom.
- Fattore di zoom dell'immagine.
Nella scheda Colori:
- Seleziona un tema sezione per la sezione del tuo negozio.
- Clicca sull'icona della matita su un tema per personalizzarlo. Tieni presente che questo influisce su tutte le sezioni che utilizzano il tema.
Visualizzazione delle varianti
Nel layout semplice, le varianti possono essere visualizzate sotto forma di pulsanti o in un menu a discesa. Tutti gli altri layout visualizzano le varianti in menu a discesa.
I pulsanti delle varianti seguono le modifiche apportate al tweak di stile del pulsante secondario del tuo sito. Il menu a discesa delle varianti usa la famiglia di caratteri dei campi delle varianti e il colore dipende dal tema cromatico della sezione.
Tieni presente che l'opzione per iscriversi alla lista d'attesa dei prodotti appare solo quando le varianti sono visualizzate nei menu a discesa.
Pulsanti Aggiungi al carrello e Checkout
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 dei dettagli di prodotto, le modifiche al padding orizzontale non influiscono sui pulsanti Aggiungi al carrello. Non è possibile nascondere il pulsante Aggiungi al carrello nella versione 7.1. Quando un prodotto è esaurito, il pulsante Aggiungi al carrello appare 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. Tieni presente che le opzioni di stile dei pulsanti si applicano alla maggior parte dei pulsanti del sito per garantire un aspetto uniforme.
Questi pulsanti indirizzano sempre i clienti al carrello e alla pagina di checkout di Squarespace. Non è possibile utilizzare questi pulsanti per collegarsi a siti esterni.
Il campo Quantità
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
Per visualizzare l'attuale livello di 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 loro carrello quando il livello delle scorte è pari a uno. Non è possibile modificare le dimensioni del campo quantità.
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. Per accedere agli stili della sezione negozio da una pagina di dettagli del prodotto, torna alla pagina del negozio e clicca su Modifica nell'angolo in alto a sinistra.
Frequenza dell'abbonamento
Se vendi dei prodotti in abbonamento, puoi modificare i colori visualizzati nella sezione della frequenza di abbonamento della pagina dei dettagli del prodotto. Apri le combinazioni di colori del tuo sito e modifica i colori nella pagina dettagli del prodotto: abbonamenti.
Utilizza la tabella riportata di seguito per trovare le opzioni di stile per queste famiglie di modelli:
- Avanzate - Brine, Farro, Skye, Tremont, York
- Classiche - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
- Esclusive - Galapagos e Supply seguono tweak di stile diversi. Consulta la guida al tuo modello per scoprire come definire lo stile dei prodotti.
Layout
Sezione Stili sito
- Avanzate - Prodotti: Layout
- Classiche - Prodotti
| Descrizione | Avanzato | Classico |
| Modifica la spaziatura tra elementi | Spaziatura | n/a |
| Aggiungi spazio vuoto nella parte superiore della pagina | Spaziatura superiore | n/a |
|
Modifica visualizzazione impaginazione |
Visualizzazione nav: Solo Breadcrumb, Solo Impaginazione, Breadcrumb e Impaginazione, Nessuno | Mostra navigazione prodotti |
| Modifica testo impaginazione | Stile impaginazione: Precedente/Successivo, Titoli | n/a |
| Modifica testo impaginazione | Allineamento nav.: A sinistra, Al centro, A destra, Dividi | n/a |
| Modifica tipo di carattere impaginazione | Tipo di carattere nav | n/a |
| Modifica colore impaginazione | Colore nav | n/a |
| Modifica il colore della freccia tra i titoli di pagina nella navigazione | Colore separatore nav | n/a |
Suggerimenti per l'impaginazione:
- L'ordine dei prodotti dipende dalla posizione in cui vengono visualizzati nelle Pagine negozio. Sono ordinati da sinistra a destra.
- Non è possibile limitare l'impaginazione a una categoria specifica. L'impaginazione mostra tutti i prodotti.
Immagini
Quando guardano un singolo articolo, i clienti visualizzano le immagini del prodotto.
Sezione Stili sito
- Avanzate - Prodotti: galleria
- Classiche - Prodotti
| Descrizione | Avanzato | Classico |
| Modifica allineamento immagine | Posizione: A sinistra, A destra | n/a |
| Modifica stile galleria | Design: Slideshow, Impilato | n/a |
| Modifica larghezza immagine | Larghezza | n/a |
| Imposta la forma dell'immagine | Rapporto di aspetto | Dimensioni 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. | n/a | Ritaglio automatico galleria prodotti |
| I tweak delle miniature influiscono sulle miniature di navigazione visualizzate sotto l'immagine quando Design: Slideshow è selezionato. | Allineamento miniature: A sinistra, Al centro, A destra | n/a |
| Modifica larghezza miniature | Larghezza miniatura | n/a |
| Modifica la spaziatura tra miniature | Spaziatura miniatura | n/a |
| Modifica lo spazio tra le immagini quando Design: Impilato è selezionato. | Spaziatura | n/a |
Informazioni sul prodotto
Sezione Stili sito
- Avanzate - Prodotti: dettagli
- Classiche - Prodotti
| Descrizione | Avanzato | Classico |
| Modifica il posizionamento dei dettagli nella pagina | Allineamento: A sinistra, Al centro, A destra | n/a |
| Modifica l'altezza della linea |
Altezza della riga Il tweak altezza linea nella sezione Corpo: Tipo di carattere influisce sull'altezza della linea anche qui. |
n/a |
| Modifica la spaziatura tra lettere | Spaziatura | n/a |
| Mostra o nascondi titolo del prodotto | Mostra titolo | n/a |
| Modifica tipo di carattere titolo del prodotto | Tipo di carattere titolo | n/a |
| Modifica colore titolo del prodotto | Colore titolo | n/a |
| Mostra o nascondi il prezzo | Mostra prezzo | n/a |
| Modifica tipo di carattere prezzo | Tipo di carattere prezzo | n/a |
| Modifica colore prezzo | Colore prezzo | n/a |
| Modifica colore per gli articoli in offerta | Colore Prezzo scontato | n/a |
| Seleziona dove mostrare la descrizione del prodotto | Posizione estratto: Sopra il prezzo, Sotto il prezzo, Sotto il pulsante Aggiungi al carrello | n/a |
| Modifica tipo di carattere descrizione prodotto | Tipo di carattere estratto | n/a |
| Modifica colore descrizione prodotto | Colore estratto | n/a |
| Modifica colore link descrizione prodotto | Colore link estratto | n/a |
| Nascondi o visualizza i pulsanti Condividi | Mostra pulsanti di condivisione | Condivisione social dei prodotti |
| Utilizza i tweak della sezione Pulsanti di condivisione | Definisci lo stile dei Pulsanti Condividi | Definisci lo stile dei Pulsanti Condividi |
Quantità e varianti
Sezione Stili sito
- Avanzate - Prodotti: Opzioni
- Classiche - Contenuto principale
| Descrizione | Avanzato | Classico |
| Mostra o nascondi varianti | Mostra varianti | n/a |
| Mostra o nascondi quantità. La quantità viene visualizzata solo quando sono disponibili più articoli. | Mostra quantità | n/a |
| Modifica la visualizzazione della quantità | Stile: Solo testo, Quadrato, Arrotondato, Pillola | n/a |
| Aggiungi un colore bordo alla visualizzazione della quantità | Colore bordo | n/a |
| Aggiungi un colore di sfondo alla visualizzazione della quantità | Colore di sfondo | n/a |
| Modifica il tipo di carattere della visualizzazione della quantità | Tipo di carattere etichetta | n/a |
| Modifica il colore della visualizzazione della quantità | Colore etichetta | n/a |
| Imposta il tipo di carattere di quantità e varianti | Tipo di carattere | Segue i tweak Intestazione o Intestazione 1 del sito. |
| Imposta il colore del testo di quantità e varianti | Colore testo | n/a |
| Modifica il tipo di carattere visualizzato nella variante. Non è possibile cambiare il tipo di carattere delle voci di menu. | Tipo di carattere | n/a |
Il campo Quantità
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
Per visualizzare l'attuale livello di 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 loro carrello quando il livello delle scorte è pari a uno.
Pulsante Aggiungi al carrello
Sezione Stili sito
- Avanzate - Mostra Pulsanti
- Classiche - Pulsanti
| Descrizione | Avanzato | Classico |
| Nascondi il pulsante | Deseleziona Mostra pulsante | n/a |
| Modifica lo stile del pulsante | Stile: Tinta unita, Bordato, In rilievo | Stile: Predefinito, Tinta unita, Bordato, In rilievo |
| Modifica la forma del pulsante | Forma: Quadrato, Arrotondato, Pillola | Forma: Quadrato, Arrotondato, Pillola |
| Aggiungi o rimuovi padding pulsanti | Spaziatura: Piccola, Media, Grande | n/a |
| Modifica colore pulsante | Colore | Colore pulsante |
| Modifica colore testo pulsante | Colore testo | Colore testo |
| Modifica tipo di carattere pulsante | Tipo di carattere | Tipo di carattere |
Suggerimento: quando un prodotto è esaurito, il pulsante Aggiungi al carrello viene visualizzato in grigio.
Pulsante Pagamento
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
I prodotti correlati vengono visualizzati in una griglia nella parte inferiore della pagina. Puoi utilizzare questi tweak per modificarne l'aspetto.
Sezione Stili sito
- Avanzate - Prodotti: prodotti correlati
- Classiche - Prodotti
| Descrizione | Avanzato | Classico |
| Modifica gli elementi per riga | Elementi per riga | Elementi per riga |
| Aggiungi o rimuovi la spaziatura tra elementi | Spaziatura elementi | Spaziatura elementi |
| Imposta il rapporto dimensionale immagine | Rapporto dimensionale immagine | Rapporto dimensionale immagine |
| Modifica l'allineamento del testo | Allineamento dei dettagli: al centro, a sinistra | Allineamento dei dettagli: al centro, a sinistra |
| Modifica la spaziatura titolo | Spaziatura titolo | Spaziatura titolo |
Carrello
Per impostazione predefinita, l'icona viene visualizzata come carrello nell'intestazione del sito. Se nascondi l'icona del carrello, questa viene visualizzata nella parte inferiore della pagina quando i clienti aggiungono articoli al carrello. Per maggiori informazioni, visita Visualizzazione dell'icona del carrello.
Tutti i modelli supportano un pulsante Carrello che mostra il numero di articoli nel carrello di un cliente e conduce alla pagina di pagamento. Se il carrello non viene visualizzato, consulta i nostri suggerimenti per la risoluzione dei problemi. Per informazioni su come definire lo stile dell'icona del carrello del tuo modello, visita Visualizzazione dell'icona del carrello.
Navigazione categorie
Dopo aver aggiunto categorie ai tuoi prodotti, queste creano un menu di navigazione nella parte superiore della pagina di destinazione. I clienti possono utilizzare questi link per filtrare i prodotti a cui sono interessati. Tieni presente che, in entrambe le versioni, la navigazione categorie:
- Viene visualizzata solo dopo aver aggiunto almeno una categoria
- Non viene visualizzata nelle pagine dei dettagli
- Mostra tutte le categorie, anche quelle collegate a prodotti nascosti
La navigazione per categorie può essere visualizzata nella parte superiore della Pagina negozio o in una barra laterale. Sui dispositivi mobili, la navigazione per categorie viene sempre visualizzata in alto.
Il tipo di carattere della navigazione categorie segue lo stile paragrafo. Il colore segue la modifica Navigazione categoria sotto Prodotti: griglia base in Stili sito.
Per modificare la posizione, apri la sezione stili e clicca su Barra laterale o In alto nel tipo di categorie. Per modificare l'ordine della navigazione, clicca e trascina le categorie nel gestore delle categorie. A seconda della posizione, le sottocategorie vengono visualizzate in un menu annidato.
- Barra laterale - Le sottocategorie verranno visualizzate in un menu nidificato nella Pagina negozio e nelle pagine filtrate per categoria.
- In alto - Le sottocategorie verranno visualizzate nella pagina principale filtrata per categorie, ma non nelle pagine filtrate per sottocategorie.
Per nascondere la navigazione categorie, apri le impostazioni della categoria e disattiva l'opzione Visibilità filtro. Ripeti questa operazione per ogni categoria. Per maggiori informazioni, visita Organizzazione dei prodotti.
La navigazione categorie viene visualizzata in ordine alfabetico. Utilizza la tabella riportata di seguito per trovare le opzioni di stile per queste famiglie di modelli:
- Avanzate - Brine, Farro, Skye, Tremont, York
- Classiche - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
- Esclusive - Galapagos e Supply seguono tweak di stile diversi. Non è possibile nascondere la navigazione categorie in questi modelli. Consulta la guida al tuo modello per scoprire come definire lo stile della navigazione categorie.
Sezione Stili sito
- Avanzate - Prodotti: ordina + filtro
- Classiche - Prodotti
| Descrizione | Avanzato | Classico |
| Nascondi la navigazione categorie | Visualizzazione: Nascondi | Deseleziona Mostra navigazione categorie |
| Attiva, disattiva e allinea la navigazione categorie | Visualizzazione: in alto, lato sinistro, lato destro, nascondi | n/a |
| Imposta la larghezza se la navigazione categorie è a sinistra o a destra. | Larghezza | n/a |
| Modifica lo spazio sotto la navigazione. | Margine | n/a |
| Modifica lo spazio tra ogni elemento della riga | Spaziatura elementi | n/a |
| Imposta l'allineamento del testo | Allineamento: A sinistra, Al centro, A destra | n/a |
| Imposta il tipo di carattere della navigazione | Tipo di carattere |
Tipo di carattere delle categorie di navigazione (Non disponibile in Bedford, Five, Ishimoto, Montauk e Native) |
| Imposta il colore della navigazione | Colore |
Colore delle categorie di navigazione (Non disponibile in Bedford, Five, Ishimoto, Montauk e Native) |
| Scegli il colore di visualizzazione dei link al passaggio del mouse | Colore attivo |
Colore delle categorie di navigazione attive (Non disponibile in Bedford, Five, Ishimoto, Montauk e Native) |
Etichette In offerta, Esaurito e Disponibilità limitata
Gli articoli esauriti mostrano sempre un'etichetta "Esaurito" personalizzabile. In entrambe le versioni, puoi modificare il testo dell'etichetta e il relativo tipo di carattere e colore. Nella versione 7.0, puoi modificare la forma e la posizione dell'etichetta.
In offerta e Disponibilità limitata vengono visualizzate anche se abilitate. Puoi modificare il testo dell'etichetta di disponibilità limitata nel pannello Disponibilità limitata, ma non è possibile modificare il testo dell'etichetta In offerta. Il modo in cui modificare lo stile dipende dalla versione del sito.
- Gli articoli esauriti mostrano sempre il badge di stato sotto l'immagine del prodotto nella Pagina negozio e nella pagina dei dettagli del prodotto.
- Le Etichette In offerta e Disponibilità limitataseguono il colore del tuo sito e i tweak Tipi di carattere vari.
Utilizza la tabella riportata di seguito per trovare le opzioni di stile per queste famiglie di modelli:
- Avanzate - Brine, Farro, Skye, Tremont, York
- Classiche - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
- Esclusive - Galapagos e Supply seguono tweak di stile diversi. Consulta la guida al tuo modello per scoprire come definire lo stile dei prodotti.
Per accedere a questi tweak di stile, vai alla Pagina negozio da modificare prima di aprire Stili sito.
Sezione Stili sito
- Avanzate - Prodotti: Badge di stato
- Classiche - Prodotti
| Descrizione | Avanzato | Classico |
| Nascondi il badge | Stile: Nessuno | n/a |
| Imposta lo stile del badge | Stile: Rettangolo, Quadrato, Cerchio, Nessuno | n/a |
| Imposta il colore del badge In offerta | Colore offerta | n/a |
| Imposta il colore del badge Esaurito | Colore esaurito | n/a |
| Imposta il tipo di carattere del badge | Tipo di carattere | n/a |
| Aggiungi o rimuovi il padding | Padding | n/a |
| Imposta la posizione del badge | Posizione: In alto a sinistra, In alto al centro, In alto a destra, In centro a sinistra, In centro al centro, In centro a destra, In basso a sinistra, In basso al centro, In basso a destra | n/a |
| Sovrapponi il badge all'immagine del prodotto | Inset: Mobile, Allineato, Ancora verticalmente, Ancora orizzontalmente | n/a |
| Modifica la dimensione del badge | Dimensioni inset | n/a |
| Colore Prezzo scontato | Usa Colore Prezzo scontato nella sezione Prodotti: Dettagli | n/a |
| Colore badge di stato | Può essere solo nero o bianco, in base al colore di sfondo del badge | n/a |
| Colore etichetta Disponibilità limitata | Colore etichetta Disponibilità limitata | Colore etichetta Disponibilità limitata |
| Tipo di carattere etichetta Disponibilità limitata | Tipo di carattere etichetta Disponibilità limitata | Tipo di carattere etichetta Disponibilità limitata |
Zoom immagine, anteprima ed effetti al passaggio del mouse
Un'immagine alternativa del prodotto viene sempre visualizzata al passaggio del mouse sulle Pagine negozio quando un prodotto ha più immagini. I dettagli del prodotto vengono sempre visualizzati sotto l'immagine del prodotto. Puoi abilitare l'anteprima nelle impostazioni della pagina o del blocco. Il colore di sfondo della lightbox Anteprima segue il colore della sezione negozio.
Lo zoom immagine non è disponibile nelle Pagine negozio. Tuttavia, puoi abilitare lightbox e zoom immagine al clic e al passaggio del mouse sulla pagina dei dettagli del prodotto. Abilita questi effetti nel pannello Articoli:
- Lightbox - Apre l'immagine in una finestra lightbox al clic.
- Zoom - Ingrandisce i dettagli dell'immagine al clic o al passaggio del mouse.
Utilizza la tabella riportata di seguito per trovare le opzioni di stile per queste famiglie di modelli:
- Avanzate - Brine, Farro, Skye, Tremont, York
- Classiche - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
- Galapagos supporta le opzioni di immagine alternativa e sovrapposizione delle informazioni sul prodotto.
- Supply supporta opzioni esclusive di sovrapposizione delle informazioni sul prodotto.
Effetti al passaggio del mouse
Per visualizzare il tweak dell'effetto al passaggio del mouse sull'elemento nelle Pagine negozio avanzate, vai alla sezione Prodotto: Dettagli e seleziona Posizione: Sotto.
Sezione Stili sito
- Avanzate - Prodotti: Layout
- Classiche - Prodotti
| Descrizione | Avanzato | Classico |
| Imposta l'azione al passaggio del mouse |
Effetto al passaggio del mouse sull'elemento (viene visualizzato quando la posizione Prodotto: Dettagli è impostata su Sotto) |
n/a |
| Visualizza la seconda immagine nell'editor di prodotto al passaggio del mouse. | Effetto al passaggio del mouse sull'elemento: Mostra immagine alternativa | n/a |
| Applica un effetto dissolvenza sui dettagli del prodotto visibili al passaggio del mouse. |
Effetto al passaggio del mouse sull'elemento: Dissolvenza |
n/a |
| Nessun effetto al passaggio del mouse |
Nella sezione Prodotto: Dettagli seleziona Posizione: Sotto e, nella sezione Prodotto: Layout, scegli Effetto al passaggio del mouse sull'elemento: Nessuno |
Titoli elenco prodotti: Sotto |
| Mostra i dettagli del prodotto al passaggio del mouse anziché un'immagine alternativa o una dissolvenza. |
Nella sezione Prodotto: Dettagli, seleziona Posizione: Sovrapposizione |
Titoli elenco prodotti: Sovrapposizione |
| Mostra i titoli dei prodotti sotto l'immagine del prodotto | n/a | Titoli elenco prodotti: Sotto |
| Modifica il colore di sovrapposizione al passaggio del mouse | n/a | Colore di sovrapposizione del prodotto |
| Mostra o nascondi il prezzo del prodotto al passaggio del mouse | n/a | Mostra prezzo del prodotto |
Suggerimenti per l'immagine alternativa:
- Se la seconda immagine del prodotto ha aree trasparenti, la prima immagine sarà visibile in tali aree al passaggio del mouse.
Zoom immagine
Sezione Stili sito
- Avanzate - Prodotti: Zoom immagine
- Classiche - n/a
| Descrizione | Avanzato | Classico |
| Abilita o disabilita lo zoom dell'immagine | Attiva zoom immagine | n/a |
| Imposta il fattore di zoom dell'immagine | Fattore di zoom dell'immagine | n/a |
| Imposta lo zoom dell'immagine in modo che si attivi al clic o al passaggio del mouse | Attiva Zoom su | n/a |
| Imposta le immagini dei prodotti in modo che si aprano in una lightbox |
Abilita lightbox. Se l'impostazione Abilita lightbox non appare, attiva lo zoom dell'immagine e imposta lo zoom in modo che si attivi al passaggio del mouse. Questo dovrebbe rivelare l'impostazione Abilita lightbox. È possibile disattivare lo zoom dell'immagine dopo aver attivato la lightbox. Per abilitare sia lo zoom dell'immagine che il lightbox, l'impostazione dello zoom deve consentirne l'attivazione al passaggio del mouse. |
n/a |
Suggerimenti per lo zoom immagine:
- Le immagini con sfondi trasparenti (.png) visualizzeranno l'immagine originale dietro la versione ingrandita.
Anteprima
Dopo aver attivato l'anteprima, le nuove sezioni vengono visualizzate nel pannello Stili sito. Le impostazioni di stile vengono applicate a tutto il sito per creare un aspetto coerente.
I visitatori utilizzano l'anteprima del prodotto per visualizzare i dettagli dell'articolo in una lightbox senza uscire dalla Pagina negozio. Questa funzionalità non è disponibile per le Pagine negozio classiche, sebbene in questi modelli le immagini del prodotto vengano aperte in una lightbox dalle pagine dei dettagli del prodotto.
Sezione Stili sito
- Avanzate - Prodotti: Pulsante Anteprima
- Classiche - n/a
| Descrizione | Avanzato | Classico |
| Personalizza lo stile, il colore, il tipo di carattere, il padding, la posizione e le dimensioni del pulsante Anteprima | Posizione | n/a |
| Personalizza l'aspetto della lightbox | Prodotti: Lightbox "Anteprima" | n/a |
| Mostra la descrizione del prodotto | Visualizzazione estratto: Tronca | n/a |
| Aggiungi un filtro colorato alla Pagina negozio dietro la lightbox | Colore di sovrapposizione | n/a |
| Modifica i pulsanti di navigazione e di chiusura presenti all'esterno della lightbox | Controlli | n/a |
| Modifica il tipo di carattere del titolo Anteprima | Nella sezione Prodotti: Dettagli, seleziona Tipo di carattere titolo | n/a |
Suggerimenti per l'Anteprima:
- Se il testo dell'Anteprima presenta problemi di formattazione, prova ad aggiungere i dettagli del prodotto come testo normale.
- L'anteprima non è disponibile sui dispositivi mobili.
- Il testo del pulsante "Anteprima" non può essere personalizzato.
- Le immagini del prodotto vengono visualizzate come un quadrato ritagliato nell'anteprima.
- Le descrizioni dei prodotti vengono visualizzate nell'anteprima senza una formattazione speciale, inclusi lo stile dell'intestazione, il grassetto, il corsivo o gli elenchi puntati.
Tipi di carattere e colori
I colori e i tipi di carattere nella Pagina negozio e nella pagina dei dettagli del prodotto seguono i tweak tipo di carattere e colore a livello di sito. Puoi inoltre modificare il colore di sezioni negozio specifiche nell'editor di stile delle sezioni. Le pagine dei dettagli del prodotto seguono il tema colore della sezione negozio.
- Nella Pagina negozio, clicca su Modifica design, quindi apri Stili sito.
- Clicca su Tipi di carattere.
- Scegli un tipo di carattere e clicca su
per applicare il tipo di carattere a parti specifiche del sito.
Utilizza questi tweak per modificare i tipi di carattere nella Pagina negozio e nelle pagine dei dettagli del prodotto:
| Sezione | Elementi della Pagina negozio |
| Intestazioni | Titoli pagine, titolo sezione Prodotti correlati e titoli prodotti |
| Paragrafi | Descrizione prodotto, prezzo e navigazione della pagina |
| Pulsanti | Pulsanti |
| Meta | Stili vari, come tag e prezzi |
| Avanzato: prodotti: elenco | Titolo elenco, prezzo elenco, stato elenco |
| Avanzate: Pagina dei dettagli del prodotto | Titolo elemento, prezzo elemento, descrizione elemento, campi variante |
Utilizza la tabella riportata di seguito per trovare le opzioni di stile per queste famiglie di modelli:
- Avanzate - Brine, Farro, Skye, Tremont, York
- Classiche - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley
Pagine negozio classiche
Il testo nella Pagina negozio classica segue gli stessi tweak di stile del testo sul resto del sito. Ad esempio, per modificare il tipo di carattere o il colore del titolo dell'articolo, utilizza il tweak Intestazione o Intestazione 1. Alcuni elementi, come la Navigazione categorie, hanno i propri tweak tipo di carattere, elencati in questa guida in base all'elemento da modificare.
I menu a discesa delle varianti sono un'eccezione, poiché utilizzano lo stesso tipo di carattere in tutte le pagine negozio classiche. Questo tipo di carattere non può essere modificato in Stili sito.
Pagine negozio avanzate
I tipi di carattere nelle Pagine negozio avanzate seguono i tweak di stile del resto del sito, ma presentano ulteriori tweak tipo di carattere per elementi specifici della Pagina negozio. Tali tweak sono elencati in questa guida in base all'elemento da modificare.
Mobile
Gli articoli e le informazioni sui prodotti si impilano verticalmente su smartphone, tablet e browser stretti.
- Al momento, Anteprima e Zoom immagine non sono disponibili sui dispositivi mobili.
- I titoli e i prezzi vengono sempre visualizzati sotto le immagini dei prodotti nelle Pagine negozio.
- Il colore di sovrapposizione, l'immagine alternativa e gli effetti di dissolvenza non vengono visualizzati.
- Quando non può essere contenuta in una sola riga, la navigazione categorie viene visualizzata come elenco a scorrimento orizzontale che i visitatori possono sfogliare.
Nella versione 7.1:
- Le immagini nella pagina dei dettagli del prodotto vengono sempre visualizzate come slideshow che gli acquirenti possono scorrere. Le immagini in miniatura non vengono visualizzate sotto lo slideshow.
- Il pulsante Aggiungi al carrello viene visualizzato prima della descrizione nelle pagine dei prodotti con i layout Completo e Semplice.
- La navigazione categorie viene visualizzata orizzontalmente, per consentire agli acquirenti di scorrerla.
- I prodotti vengono visualizzati in una o due colonne. Nella visualizzazione per dispositivi mobili, clicca su Modifica, quindi su Modifica sezione. Clicca sull'icona + o - per modificare il numero di colonne visualizzate.
- Sui dispositivi mobili, la navigazione degli spostamenti viene visualizzata quando i visitatori cliccano sui tag delle categorie nella pagina di destinazione di un negozio. La navigazione degli spostamenti non appare quando i visitatori cliccano direttamente su un prodotto nella pagina del negozio.
- Le immagini nelle pagine dei dettagli del prodotto vengono visualizzate con un rapporto dimensionale 1:1, indipendentemente dal layout.
Nella versione 7.0:
- Le Pagine negozio avanzate hanno colori esclusivi sui dispositivi mobili per titoli, prezzi e prezzi scontati degli articoli.
- I prodotti vengono visualizzati in due o più colonne.
Visita Stili per dispositivi mobili avanzati nella versione 7.0 per scoprire altre opzioni per dispositivi mobili del tuo modello. La versione 7.1 non ha stili per dispositivi mobili separati.
Aggiornamento del codice della pagina negozio e CSS personalizzato
Il 2 settembre 2025 aggiorneremo il codice che controlla le pagine del negozio, le pagine di dettaglio dei prodotti e i blocchi prodotto. Questo aggiornamento, simile a un aggiornamento del sistema operativo, fa parte della necessaria manutenzione della piattaforma e ci aiuterà a continuare a sviluppare nuove funzionalità di Commerce. Per informazioni dettagliate sulle novità, visita la nostra documentazione per sviluppatori.
Sebbene il nuovo codice supporti i CSS personalizzati, è probabile che interrompa qualsiasi codice personalizzato esistente che utilizzi per lo stile di queste pagine. Dopo l'aggiornamento, potrebbe essere necessario modificare il tuo CSS personalizzato per assicurarti che i tuoi contenuti vengano visualizzati correttamente.
Puoi scegliere il momento in cui effettuare l'aggiornamento selezionando una data compresa tra il 30 giugno 2025 e il 30 agosto 2025.
Per effettuare l'aggiornamento:
- Apri il pannello Vendite.
- Clicca su Impostazioni prodotto.
- Clicca su Inizia, quindi clicca su Avvia aggiornamento.
Dopo che hai completato l'aggiornamento, non è possibile riportare il sito alla versione precedente.
Dopo il 2 settembre 2025, tutte le pagine del negozio, le pagine di dettaglio dei prodotti e i blocchi di prodotti si aggiorneranno automaticamente.
Nota: il codice personalizzato, incluso CSS, non rientra nell'ambito della nostra assistenza. Ciò significa che non possiamo fornire ulteriore supporto per la configurazione o la risoluzione dei problemi.