Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.

Definire lo stile delle Pagine negozio

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:

  1. Apri la Pagina negozio da modificare.
  2. Nel Menu Home, clicca su Design, 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.

Pagina negozio

I visitatori della tua Pagina negozio visualizzano tutte le immagini in miniatura degli articoli in un layout a griglia. Negli stili delle sezioni negozio puoi personalizzare questi dettagli e 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:

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 miniatura dei prodotti 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:

  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 della matita.

Puoi personalizzare le seguenti opzioni:

  • Larghezza dell'immagine
  • Rapporto dimensionale immagine (solo design galleria Slideshow)
  • 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 galleria (Slideshow, Impilato, Carosello) - Se il design della galleria è Slideshow, vengono visualizzate le miniature delle altre immagini del prodotto.
  • Posizionamento galleria
  • Posizionamento miniature galleria - Posiziona le immagini in miniatura del prodotto quando il design della galleria è 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.

Pulsante Aggiungi al carrello

Questo pulsante segue i tweak di stile dei pulsanti del tuo sito. Non è possibile nascondere il pulsante Aggiungi al carrello nella versione 7.1. 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.

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

L'icona viene visualizzata come carrello nell'intestazione del sito. 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.

  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:

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.

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.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 34 su 124
Definire lo stile delle Pagine negozio