Definire lo stile delle Pagine negozio

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 del pennello nella sezione del negozio che intendi modificare. Per maggiori informazioni su come aprire gli stili delle sezioni negozio, visita Sezioni di Pagina di 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:

1. Apri la Pagina negozio da modificare.
2. Ritorna sul pannello Sito web, fai clic su Progettazione, quindi su Stili sito.
3. Utilizza i tweak delle sezioni Prodotti per modificare lo stile della pagina di destinazione.
4. 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.

I visitatori della tua pagina negozio visualizzano 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. Negli stili della sezione del negozio, puoi personalizzare i seguenti dettagli. Le modifiche apportate si applicano a tutte le pagine negozio sul tuo sito.

Formato:

• Larghezza dell'immagine
• Spaziatura colonne
• Spaziatura righe
• Numero di colonne (minimo due)
• Rapporto dimensionale immagine
• Allineamento Testo
• Spaziatura testo dell'immagine
• Pulsante Aggiungi al carrello - Visualizza il pulsante Aggiungi al carrello sulla pagina del negozio, oltre che sulle pagine dei dettagli del prodotto.
• 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

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

Le immagini visualizzate sono le immagini del prodotto. Per definire lo stile della pagina dei dettagli del prodotto:

1. Apri la pagina dei dettagli del prodotto da modificare.
2. 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 del pennello.

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: 

• Visualizzazione delle varianti
• 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 può essere visualizzato sotto le miniature dei prodotti nella pagina del negozio e nelle pagine dei dettagli dei singoli prodotti. 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 Checkout nella pagina del carrello seguono entrambi le modifiche allo stile del pulsante primario e le impostazioni dei colori del sito . Tieni presente che le opzioni di stile dei pulsanti si applicano alla maggior parte dei pulsanti del tuo sito, per garantire un aspetto coerente. 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.

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.

Visualizzazione delle varianti

Nel layout semplice, le varianti possono essere visualizzate sotto forma di pulsanti o in un menu a discesa. I pulsanti delle varianti si basano sui tweak di stile dei pulsanti secondari del tuo sito. Tutti gli altri layout visualizzano le varianti in menu a discesa. Il colore del menu a discesa delle varianti cambia in base al tema cromatico della sezione. Segue la famiglia di tipi di carattere dei campi Variante . Tieni presente che l'opzione per iscriversi alla lista d'attesa dei prodotti appare solo quando le varianti sono visualizzate nei menu a discesa.

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

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

Informazioni sul prodotto

Sezione Stili sito

• Avanzate - Prodotti: dettagli
• Classiche - Prodotti

Quantità e varianti

Sezione Stili sito

• Avanzate - Prodotti: Opzioni
• Classiche - Contenuto principale

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

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

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.

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. Il colore segue la modifica Navigazione categoria sotto Prodotti: griglia base in Stili sito.

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

• 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

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

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

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

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.

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.

1. Nella Pagina negozio, clicca su Modifica design, quindi apri Stili sito.
2. Clicca su Tipi di carattere.
3. 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:

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.