Come abbinare un menu di navigazione al tema del tuo negozio Shopify (Colori, Font, Menu mobile)

Un menu di navigazione non dovrebbe mai sembrare un elemento aggiunto per caso. Quando i clienti esplorano le tue collezioni, la tipografia, i colori, la spaziatura e gli angoli arrotondati dei collegamenti devono integrarsi perfettamente con il resto del negozio. Eppure, molti commercianti Shopify notano che, sebbene le immagini di copertina siano impeccabili, la navigazione appare slegata: mostra caratteri generici, tonalità di sfondo discordanti, bordi rigidi o un menu mobile del tutto privo di stile.

Il principio fondamentale è chiaro: un menu si abbina al tema quando riutilizza i valori che il tema già impiega. Invece di inventare nuovi codici esadecimali o scegliere font a caso, leggi prima i design token del tuo tema, annotali su una scheda di riferimento e applica la stessa guida all’intestazione desktop, al cassetto mobile e ai menu creati tramite app.

Quick Answer: How to Match a Navigation Menu to Your Store Theme

Per armonizzare un menu di navigazione con il tema del tuo negozio, copia i valori che il tema già usa: schema colori, font, raggio degli angoli e spaziatura. Applicali prima tramite le impostazioni dell’header, poi colma le differenze con piccoli CSS personalizzati su un tema duplicato, e controlla anche il cassetto mobile.

Segui questi cinque passaggi pratici:

1. Leggi i design token del tema: Controlla nelle Impostazioni del tema gli schemi colore attivi, le famiglie tipografiche e i raggi di curvatura dei pulsanti.
2. Usa le impostazioni native dell’header: Seleziona il menu desiderato, assegna lo schema di colori corrispondente e verifica le opzioni di layout integrate.
3. Colma le differenze con CSS e variabili del tema: Aggiungi regole brevi nella sezione Header richiamando le variabili native invece di valori statici.
4. Armonizza il cassetto mobile: Allinea lo sfondo del cassetto a scomparsa, i font dei link, le linee divisorie e l’icona hamburger.
5. Sincronizza i menu delle app: Riporta gli stessi valori della scheda di corrispondenza nelle impostazioni di design delle applicazioni esterne.

Tieni presente che le modifiche apportate nelle Impostazioni tema globali si applicano all’intero negozio online. Pertanto, modificare unicamente il menu di navigazione richiede CSS personalizzato a livello di sezione o le opzioni di un’app dedicata.

What “Matching Your Theme” Means: The Theme Match Sheet

La coerenza visiva fa sembrare un negozio curato. La nostra guida su design del menu e identità del brand approfondisce i principi di brand alla base di tutto questo; la guida che stai leggendo è la parte pratica e tecnica. Un menu armonizzato con il tema non si limita a funzionare: appare come parte integrante dell’esperienza del negozio.

Per ottenere questo risultato senza procedere a tentativi, compila una Scheda di corrispondenza del tema (Theme Match Sheet). Questa tabella sintetizza le sette proprietà visive chiave del tuo tema e indica dove reperirle e come applicarle al menu:

Durante il controllo, concentrati su quattro azioni prioritarie:

• Copy theme colors: Ricava l’esatto schema colori assegnato all’intestazione anziché scegliere tonalità arbitrarie.
• Reuse theme fonts: Applica la famiglia tipografica del tuo negozio direttamente agli elementi di navigazione.
• Match corner radius: Assicurati che i contenitori a discesa e i pulsanti condividano la medesima curvatura dei pulsanti dello storefront.
• Mobile menu match: Estendi schema colori, font e divisori al cassetto mobile per garantire la stessa cura visiva agli utenti su smartphone.

Step 1: Read Your Theme’s Design Tokens

Un «design token» è una decisione di design a cui è stato assegnato un nome: un valore registrato che definisce un colore, un font, una spaziatura o un raggio specifico. Raccogliendo questi valori direttamente dal tema Shopify, elimini qualsiasi incongruenza estetica.

Colors and color schemes

Nel pannello di amministrazione Shopify, vai su Negozio online > Temi, fai clic su Personalizza e apri la scheda Impostazioni tema. Apri il pannello Colori.

I temi Shopify organizzano le tavolozze tramite il concetto di Color scheme (schema colori): una combinazione predefinita di colori per sfondo, testo e pulsanti. Nell’editor dei temi di Shopify puoi gestire fino a 21 schemi di colore. Individua quale schema è associato alla tua sezione Header e annota i valori esatti di sfondo e testo.

