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.
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 negozio - Clicca su Modifica nell'anteprima del sito, quindi clicca sull'icona della matita nella sezione negozio da modificare. Per maggiori informazioni su come aprire gli stili delle sezioni negozio, visita Sezioni di Pagina della raccolta.
- Pagine dei dettagli del prodotto - Apri la pagina dei dettagli del prodotto da modificare. Clicca su Modifica design, quindi sull'icona del pennello. Queste impostazioni di stile si applicano a tutte le pagine dei dettagli del prodotto presenti nel tuo sito.
Per definire lo stile delle Pagine negozio:
- Apri la Pagina negozio da modificare.
- Nel Menu Home, clicca su Design, 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 visualizzano tutte le immagini in evidenza degli articoli in un layout a griglia. Negli stili delle sezioni negozio, puoi personalizzare questi dettagli. Le modifiche si applicano a tutte le pagine negozio del tuo sito.
Formato:
- Larghezza dell'immagine
- Spaziatura colonne
- Spaziatura righe
- Numero di colonne (minimo due)
- Rapporto dimensionale immagine
- Allineamento Testo
- Spaziatura testo dell'immagine
- Mostra o nascondi il prezzo
- Posizione della navigazione categorie. Non è possibile nascondere la navigazione categorie.
- Allineamento testo intestazione
- Mostra titolo categoria - Nasconde o mostra il titolo della pagina nella parte superiore della sezione negozio.
- Navigazione prodotti
- Breadcrumb - Mostra il percorso di navigazione seguito dai visitatori prima di arrivare sulla pagina attuale, esclusi i prodotti correlati e le pagine filtrate per categorie.
- Nessuno
Colori:
- Imposta i colori del tuo sito o dai un aspetto unico alla sezione negozio scegliendo un tema sezione diverso.
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 visualizzano tutte le immagini in evidenza degli articoli in un layout a griglia. Definisci lo stile della griglia con questi tweak.
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
Le immagini visualizzate sono le immagini del prodotto. Per definire lo stile della pagina dei dettagli del prodotto:
- Apri la pagina dei dettagli del prodotto da modificare.
- Clicca su Modifica design nell'angolo in alto a sinistra. In alcuni siti potrebbe essere necessario passare il mouse su Modifica, cliccare su Modifica design e poi sull'icona della matita.
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 dell'immagine
- Rapporto dimensionale dell'immagine (solo slideshow e carosello).
- Nel design a carosello, il rapporto dimensionale imposta le proporzioni del contenitore dell'immagine, ma l'immagine potrebbe non essere ritagliata per riempirlo. Ti consigliamo di aggiungere immagini con lo stesso rapporto dimensionale che hai scelto nelle impostazioni.
- Allineamento Testo
- Stile della navigazione prodotti
- Spaziatura immagini
- Larghezza galleria
- Allineamento del contenuto (In alto, Al centro) - L'allineamento In alto può mostrare il padding tra la parte superiore dell'immagine del prodotto e il testo
- Design (Slideshow, Impilato, Carosello) - Se il design è impostato su Slideshow, vengono visualizzate le miniature delle altre immagini del prodotto.
- Posizionamento galleria
- Posizionamento miniature galleria - Posiziona le immagini in evidenza del prodotto quando il design è impostato su Slideshow.
- Larghezza modulo
- Dimensioni freccia del carosello
- Azione al clic (Zoom o Lightbox)
- Azione al passaggio del mouse (Zoom o nessuno)
- Fattore di zoom dell'immagine
Prodotti correlati
La sezione dei prodotti correlati nelle pagine dei dettagli del prodotto segue i tweak degli stili della sezione negozio. Per accedere a queste impostazioni da una pagina dei dettagli del prodotto, torna alla Pagina negozio e clicca su Modifica nell'angolo in alto a sinistra. I tipi di carattere seguono i tweak Tipo di carattere del tuo sito.
Pulsanti Aggiungi al carrello e Checkout
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 pagamento Squarespace. Non è possibile utilizzare questi pulsanti per collegarsi a siti esterni.
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.
Menu a discesa delle varianti
Il colore del menu a discesa delle varianti cambia in base al tema colore della sezione.
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.
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 Condividi | 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 del menu a discesa delle varianti. Non è possibile modificare il tipo di carattere degli elementi del 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 categorie può essere visualizzata nella parte superiore della Pagina negozio o in una barra laterale.
Il tipo di carattere della navigazione categorie segue lo stile paragrafo.
A seconda della posizione, le sottocategorie vengono visualizzate in un menu nidificato. Per modificare la posizione, apri gli stili di sezione e clicca su Barra laterale o In alto sotto Tipo Categorie. Per modificare l'ordine della navigazione, clicca e trascina le categorie nel Gestore categorie.
- 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.
Se abilitate, vengono visualizzate anche le etichette In offerta e Disponibilità limitata. Il modo in cui ne definisci lo stile dipende dalla versione del tuo sito. Puoi modificare il testo dell'etichetta Disponibilità limitata nel pannello Disponibilità limitata, ma non è possibile modificare il testo dell'etichetta In offerta.
- 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 - Articoli
- Classiche - n/a
| Descrizione | Avanzato | Classico |
| Attiva Anteprima Prodotto | Azione al passaggio del mouse: Zoom | n/a |
| Imposta il fattore di zoom dell'immagine | Fattore di zoom dell'immagine | 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.
- La navigazione categorie viene visualizzata orizzontalmente, per consentire agli acquirenti di scorrerla.
- I prodotti vengono visualizzati in un'unica colonna.
- La navigazione breadcrumb non viene visualizzata.
- 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.