Impostazioni del tema
Le impostazioni del tema sono impostazioni globali: valgono per tutte le pagine del negozio. Questa pagina spiega ogni gruppo di Impostazioni del tema, nell'ordine in cui compare nell'editor del tema.
Per aprire le Impostazioni del tema:
- Vai su Negozio online (Online Store) → Temi (Themes).
- Nella scheda del tema Tenora, seleziona Personalizza (Customize).
- Nell'editor del tema, seleziona Impostazioni del tema (l'icona a forma di ingranaggio).
I valori consigliati qui sotto sono quelli predefiniti del preset Tenora, salvo diversa indicazione.
Logo e favicon
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Logo | L'immagine del logo nell'header e nella pagina della password. Senza logo, l'header mostra il nome del negozio come testo. | Un .png trasparente o un .svg |
| Larghezza del logo | La larghezza del logo, da 40 a 300px. | 120px |
| Immagine favicon | La piccola icona nella scheda del browser. | Un .png da 32 x 32px |
Suggerimenti
- Nell'header il logo non supera mai i 56px di altezza. Un logo alto resta compatto, quindi di solito un logo largo rende meglio.
- Il logo usa il testo alternativo dell'immagine. Se l'immagine non ha un testo alternativo, viene usato il nome del negozio. Aggiungi il testo alternativo al logo in Contenuti (Content) → File (Files).
- I nomi del negozio senza logo più lunghi di 18 caratteri vengono mostrati con un testo più piccolo. Per un nome lungo, ti consigliamo di caricare un logo.
- Per una versione chiara del logo sopra il banner con immagine, usa l'impostazione Logo dell'header trasparente nella sezione Header.
Colori
Schemi di colori
Uno schema di colori è un insieme di colori da applicare a una sezione. Tenora ha 5 schemi di colori. La maggior parte delle sezioni ha un'impostazione Schema di colori, così puoi scegliere uno schema diverso per ogni sezione.
Ogni schema di colori contiene questi colori:
| Colore | Dove viene usato |
|---|---|
| Sfondo | Lo sfondo della sezione |
| Testo | Titoli, testo del corpo e icone |
| Colore di accento | Link, stati attivi e dettagli delle linee di quota |
| Sfondo del pulsante | Lo sfondo dei pulsanti pieni |
| Etichetta del pulsante | Il testo dei pulsanti pieni |
| Etichetta del pulsante con contorno | Il testo e il bordo dei pulsanti con contorno |
Per modificare uno schema di colori:
- Vai su Impostazioni del tema → Colori.
- Seleziona lo schema di colori da modificare.
- Cambia i colori. L'anteprima si aggiorna subito.
- Seleziona Salva.
Consigli
- Mantieni un rapporto di contrasto di almeno 4.5:1 tra Testo e Sfondo e tra Etichetta del pulsante e Sfondo del pulsante. Tutte le coppie di colori dei tre preset raggiungono questo livello (WCAG AA).
- Usa uno schema chiaro per la maggior parte delle pagine e uno scuro per il footer, come nei preset.
- I messaggi di errore e di conferma usano il colore del testo dello schema con un'icona colorata, quindi restano leggibili con ogni schema.
Superfici
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Mostra la texture granulosa | Aggiunge agli sfondi una leggera texture simile alla carta. | Attiva per gli stili chiari e naturali (Tenora, Terrace). Disattivata per gli stili scuri (Lantern). |
Tipografia
Titoli
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Font | Il font dei titoli. Sceglilo dalla libreria di font di Shopify. | Cormorant (Tenora), Fraunces (Terrace), Bodoni Moda (Lantern) |
| Scala delle dimensioni dei titoli | Controlla quanto ogni livello di titolo è più grande del testo del corpo. Opzioni: Compatta, Bilanciata, Espressiva. | Bilanciata |
| Maiuscole | Predefinito lascia il testo come l'hai scritto. Maiuscolo mostra i titoli in lettere maiuscole. | Predefinito |
Testo del corpo
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Font | Il font di testo del corpo, pulsanti ed etichette. | Instrument Sans (Tenora), Work Sans (Terrace), Manrope (Lantern) |
| Dimensione del font | La dimensione di base del testo, da 14 a 20px. | 16px |
Suggerimento: scegli font che includono i caratteri di tutte le lingue del negozio. Alcuni font non supportano tutti gli alfabeti. Se manca un carattere, il browser lo mostra con un font di riserva.
Layout
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Larghezza della pagina | La larghezza massima dei contenuti. Opzioni: Stretta (1200px), Standard (1440px), Ampia (1680px). | Standard |
| Margine della pagina | Lo spazio a sinistra e a destra della pagina, da 16 a 80px. Si riduce automaticamente sugli schermi piccoli. | 48px |
| Spaziatura tra le sezioni | Regola la spaziatura interna superiore e inferiore di ogni sezione. Opzioni: Compatta, Standard, Ampia. | Standard |
| Spaziatura della griglia | Lo spazio tra gli elementi delle griglie, come le schede prodotto, da 8 a 48px. | 24px |
Pulsanti
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Raggio degli angoli | Arrotonda gli angoli dei pulsanti, da 0 a 40px. Con 0 gli angoli sono squadrati. | 0px (Tenora, Lantern), 24px (Terrace) |
| Spessore del bordo | Lo spessore del bordo dei pulsanti con contorno, da 1 a 3px. | 1px |
| Maiuscole | Etichette dei pulsanti Predefinito o Maiuscolo. | Maiuscolo (Tenora, Lantern), Predefinito (Terrace) |
I pulsanti di pagamento con brand, come Shop Pay, mantengono i propri colori e il proprio stile. Il tema non li modifica.
Campi di input
Queste impostazioni valgono per i campi dei moduli, come il selettore di quantità, il campo di iscrizione email, i campi di "Ci starà?" e i campi del modulo di contatto.
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Raggio degli angoli | Arrotonda gli angoli dei campi, da 0 a 24px. | In linea con lo stile dei pulsanti: 0px con pulsanti squadrati, circa 8px con pulsanti arrotondati |
| Spessore del bordo | Lo spessore del bordo dei campi, da 1 a 3px. | 1px |
Schede di prodotti e collezioni
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Stile | L'aspetto delle schede prodotto. Standard mostra solo immagine e testo. Con cornice colloca la scheda su una superficie chiara con spaziatura interna. Campione aggiunge una linguetta con campione di materiale all'immagine della scheda. | Campione (Tenora), Standard (Terrace), Con cornice (Lantern) |
| Proporzioni dell'immagine | La forma delle immagini delle schede. Opzioni: Adatta all'immagine, Verticale, Quadrato, Orizzontale. | Verticale per le foto di mobili, Quadrato per illuminazione e oggetti piccoli |
| Raggio degli angoli | Arrotonda gli angoli delle schede, da 0 a 24px. | 0px, oppure 8px con pulsanti arrotondati |
Suggerimento: con Adatta all'immagine, ogni scheda usa la forma della propria immagine prodotto. Usalo solo se tutte le immagini prodotto hanno la stessa forma, altrimenti la griglia appare irregolare.
Formato valuta
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Mostra i codici valuta | Mostra i prezzi con il codice valuta, ad esempio "$12.00 USD" invece di "$12.00", nelle pagine prodotto, nelle schede prodotto, nel carrello e nel carrello a scomparsa. | Attiva se vendi in più valute con lo stesso simbolo, come USD, CAD e AUD. Altrimenti disattivata. |
Il totale stimato nel carrello mostra sempre il codice valuta. Per saperne di più, consulta Vendere a livello internazionale.
Carrello
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Tipo di carrello | A scomparsa apre il carrello come pannello laterale quando un cliente aggiunge un prodotto o seleziona l'icona del carrello. Pagina porta il cliente alla pagina del carrello. | A scomparsa |
| Mostra la nota dell'ordine | Mostra il campo "Aggiungi una nota all'ordine" nel carrello a scomparsa e nella pagina del carrello. I clienti possono usarlo per le istruzioni di consegna. | Attiva |
Il carrello a scomparsa ha impostazioni proprie. Per modificarle, apri l'editor del tema, seleziona la sezione Carrello a scomparsa e cambia Schema di colori o Mostra i pulsanti di check-out dinamico.
Ricerca
| Impostazione | Cosa fa | Valore consigliato |
|---|---|---|
| Abilita la ricerca predittiva | Mostra prodotti, suggerimenti, collezioni, pagine e articoli mentre il cliente digita nel pannello di ricerca. Se è disattivata, il pannello di ricerca funziona comunque e apre la pagina dei risultati della ricerca. | Attiva |
| Mostra il prezzo del prodotto | Mostra il prezzo accanto ai prodotti nella ricerca predittiva. Questa impostazione è visibile solo quando la ricerca predittiva è attiva. | Attiva |
Social media
Inserisci l'indirizzo completo di ogni account social, ad esempio https://www.instagram.com/yourstore. Lascia vuoto un campo per nascondere l'icona corrispondente.
Gli account disponibili sono: Facebook, Instagram, Pinterest, TikTok, X (Twitter), YouTube, Vimeo, Tumblr e Snapchat.
Le icone compaiono:
- nel blocco Icone dei social della sezione Footer
- nel menu a scomparsa su smartphone e tablet
Se non compili nessun account, non viene mostrata nessuna icona.