Fonts and text size

Successivamente, apri Impostazioni tema > Tipografia. Qui troverai le famiglie di caratteri configurate per Titoli e Corpo del testo, insieme ai relativi pesi.

Prendi nota di queste scelte. La documentazione ufficiale del Centro assistenza Shopify precisa che le modifiche apportate nelle Impostazioni tema si applicano all’intero negozio online. Se modifichi i font qui, cambieranno anche tutti i titoli e i paragrafi del negozio. Inoltre, la documentazione Shopify suggerisce di valutare l’uso di font di sistema per la tipografia.

Corner radius and spacing

Esamina le impostazioni di pulsanti, schede e campi di input nelle Impostazioni tema. Molti temi includono un’impostazione per gli angoli arrotondati, spesso chiamata Button radius; il nome esatto varia da tema a tema.

Verifica se i tuoi pulsanti hanno angoli netti, una leggera smussatura o una forma a pillola completamente arrotondata. Quando i menu a discesa e i badge condividono la stessa curvatura, la navigazione appare curata in ogni dettaglio. Controlla anche gli spazi attorno a pulsanti e sezioni per decidere se i link del menu debbano essere compatti o distanziati.

Reading CSS variables in your browser

Per verificare come il tuo tema traduce queste proprietà nel codice, usa gli strumenti per sviluppatori del browser:

1. Apri il tuo negozio online o un’anteprima in Chrome, Firefox o Safari.
2. Fai clic destro sull’intestazione e seleziona Ispeziona.
3. Seleziona l’elemento <html> o <body> ed esamina il riquadro Styles.

I temi Shopify moderni come Dawn impostano le opzioni del personalizzatore direttamente come variabili CSS nel file theme.liquid. Dawn impiega variabili quali:

• --font-body-family: riflette il font scelto per il corpo del testo.
• --font-heading-family: rappresenta il font dei titoli principali.
• --color-foreground: contiene il colore del testo attivo, salvato come numeri di rosso, verde e blu, quindi si usa come rgb(var(--color-foreground)).
• --buttons-radius: eredita il raggio di curvatura dei pulsanti definito nel tema.

Individuando i token per Color scheme, Typography e Button radius, puoi sfruttare la struttura nativa del tema senza scrivere valori fissi nel codice. Poiché i nomi delle variabili variano da tema a tema, controlla sempre i tuoi selettori con i DevTools.

Concept illustration: Pannello delle impostazioni del tema accanto a una scheda di corrispondenza con schema colori, tipografia e raggio pulsanti da applicare al menu.

Step 2: Use the Header Settings Your Theme Already Has

Prima di scrivere codice personalizzato o installare applicazioni aggiuntive, sfrutta a fondo le opzioni native disponibili nell’editor del tuo tema Shopify.

Connecting your menu and color scheme

1. Nell’editor del tema, apri la sezione Header.
2. Trova l’impostazione del menu (l’etichetta varia da tema a tema) e verifica che sia selezionata la lista di navigazione corretta. I menu vengono creati in Negozio online > Navigazione, dove puoi nidificare i link fino a tre livelli di profondità.
3. Cerca un’impostazione dello schema colori nei controlli della sezione Header (l’etichetta varia da tema a tema) e seleziona quello annotato nella tua scheda di riferimento.
4. Controlla l’anteprima: a seconda del tema, l’header e il menu potrebbero ora adottare i colori di sfondo e di testo di quello schema.

Evaluating header menu layouts

I temi Shopify offrono diversi formati di visualizzazione per la barra di navigazione. Secondo la documentazione di Shopify, la posizione e l’aspetto del menu principale e dei menu a discesa variano a seconda del tema, e una voce di primo livello può includere fino a due livelli di menu a discesa nidificati.

In base al tuo tema, puoi impostare:

• Tipo di menu: Elenco a discesa classico, mega menu a più colonne o cassetto laterale.
• Posizione su desktop: In alto a sinistra, centrato sopra il logo o allineato alla ricerca.
• Header fisso (Sticky): Barra di navigazione che rimane visibile in alto durante lo scorrimento della pagina.

Native customizer boundaries

Le impostazioni native offrono una solida base, ma presentano limiti definiti:

• I controlli e le diciture cambiano da tema a tema; alcuni permettono di regolare la spaziatura dei link, altri non offrono alcuna opzione.
• Poiché la tipografia nelle Impostazioni tema è universale, non puoi cambiare solo il font dei link del menu senza modificare anche il resto dei testi del negozio.

