Dove si trovano queste impostazioni
Queste impostazioni si configurano per mercato e, all'interno di un mercato, hanno effetto su tutte le pagine contemporaneamente. Apri il builder, scegli un mercato con la scheda del mercato (icona della bandiera del paese) nella barra laterale sinistra, poi fai clic sulla scheda Impostazioni (icona dell'ingranaggio). Le modifiche si applicano al mercato selezionato e diventano attive quando fai clic su Pubblica. Per l'elenco completo di tutte le impostazioni, consulta la guida di riferimento delle impostazioni del builder.
Schemi di colore
Storeep utilizza una palette di un massimo di 9 schemi di colore. Ogni sezione, blocco e componente del tuo store fa riferimento a uno di questi schemi tramite il suo numero (da 1 a 9). La modifica dei colori di uno schema aggiorna immediatamente ogni sezione che lo utilizza, su tutte le pagine.
Ruoli di colore all'interno di ogni schema
Ogni schema definisce i seguenti ruoli di colore, tutti impostati come valori esadecimali:
- Sfondo: il colore di sfondo principale della sezione.
- Sfondo interno: uno sfondo con una leggera tinta usato per le schede e le aree di contenuto annidate all'interno della sezione.
- Colore dei titoli: il colore del testo dei titoli.
- Colore del testo del corpo: il colore del testo dei paragrafi.
- Colore del testo evidenziato: un colore di testo enfatizzato usato per i prezzi, i badge di risparmio e i valori dei timer del conto alla rovescia. Di solito è la tonalità più scura o più decisa della palette.
- Colore dei link: il colore predefinito dei collegamenti ipertestuali.
- Colore dei link al passaggio del mouse: il colore dei collegamenti ipertestuali quando l'acquirente vi passa sopra con il mouse.
- Colore dei bordi: il colore dei bordi degli elementi e delle linee divisorie.
- Colore del contorno: il colore degli anelli di focus, delle evidenziazioni di selezione da tastiera e dei contorni di accento che devono risaltare più dei bordi normali.
- Colore dell'ombra: il colore delle ombre dei riquadri (di solito con una certa trasparenza).
- Sfondo del pulsante primario: il colore di riempimento dei pulsanti primari.
- Testo del pulsante primario: il colore dell'etichetta sui pulsanti primari.
- Bordo del pulsante primario: il colore del bordo dei pulsanti primari.
- Sfondo del pulsante primario al passaggio del mouse: il colore di riempimento del pulsante primario al passaggio del mouse.
- Testo del pulsante primario al passaggio del mouse: il colore dell'etichetta del pulsante primario al passaggio del mouse.
- Bordo del pulsante primario al passaggio del mouse: il colore del bordo del pulsante primario al passaggio del mouse.
- Sfondo del pulsante secondario: il colore di riempimento dei pulsanti secondari.
- Testo del pulsante secondario: il colore dell'etichetta sui pulsanti secondari.
- Bordo del pulsante secondario: il colore del bordo dei pulsanti secondari.
- Sfondo del pulsante secondario al passaggio del mouse: il colore di riempimento del pulsante secondario al passaggio del mouse.
- Testo del pulsante secondario al passaggio del mouse: il colore dell'etichetta del pulsante secondario al passaggio del mouse.
- Bordo del pulsante secondario al passaggio del mouse: il colore del bordo del pulsante secondario al passaggio del mouse.
- Sfondo del campo di input: il colore di sfondo dei campi di input dei moduli.
- Colore del testo dell'input: il colore del testo all'interno dei campi di input dei moduli.
- Colore del bordo dell'input: il colore del bordo dei campi di input dei moduli.
- Colore dell'etichetta dell'input: il colore del testo dell'etichetta sopra i campi del modulo.
- Sfondo dell'input al focus: il colore di sfondo dell'input quando l'acquirente mette a fuoco il campo o vi passa sopra con il mouse.
Consigli per schemi di colore efficaci
- Usa un colore chiaro e neutro per lo Sfondo nella maggior parte delle sezioni e riserva i colori decisi per un singolo schema di accento da usare nelle sezioni hero e di invito all'azione.
- Rendi lo Sfondo del pulsante primario visivamente distinto dallo Sfondo della sezione, perché il pulsante deve risaltare chiaramente.
- Mantieni lo Sfondo interno come una tinta molto leggera dello Sfondo principale, così gli sfondi delle schede sono distinguibili senza risultare stridenti.
- Punta a un contrasto di almeno 4,5:1 tra il Colore del testo del corpo e lo Sfondo, e tra il Testo del pulsante primario e lo Sfondo del pulsante primario.
Tipografia
Quattro ruoli di font controllano la tipografia su tutte le pagine. Ogni ruolo è associato a una famiglia di font della libreria disponibile.
- Corpo: il font principale per il testo dei paragrafi e le descrizioni.
- Titolo: il font per tutti i titoli dell'intero store.
- Sottotitolo: il font per i titoli secondari e i sottotitoli delle sezioni, che fa da ponte tra lo stile dei titoli e quello del corpo.
- Accento: un font stilistico per prezzi, badge ed enfasi decorative.
I font disponibili includono: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface e Acme.
Per gli store con contenuti in arabo, i font vengono abbinati automaticamente a controparti arabe corrispondenti: ad esempio, Inter è abbinato a Cairo e Poppins a Tajawal. Non è necessario selezionare il font arabo separatamente.
Larghezza della pagina
L'impostazione globale Larghezza della pagina controlla la larghezza massima della griglia dei contenuti principali in pixel. Le sezioni impostate sulla larghezza Pagina sono vincolate a questo valore; le sezioni impostate su Intera occupano sempre l'intero viewport, indipendentemente. Valori disponibili: 900, 1000, 1100, 1200 (predefinito), 1300 e 1400 px. Sui viewport più stretti della larghezza selezionata, le sezioni si restringono automaticamente per riempire il 100% dello schermo.
Logo
Il logo si imposta all'interno del blocco logo della sezione Intestazione e all'interno del blocco Chi siamo nel piè di pagina. Fai clic sul blocco del logo nel pannello di controllo, poi fai clic su + Aggiungi media o + Aggiungi immagine per caricare il tuo logo dal tuo dispositivo o sceglierlo dalla tua libreria media. Dopo il caricamento, imposta la larghezza di visualizzazione (20-300 px) e l'altezza (20-300 px); l'altra dimensione si ridimensiona automaticamente per mantenere le proporzioni.
Favicon
La favicon si imposta in Impostazioni → Branding nel builder. Fai clic sul campo favicon e carica un'immagine (consigliata: un'immagine quadrata). La favicon appare nelle schede del browser e nei segnalibri.
Immagine di sfondo del corpo
Sempre in Impostazioni → Branding: puoi facoltativamente impostare un'immagine di sfondo per l'intera pagina. Configura come si ridimensiona (Copri riempie l'intero viewport, Contieni adatta l'immagine al suo interno) e se si ripete (a mosaico) o resta come immagine singola dietro il contenuto in scorrimento.
CSS e JavaScript personalizzati globali
Per le personalizzazioni avanzate che le impostazioni standard non possono realizzare, Impostazioni offre un campo CSS globale (fino a 1.000 caratteri) e un campo JS globale (fino a 1.000 caratteri). Il CSS inserito qui viene iniettato in ogni pagina dello store; il JS inserito qui viene eseguito su ogni pagina. Usali con parsimonia e preferisci la sezione Codice personalizzato per le personalizzazioni specifiche di una pagina.