Dove si trovano queste impostazioni
Il branding è configurato per mercato, e all'interno di un mercato riguarda ogni pagina contemporaneamente. Apri il builder, scegli un mercato con il pulsante dei mercati (bandiera del paese) in cima alla barra laterale sinistra, poi apri la scheda Impostazioni (icona dell'ingranaggio). Impostazioni ha le proprie sotto-schede in questo ordine: Branding, Colori, Font, Layout, Animazioni, Automazioni, Campi, Icone, Restrizioni, Checkout, Modulo checkout, Pagina di manutenzione, CSS personalizzato e JavaScript personalizzato. Le modifiche si applicano al mercato che hai selezionato e diventano attive quando clicchi su Pubblica. Cambiare mercato ricarica i colori, i font e il layout di quel mercato.
Schemi di colore
La scheda Colori contiene fino a 9 schemi di colore. Una volta raggiunto il limite, la scheda di aggiunta diventa un badge di conteggio disattivato come 9/9. Ogni sezione, blocco e componente fa riferimento a uno schema tramite il suo numero, quindi cambiare i colori di uno schema ridisegna all'istante ogni sezione che lo usa su tutte le pagine. Clicca con il tasto destro su una scheda di schema per duplicarla o eliminarla.
Ruoli dei colori in ogni schema
Ogni schema definisce questi ruoli, tutti impostati come valori esadecimali:
- Sfondo: lo sfondo principale della sezione.
- Sfondo interno: uno sfondo sfumato per le card e i contenuti annidati dentro una sezione.
- Titolo: il colore del testo dei titoli.
- Testo: il colore del testo dei paragrafi e del corpo.
- Testo importante: testo enfatizzato come prezzi e valori evidenziati.
- Link e Link al passaggio del mouse: il colore dei collegamenti nello stato normale e al passaggio del mouse.
- Bordo: i bordi degli elementi e le linee divisorie.
- Contorno: gli anelli di focus e i contorni di accento che devono risaltare più dei bordi.
- Ombra: il colore dell'ombra scatolare (di solito semi-trasparente).
- Pulsante primario: sfondo, testo e bordo, ciascuno con il proprio colore separato al passaggio del mouse (6 valori in totale).
- Pulsante secondario: sfondo, testo e bordo, ciascuno con il proprio colore separato al passaggio del mouse (6 valori in totale).
- Campo sfondo, testo, bordo ed etichetta: lo stile dei campi del modulo.
- Sfondo campo al passaggio del mouse: lo sfondo del campo quando un acquirente passa il mouse sul campo.
Consigli per schemi efficaci
- Mantieni uno Sfondo chiaro e neutro sulla maggior parte delle sezioni e riserva i colori decisi a uno schema di accento per le sezioni hero e di invito all'azione.
- Rendi lo Sfondo del pulsante primario chiaramente distinto dallo Sfondo della sezione così il pulsante risalta.
- Imposta lo Sfondo interno come una leggera sfumatura dello Sfondo principale così le card si distinguono senza stonare.
- Punta ad almeno 4,5:1 di contrasto tra il testo e il suo sfondo.
Font
La scheda Font associa quattro ruoli a una famiglia di font ciascuno:
- Corpo: testo dei paragrafi e descrizioni.
- Titolo: tutti i titoli del negozio.
- Sottotitolo: titoli secondari e sottotitoli delle sezioni.
- Accento: un font stilistico per prezzi, badge ed enfasi decorativa.
Font disponibili: 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 i negozi con contenuti in arabo, ogni font viene abbinato automaticamente a una controparte araba corrispondente, così non devi selezionare un font arabo separatamente.
Larghezza della pagina
La scheda Layout ha un cursore Larghezza della pagina che imposta la larghezza massima della griglia del contenuto principale, da 900 a 1400 px a passi di 100 (quindi 900, 1000, 1100, 1200, 1300 o 1400; il valore predefinito è 1200). Le sezioni impostate sulla larghezza Pagina sono vincolate a questo valore; le sezioni impostate su Intera coprono sempre l'intera viewport a prescindere. Su viewport più strette della larghezza scelta, le sezioni si restringono per riempire il 100% dello schermo.
Logo
Il logo si imposta in due posti: il blocco Logo dentro la sezione Header, e il blocco Chi siamo nel footer. Clicca sul blocco, poi usa il suo selettore di immagini Logo per scegliere un'immagine dalla tua libreria multimediale o caricarne una nuova. Dopo averla scelta, imposta la Larghezza e l'Altezza di visualizzazione (ciascuna da 20 a 300 px); l'altra dimensione si ridimensiona automaticamente per mantenere le proporzioni. Il logo dell'header è impostato di default a 120 px di larghezza per 50 px di altezza, e puoi impostare la sua posizione orizzontale (sinistra, centro o destra) e il padding. Per impostazione predefinita il logo dell'header rimanda alla home page; puoi renderlo puramente decorativo disattivando l'interruttore Il logo reindirizza alla home nel gruppo Header della scheda Restrizioni.
Favicon
Imposta la favicon nella scheda Branding. Clicca su Seleziona favicon e scegli un'immagine PNG, JPEG, WEBP o ICO (dimensione consigliata 32x32 o 16x16 px). Appare nelle schede del browser e nei segnalibri.
Immagine di sfondo del corpo
Sempre nella scheda Branding, puoi facoltativamente impostare un'Immagine del corpo dietro l'intero negozio (PNG, JPEG o WEBP). Una volta selezionata un'immagine, appaiono due controlli: Dimensione (Copri riempie la viewport, ritagliando se necessario; Contieni adatta l'intera immagine) e Ripeti (quando attivo, l'immagine si affianca e scorre con la pagina; quando spento, una singola immagine resta fissa nella viewport mentre il contenuto scorre sopra). Usa un'immagine fortemente compressa per evitare di rallentare il caricamento della pagina.
CSS e JavaScript personalizzati
Per modifiche che le impostazioni standard non possono fare, la scheda CSS personalizzato e la scheda JavaScript personalizzato accettano ciascuna fino a 1.000 caratteri che vengono iniettati ed eseguiti su ogni pagina del negozio. Usali con parsimonia. Per uno stile limitato a una singola sezione, ogni sezione ha anche la propria scheda CSS personalizzato nel suo pannello di controllo, che è più sicura del campo a livello di sito.