Se le opzioni predefinite non bastano a soddisfare la tua scheda di corrispondenza, è il momento di intervenire con CSS mirato.

Step 3: Close the Gaps with Custom CSS That Reuses Theme Variables

Il CSS personalizzato consente di perfezionare l’aspetto del menu senza dover toccare i file dei modelli Liquid. Scrivere regole compatte e precise assicura una facile manutenzione futura.

Duplicate the theme first

Prima di inserire regole CSS, crea sempre una copia di backup del tuo tema.

La documentazione ufficiale del Centro assistenza Shopify sulla duplicazione dei temi ricorda che fare una copia di backup è un’ottima precauzione per annullare le modifiche e ricominciare da capo in caso di necessità. Nel pannello Shopify, vai su Negozio online > Temi, apri il menu azioni accanto al tema attivo e seleziona Duplica. Effettua prima le modifiche su questa copia, verifica il risultato e pubblica quando sei pronto.

Where custom CSS goes and its limits

Shopify mette a disposizione due spazi per inserire CSS personalizzato senza modificare i file del tema:

1. CSS globale del tema: In Impostazioni tema > CSS personalizzato, con effetto sull’intero negozio.
2. CSS di sezione: In fondo al pannello delle proprietà della sezione, in CSS personalizzato (per esempio nella sezione Header).

Tieni conto dei limiti di caratteri fissati da Shopify:

• Le regole CSS per l’intero tema sono limitate a 1500 caratteri.
• Le regole CSS per una sezione specifica sono limitate a 500 caratteri.
• Quando aggiungi CSS a una sezione, la sua portata è ristretta automaticamente a quella specifica sezione.
• Il CSS globale del tema non si applica alla pagina di pagamento (checkout).

Poiché il menu risiede nell’Header, inserire regole brevi nel riquadro CSS della sezione Header rappresenta la scelta più ordinata e sicura.

Use var() instead of hard-coded values

Evita di inserire codici colore esadecimali o nomi di font fissi direttamente nel CSS. Se in seguito rinnoverai i colori del brand, queste regole risulteranno disallineate. Usa invece le variabili CSS del tema tramite la funzione var(), come spiegato nella documentazione MDN:

.header__menu-item {
  font-family: var(--font-heading-family);
  color: rgb(var(--color-foreground));
}

(Nota: classi e variabili sopra indicate si riferiscono al tema Dawn; verifica le tue nei DevTools).

Utilizzando var(--font-heading-family) e rgb(var(--color-foreground)), i link del menu seguono il tema quando modifichi colori o font nelle impostazioni del tema. Per tornare indietro, basta cancellare lo snippet CSS o ripristinare il tema duplicato.

Step 4: Make the Mobile Menu Match, Not Just the Desktop Menu

Un errore frequente consiste nell’ottimizzare l’header desktop trascurando del tutto l’aspetto del cassetto su smartphone.

Why mobile drawers diverge

In molti temi Shopify, i menu desktop e mobile non condividono la stessa struttura HTML. I collegamenti su desktop sono spesso disposti in riga orizzontale, mentre su mobile la navigazione viene generata all’interno di un cassetto scorrevole o di un overlay nascosto.

Poiché il cassetto è spesso un elemento separato, il CSS scritto per il desktop potrebbe non raggiungere i link al suo interno. Inoltre, il colore dell’icona hamburger viene spesso ereditato dal colore del testo dell’intestazione, quindi il cassetto stesso può richiedere sfondo, testo e separatori propri.

Aligning drawer styling

Per offrire un’esperienza fluida su mobile, verifica che il tuo cassetto rispetti questi requisiti:

• Same font family: I collegamenti all’interno del cassetto devono condividere lo stesso carattere dell’header desktop.
• Same text color: I titoli di categoria e i sottolink devono riprendere il colore del testo dell’intestazione.
• Same divider style: Le linee che separano le voci su mobile devono riprendere lo spessore e il tono dei bordi delle schede prodotto.

Ricerche sull’usabilità condotte da Nielsen Norman Group (Pernice & Budiu, 2016) evidenziano che la navigazione nascosta (come i menu hamburger) è meno individuabile rispetto a quella visibile. Poiché gli utenti devono toccare un’icona per visualizzare le categorie, ogni punto visibile—dall’icona hamburger allo sfondo del pannello—deve risultare chiaro, leggibile e fedele all’identità visiva del brand.

