Come correggere le dimensioni delle immagini in un menu Shopify (Mega Menu e drawer mobile)

Quick answer

Per correggere le dimensioni delle immagini in un menu, uniforma ogni immagine tramite la proprietà CSS aspect-ratio, quindi scegli object-fit: cover per riempire il riquadro (i bordi possono essere ritagliati) o contain per visualizzare l’immagine completa. Carica file sorgente grandi almeno quanto l’area di visualizzazione e testa separatamente il drawer mobile.

1. Uniforma le immagini sorgente: Scegli una proporzione identica per l’intera riga del menu.
2. Imponi una forma con i CSS: Applica aspect-ratio e object-fit al selettore immagine del tuo tema.
3. Elimina i ritagli in Dawn: Imposta le immagini di sfondo del mega menu in modalità contain su desktop.
4. Risolvi le immagini sfocate: Usa asset adatti a schermi ad alta densità e verifica i percorsi dei file.
5. Verifica il drawer mobile: Controlla i selettori del pannello a scorrimento e i sottomenu su smartphone.

Why menu images end up uneven, cropped or blurry

Prima di modificare i fogli di stile, verifica se il tuo menu di navigazione è gestito direttamente dal tema Shopify o da un’applicazione di navigazione installata. I temi e le app generano strutture HTML differenti; inserire regole CSS su classi errate non produrrà alcun risultato visibile.

I problemi di visualizzazione delle immagini nel menu dipendono generalmente da tre motivi distinti:

In assenza di proporzioni vincolanti, i browser renderizzano ogni immagine alla sua altezza naturale. Una foto verticale accanto a una miniatura quadrata disallinea la fila orizzontale. Al contrario, i temi che forzano box rettangolari fissi tagliano la sommità e la base delle immagini quadrate. Individuare la causa precisa consente di applicare la regola strutturale corretta.

Questo video mostra come si aggiungono le immagini a un mega menu a tendina; usalo come contesto per capire da dove nasce il problema delle dimensioni.

Step 1: Standardize your source images

La soluzione più affidabile consiste nell’uniformare le proporzioni delle immagini prima del caricamento su Shopify. Come evidenziato nella documentazione Shopify sulle immagini dei temi, «è necessario utilizzare il corretto rapporto di aspetto dell’immagine» affinché gli elementi grafici si allineino con precisione nei layout.

Scegli una proporzione unica per tutte le immagini che compongono la stessa fila del mega menu:

• Quadrata (1:1): Perfetta per schede di collezione, miniature di prodotti e griglie simmetriche.
• Orizzontale (come 3:2 o 16:9): Ottima per banner promozionali o schede informative ampie.

Esporta tutte le immagini di quella riga nella medesima proporzione. Carica file con dimensioni fisiche in pixel pari o superiori all’area effettiva in cui verranno mostrati su desktop. Per schermi ad alta densità (come i display Retina), genera file di dimensioni doppie rispetto al riquadro di visualizzazione.

Non affidarti a valori numerici fissi reperiti sui forum. Poiché la larghezza delle colonne varia da tema a tema, non esiste una misura universale in pixel. Inoltre, secondo la documentazione Shopify sul filtro Liquid image_url, «un’immagine non può mai essere ridimensionata oltre le sue dimensioni originali.» Caricare file troppo piccoli causerà inevitabili sfocature.

Step 2: Force one shape with aspect-ratio and object-fit

Concept illustration: le stesse immagini del menu con object-fit cover e contain.

Se il tuo negozio contiene già immagini con formati differenti che non puoi riesportare subito, usa i CSS per imporre dimensioni regolari. La moderna proprietà CSS aspect-ratio, documentata su MDN Web Docs, «consente di definire il rapporto desiderato tra larghezza e altezza per la scatola di un elemento.»

Inserisci questa regola nella sezione CSS personalizzato del tuo tema o nel foglio di stile principale:

/* Sostituisci .your-menu-selector img con il selettore esatto del tuo tema */
.your-menu-selector img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

Nota: Sostituisci .your-menu-selector img con la classe specifica impiegata nel tuo tema attivo.

In questo blocco, width: 100% copre l’intera colonna, aspect-ratio: 1 / 1 vincola il riquadro a un quadrato e object-fit: cover riempie lo spazio. Il comportamento di object-fit determina l’adattamento dell’immagine rispetto al contenitore, come spiegato da MDN Web Docs:

Come individuare il selettore corretto nel tuo tema

Poiché le classi CSS cambiano a seconda del tema Shopify, individua la classe specifica della tua testata:

1. Apri il tuo negozio online nel browser desktop.
2. Posiziona il cursore sul menu per aprire il pannello del mega menu.
3. Fai clic destro sull’immagine disallineata e scegli Ispeziona.
4. Nei DevTools, individua l’elemento <img> o il suo contenitore e leggi il nome della classe. Il nome cambia da tema a tema.
5. Nel pannello Shopify, vai su Negozio online > Temi, seleziona Azioni > Duplica come backup e clicca su Personalizza.
6. Incolla il CSS nell’impostazione Custom CSS del tema, se presente, oppure in fondo al foglio di stile principale del tema (ad esempio base.css in Dawn).

Step 3: Stop cropping in the Dawn mega menu

Il tema Dawn di Shopify confonde i merchant perché, nel thread della community qui sotto, le immagini del mega menu sono disegnate come immagini di sfondo CSS invece che con tag <img>. In questo caso la regola object-fit dello Step 2 non le riguarda.

In una discussione della community Shopify sulle dimensioni delle immagini nel mega menu di Dawn, la soluzione suggerita è passare lo sfondo a background-size: contain così da vedere l’immagine intera invece di ritagliarla. È un esempio della community, non una guida ufficiale di Shopify, e il thread non conferma che abbia risolto il problema.

Per provare lo stesso approccio nel mega menu desktop di Dawn, il thread suggerisce di aggiungere questo codice in fondo al file base.css:

/* Adapted from a community thread: verify the panel ID and selector in your own theme */
@media screen and (min-width: 767px) {
  #MegaMenu-Content-2 li:before {
    /* contain shows the whole image; empty bands may appear */
    background-size: contain !important;
    background-position: center;
  }
}

Tieni a mente due fattori tecnici determinanti:

1. Identificativo univoco del negozio: Il selettore #MegaMenu-Content-2 rappresenta l’ID assegnato a una specifica voce di menu. La tua testata potrebbe mostrare un numero differente a seconda dell’ordine delle voci. Ispeziona sempre il negozio per confermare l’ID.
2. Ambito della media query: Questa regola è racchiusa in @media screen and (min-width: 767px), quindi vale solo per gli schermi più larghi e non risolve il menu laterale mobile, trattato nello Step 5.

Questo video illustra la struttura di un mega menu con immagini su Dawn per chiarire il contesto prima del ridimensionamento.

Step 4: Fix blurry menu images

Un’immagine visivamente definita su desktop può apparire sfuocata o poco nitida su schermi ad alta risoluzione o dispositivi mobili. Nei thread di assistenza Shopify dedicati alle immagini sfocate nei mega menu, il problema è riconducibile a due fattori principali:

Causa 1: Le dimensioni del file sorgente sono inferiori al box di visualizzazione

Quando l’immagine sorgente ha meno pixel del suo contenitore, i browser la stirano per riempire lo spazio. Secondo la documentazione Liquid di Shopify sulle immagini, «un’immagine non può mai essere ridimensionata oltre le sue dimensioni originali». Gli schermi dei telefoni ad alta densità rendono il problema più evidente. Come spiega web.dev di Google, «i descrittori di densità servono a fornire immagini diverse in base alla densità di pixel del dispositivo». Come regola pratica, carica sorgenti grandi circa il doppio delle dimensioni di visualizzazione.

[!WARNING] Non usare object-fit: none per correggere la sfocatura. Nel thread della community ha lasciato le immagini del menu alla loro dimensione grezza facendo perdere loro la forma, senza risolvere il problema.

Causa 2: Il menu richiama una risorsa obsoleta memorizzata nella cache

Quando sostituisci un’immagine, il menu può continuare a usare la vecchia. Nello stesso thread la spiegazione era che la nuova immagine era un .png ma veniva ancora usato un vecchio .gif. Fai clic destro sull’immagine, scegli Apri immagine in una nuova scheda e controlla l’URL nella barra degli indirizzi. Se compare un nome di file vecchio, aggiorna l’immagine alla fonte così il menu punta al nuovo file.

Step 5: Check mobile and the menu drawer

Concept illustration: una correzione del mega menu desktop accanto a un menu laterale mobile che richiede una verifica a parte.

Una dimenticanza frequente quando si correggono le immagini di navigazione è testare solo su desktop. Le regole CSS dentro una media query solo desktop non raggiungono i pannelli scorrevoli mobile. Inoltre i temi usano spesso markup e classi del tutto diversi per il menu laterale mobile.