Per approfondire l’architettura dei link su dispositivi mobili, consulta la nostra guida sulle migliori pratiche per i menu a cassetto su mobile. Testa sempre la navigazione su uno smartphone reale.

Concept illustration: Intestazione desktop e menu a cassetto mobile utilizzano la stessa famiglia tipografica, colore testo e stile divisori del tema.

Step 5: Match a Menu Added by an App (Tab Bar, Mobile Menu, Mega Menu)

Quando il catalogo supera le capacità dei semplici menu a tendina, molti commercianti installano app di navigazione per aggiungere una barra di schede inferiore fissa, un mega menu a più colonne o pulsanti galleggianti.

Poiché i menu delle app vengono aggiunti al negozio separatamente dal tema, potrebbero non seguire automaticamente i colori e i font delle impostazioni del tema. Se non configurati, possono apparire diversi dal resto del negozio.

Applying your theme match sheet to app settings

Usa la scheda di corrispondenza per inserire i parametri corretti nel pannello dell’app:

1. Tipografia: Seleziona il font e il peso corrispondenti a titoli o testi del tuo tema.
2. Colori: Digita i codici esadecimali della palette dell’header per sfondi, etichette e stati attivi.
3. Raggio angoli: Adatta la curvatura di pannelli e pulsanti al raggio dei pulsanti del tema.
4. Divisori: Regola spessore e colore delle linee in armonia con le schede prodotto dello storefront.

Keeping custom CSS inside the app

Se il menu dell’app necessita di modifiche CSS dettagliate, inserisci il codice direttamente nel riquadro CSS integrato nell’app anziché modificare i file del tema.

Se l’app salva il proprio CSS fuori dai file del tema, aggiornare il tema o installarne uno nuovo non rimuove quella formattazione. Verifica come la tua app gestisce questo aspetto prima di fare affidamento su di esso.

Se stai configurando per la prima volta un menu tramite applicazione, leggi la nostra guida per iniziare con un’app per la creazione di menu.

Common Mismatches and How to Fix Them

Consulta questa tabella diagnostica per identificare e correggere rapidamente le incongruenze estetiche più diffuse:

Trade-offs: When Not to Restyle the Menu

Curare la grafica è fondamentale, ma intervenire sullo stile non è sempre la risposta più opportuna:

Problemi strutturali del catalogo

Se i clienti faticano a individuare gli articoli a causa di un’alberatura complessa o caotica, modificare font e colori non risolverà il problema. Un design accattivante non compensa una struttura informativa carente. Consulta i limiti dei menu dei temi Shopify per verificare se il tuo catalogo necessita di una riorganizzazione delle collezioni prima di procedere con modifiche estetiche.

Manutenzione continua e limiti di caratteri del CSS del tema

L’aggiunta di CSS nel tema genera debito tecnico. Con un limite di 1500 caratteri per il CSS globale e 500 caratteri per quello di sezione, le regole articolate esauriscono presto lo spazio consentito. Ad ogni aggiornamento importante del tema, il codice dovrà essere verificato e ripristinato a mano.

Effetti collaterali sulla tipografia globale

Modificare i caratteri nelle Impostazioni tema cambia i font di ogni scheda prodotto, titolo di collezione e paragrafo del negozio. La documentazione Shopify suggerisce di valutare i font di sistema, quindi aggiungere un font separato solo per i link del menu merita un ripensamento.

Where Navi+ Fits

Se il tuo tema Shopify non supporta elementi di navigazione avanzati—come una barra di schede per mobile, un mega menu a più colonne, un cassetto mobile dedicato, un menu a icone o pulsanti flottanti—Navi+ offre tutti gli strumenti per crearli.

Nella dashboard di Navi+, la scheda Design include controlli visivi intuitivi per personalizzare colore di sfondo, tipografia (famiglia e dimensione del font) ed elementi grafici. I commercianti possono inserire direttamente i dati ricavati dalla propria scheda di corrispondenza.

In più, Navi+ integra un editor CSS interno in cui ogni regola riceve un prefisso specifico per menu e viene memorizzata separatamente dai file del tema Shopify. Di conseguenza, aggiornamenti o cambi di tema non altereranno in alcun modo i menu configurati con Navi+.

Tieni conto dei nostri parametri tecnici:

• I menu Navi+ supportano percorsi di navigazione fino a 3 livelli.
• La scheda Design offre controlli visuali nativi per i primi 2 livelli.
• L’assegnazione di dimensioni font o icone specifiche per i livelli 2 e 3 richiede l’inserimento di brevi regole CSS nel riquadro dell’app.

If your theme doesn’t have the menu type you need, such as a bottom Tab Bar or a mega menu, Navi+ lets you build one and set its fonts and colors from your theme match sheet in the Design tab — you can try it on a duplicate theme first.

Action Checklist Before You Publish

Verifica questi 10 punti prima di pubblicare le modifiche:

• Tema duplicato: Creata una copia di backup del tema per poter annullare i cambiamenti all’istante se necessario.
• Scheda di corrispondenza completata: Dati su schema colori, font, spessori e raggi dei pulsanti regolarmente registrati.
• Schema colori header assegnato: Verificato che la sezione Header nell’editor applichi lo schema colori corretto.
• Font coordinati: Confermato che i link del menu utilizzino il carattere per Titoli o Testo definito nelle impostazioni del tema.
• Contrasto WCAG verificato: Accertato che il rapporto di contrasto sia di almeno 4.5:1 per testo normale e 3:1 per testo grande.
• Bordi arrotondati allineati: Contenitori a discesa, badge e pulsanti allineati alla curvatura dei pulsanti dello storefront.
• Comportamento su hover e focus verificato: Reattività visiva al passaggio del mouse e presenza dell’anello di focus accessibile da tastiera.
• Cassetto mobile testato su smartphone reale: Verificati icona hamburger, sfondo del cassetto, divisori e reattività al tocco su un telefono fisico.
• Menu delle app sincronizzati: Valori della scheda trasferiti a barre inferiori, mega menu o cassetti di app terze.
• CSS conciso e sicuro: Regole brevi (entro i limiti di 500/1500 caratteri) che richiamano variabili del tema tramite var().

FAQ

Can I change only the menu font without changing my whole store’s font?

Le impostazioni tipografiche del tema si applicano a tutto il negozio. Per cambiare solo il font del menu, aggiungi una regola CSS mirata nella sezione Header dell’editor del tema o seleziona il font direttamente in un’app per menu.

Where do I add custom CSS in Shopify?

Nell’editor dei temi puoi inserire CSS personalizzato per l’intero tema (fino a 1500 caratteri) o per una specifica sezione come l’Header (fino a 500 caratteri). Il CSS di sezione agisce solo su quell’elemento e il CSS globale non influenza la pagina di checkout.

Why does my mobile menu look different from my desktop menu?

I temi strutturano il cassetto mobile come elemento HTML indipendente, spesso non raggiunto dalle classi desktop. Sebbene l’icona hamburger erediti di solito il colore del testo dell’intestazione, lo sfondo e i caratteri del cassetto richiedono una formattazione autonoma.

How do I keep my menu matching after I change theme colors later?

Fai riferimento alle variabili native del tema con la funzione var() (come var(--font-heading-family) o var(--font-body-family)) anziché specificare valori fissi. Quando modificherai colori o font nelle Impostazioni tema, il menu li seguirà.

What contrast should menu text have?

In conformità con le linee guida per l’accessibilità (WCAG 2.1), il testo del menu deve presentare un rapporto di contrasto minimo di 4.5:1 per il testo standard e di 3:1 per i testi di grandi dimensioni rispetto allo sfondo.

Should I edit CSS or use an app?

Inizia sempre con i controlli nativi dell’intestazione e usa piccoli snippet CSS per ritocchi minimi. Se il tuo negozio ha bisogno di formati assenti nel tema—come una barra di schede per mobile o un mega menu a più colonne—utilizza un’app e verifica che mantenga i propri stili fuori dai file del tema, così che sopravvivano ai cambi di tema.

Sources

• Shopify Help Center: Customizing Theme Settings
• Shopify Help Center: Adding Custom CSS to Your Theme
• Shopify Help Center: Duplicating Themes
• Shopify Help Center: Set up Drop-Down Menus in Your Online Store
• Shopify Developer Documentation: Navigation and Search Architecture
• W3C Web Accessibility Initiative: WCAG 2.1 Understanding Contrast (Minimum)
• MDN Web Docs: Using CSS Custom Properties (Variables)
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation (Pernice & Budiu, 2016)
• Shopify Dawn Theme Repository: theme.liquid layout configuration
• Navi+ Help Center: Using Built-in Settings or Custom CSS
• Fudge: How to Change the Mobile Menu in Shopify