Nel tema Dawn di Shopify, ad esempio, il menu laterale mobile usa .menu-drawer__menu. I selettori possono variare tra le versioni del tema, quindi ispeziona sempre il tuo tema. Se punti solo alle classi desktop, il menu mobile continuerà a mostrare righe irregolari o miniature ritagliate.

Per una resa impeccabile sui telefoni:

• Ispeziona i sottomenu nidificati: Apri il drawer mobile ed espandi i menu di secondo livello per verificare che le immagini non si allarghino a tutto schermo in modo sgradevole.
• Prova larghezze diverse: Usa la modalità dispositivo dei DevTools per provare larghezze strette da telefono, oppure controlla direttamente su un telefono reale.
• Configura menu dedicati: Se il drawer richiede una gerarchia diversa dalla testata, organizza menu separati per desktop e mobile in modo che le modifiche non interferiscano fra loro.

Common mistakes (fixed widths, wrapped labels)

Nel tentativo di rendere omogenee le immagini del menu, si incorre frequentemente in quattro errori strutturali:

1. Fissare larghezze rigide in pixel o percentuali

In un thread della community Shopify sul ridimensionamento delle immagini del menu, una soluzione suggerita fissava una larghezza di 18% su ogni voce di menu, un valore legato al tema di quel negozio. Le larghezze fisse possono rompere l’andata a capo delle colonne quando cambia il numero di voci. Applica width: 100% all’immagine e lascia che sia il contenitore della colonna a distribuire la larghezza.

2. Sottovalutare i testi distribuiti su due righe

Anche se i formati grafici sono quadrati e identici, le righe del menu appariranno disallineate se i testi vanno a capo. Se una voce ha un’etichetta su due righe e quella adiacente su una sola riga, la base delle schede risulterà asimmetrica. Per allineare il layout, puoi modificare lo stile del menu di navigazione armonizzando spaziature e dimensioni dei caratteri.

3. Ricorrere in modo eccessivo a !important

Aggiungere !important alle istruzioni delle immagini può inibire le classi responsive del tema, impedendo al menu mobile di scalare adeguatamente. Per ridefinire le proporzioni generali, conviene regolare le dimensioni dell’intero menu mediante le impostazioni del contenitore invece di forzare i singoli tag immagine.

4. Intervenire sul tema senza creare una copia preventiva

Modificare direttamente base.css su un tema pubblicato comporta rischi. Un piccolo errore di battitura può alterare la grafica di tutto il negozio. Duplica sempre il tema prima di effettuare modifiche CSS per poter ripristinare il sito in qualsiasi momento.

Trade-offs: cover vs contain vs re-uploading

Ciascun approccio per uniformare le dimensioni delle immagini nei menu presenta vantaggi e limiti concreti:

Inoltre, il codice CSS inserito manualmente nei file del tema può perdersi durante gli aggiornamenti di versione. Nella progettazione di un menu ricco di elementi visivi, assicurati di scegliere il tipo di menu più adatto per sostenere la complessità del tuo catalogo.

When to stop hand-writing CSS: setting image ratio in a menu app

Se desideri evitare la manutenzione manuale di regole CSS a ogni cambio di tema, un’applicazione per menu dotata di impostazioni visive sulle proporzioni assicura il medesimo risultato in modo immediato.

In Navi+, l’opzione Image ratio (auto-crop) consente di uniformare le proporzioni delle immagini senza scrivere codice. Puoi selezionare tra quattro modalità:

• Unchanged (Predefinito): Conserva le proporzioni originali con cui è stato caricato ciascun file.
• 1:1 square: Allinea ogni miniatura in un riquadro perfettamente quadrato.
• 3:2 landscape: Produce un’inquadratura rettangolare orizzontale equilibrata.
• 2:3 portrait: Imposta una visualizzazione verticale dall’aspetto editoriale.

Questo controllo è modulabile: puoi stabilire un rapporto globale per l’intero menu, assegnare un valore dedicato ai sottomenu di livello 2 o 3, oppure impostare Unchanged su un singolo elemento per escluderlo dal ritaglio ereditato.

L’applicazione applica in automatico le regole CSS aspect-ratio e object-fit: cover agli elementi selezionati senza richiedere nuovi caricamenti. In fase di caricamento è anche disponibile uno strumento di ritaglio manuale per perfezionare il punto focale.

[!NOTE] Il settaggio automatico delle proporzioni si applica specificamente agli elementi Immagine grande (Big image) e ai Banner immagine (Image banner) nel mega menu desktop, nel mega menu mobile e nel drawer mobile. Le icone di navigazione sono escluse per preservarne la forma. Questa funzione non aumenta la nitidezza di file a bassa risoluzione; le sorgenti devono comunque rispettare i parametri di Step 4.

Se vuoi ricreare un design di menu a partire da un’immagine di riferimento, i controlli di proporzione integrati riducono le toppe manuali al CSS. In Navi+ scegli una volta 1:1 quadrato o 3:2 orizzontale e ogni immagine grande del menu lo segue — provalo prima su una copia del menu.

Action checklist

Segui questo elenco di controllo in sette punti per verificare e sistemare le immagini del tuo menu:

• Individua il motore del menu: Controlla se la navigazione appartiene al tema Shopify o a un’app installata.
• Stabilisci una proporzione comune: Scegli un formato unico (come 1:1 quadrato o 3:2 orizzontale) per la riga.
• Esporta le immagini sorgente: Salva i file con il rapporto prescelto, almeno pari all’area visualizzata a schermo.
• Rileva il selettore CSS: Usa Ispeziona per identificare la classe corretta assegnata alle immagini del menu.
• Applica aspect-ratio e object-fit: Inserisci le regole di proporzione nel CSS personalizzato o nel tema.
• Controlla gli URL dei file: Verifica che il menu stia caricando file aggiornati e non vecchie versioni in cache.
• Testa il drawer mobile: Assicurati che le miniature nel menu mobile siano nitide e disposte in modo ordinato.

FAQ

Perché le immagini del mio mega menu hanno dimensioni diverse?

Le immagini del mega menu appaiono disuguali quando i file caricati presentano proporzioni differenti e il tema gestisce le altezze dei contenitori in automatico. Senza una regola fissa, ogni box si adatta all’altezza naturale della rispettiva immagine.

Perché le immagini nel menu risultano tagliate?

Un’immagine nel menu viene tagliata quando la proporzione del box differisce dalla foto originale e viene applicato object-fit: cover o uno sfondo in modalità cover. La proprietà cover riempie il riquadro tagliando le parti esterne; impostare contain consente di vedere l’immagine intera senza tagli.

Perché le immagini sono nitide su desktop ma sfocate su mobile?

Le immagini appaiono sfocate su mobile quando il riquadro visualizzato a schermo è più grande del file sorgente o quando il tema serve una miniatura obsoleta a bassa risoluzione. La rete CDN di Shopify non ingrandisce mai le immagini oltre la dimensione originale, perciò i file piccoli sgranano sui display moderni.

Che dimensioni devono avere le immagini caricate?

Carica immagini che abbiano almeno le dimensioni in pixel del riquadro in cui vengono mostrate su desktop. Per ottenere la massima nitidezza sui display ad alta densità odierni, esporta i file sorgente con dimensioni doppie rispetto al contenitore.

Posso rendere quadrate tutte le immagini del menu senza modificare il tema?

Sì, se il tuo menu di navigazione è creato con un’app che include un’impostazione per la proporzione delle immagini. Ad esempio, Navi+ ha un’impostazione Image ratio che applica via CSS una proporzione quadrata 1:1 alle immagini grandi e ai banner immagine di un menu, senza modificare il codice del tema né ricaricare le immagini.

Sources

• MDN Web Docs: Documentazione CSS object-fit (Standard tecnico per il riempimento dei riquadri immagine)
• MDN Web Docs: Documentazione CSS aspect-ratio (Specifiche tecniche per il rapporto d’aspetto degli elementi)
• Documentazione per sviluppatori Shopify: Filtro Liquid image_url (Limiti della piattaforma nel ridimensionamento delle immagini)
• Centro assistenza Shopify: Immagini del tema e proporzioni (Linee guida per l’omogeneità visiva della vetrina)
• Google Web Developers: Distribuzione di immagini reattive (Densità di pixel degli schermi e descrittori di risoluzione)
• Community Shopify: Risolvere immagini sfocate nel mega menu (Thread 363359) (Caso reale della community; discussione non ufficiale)
• Community Shopify: Personalizzare dimensioni immagini mega menu Dawn (Thread 255590) (Caso reale della community; discussione non ufficiale)
• Community Shopify: Ridimensionamento e posizionamento immagini mega menu (Thread 182414) (Caso reale della community; discussione non ufficiale)
• Community Shopify: Allineamento e dimensioni immagini nel mega menu (Thread 146397) (Caso reale della community; discussione non ufficiale)