Come modificare lo z-index di una barra di schede su Shopify (senza coprire il carrello o i popup)

Quick answer: how to change the z-index of a tab bar

Per modificare lo z-index di una barra di schede, ispeziona la barra e l’elemento in conflitto, confronta i loro valori z-index e imposta un valore inferiore o superiore nel CSS personalizzato del tema o nelle impostazioni dell’app. Il valore più alto viene visualizzato in primo piano.

Posiziona la barra al di sotto di carrelli laterali e popup affinché gli acquirenti possano completare il checkout, ma al di sopra dei contenuti standard della pagina. Al termine, verifica sempre il risultato su uno smartphone reale.

Why your tab bar covers (or hides behind) other elements

Una barra di schede inferiore per smartphone sfrutta il posizionamento fisso (fixed) per mantenere i collegamenti principali a portata di pollice durante lo scorrimento del negozio. Poiché rimane ancorata mentre prodotti e descrizioni scorrono sotto di essa, deve risiedere su un livello di visualizzazione superiore rispetto al flusso standard della pagina.

I conflitti insorgono perché i negozi moderni utilizzano simultaneamente più livelli fluttuanti: carrelli laterali (cart drawer), modali di ricerca, popup promozionali, widget di chat e barre di annunci. Ogni tema e ogni sviluppatore di app assegna i propri numeri interi ai propri elementi, quindi non esiste un singolo numero valido per tutti i negozi.

Questa mancanza di coordinamento produce due difetti visivi frequenti sui telefoni:

• La barra di schede copre il carrello laterale: La barra si sovrappone alla parte inferiore del carrello, nascondendo il pulsante di checkout o il subtotale perché il suo livello è più alto di quello del carrello.
• La barra di schede scompare dietro una sezione: La barra scivola sotto un banner pubblicitario, un video o un carosello poiché quella sezione possiede un valore superiore o un contesto di impilamento autonomo.

Comprendere la mobile tab bar architecture evidenzia come la navigazione inferiore debba integrarsi armoniosamente con gli altri livelli fluttuanti invece di gareggiare con valori casuali.

How z-index and stacking contexts work, in plain terms

In CSS, la proprietà z-index controlla l’impilamento degli elementi lungo l’asse z virtuale rivolto verso l’osservatore. Secondo MDN Understanding z-index, viene espressa come numero intero e determina l’ordine di rendering, consentendo di posizionare elementi davanti o dietro ad altri nello stesso contesto di impilamento.

La condizione imprescindibile è: nello stesso contesto di impilamento.

Come sintetizzato da Google web.dev, “Un contesto di impilamento è un gruppo di elementi con un genitore comune che si muovono insieme lungo l’asse z.” Pensa ai contesti di impilamento come a scatole di cartone. Se due cartellini si trovano nella stessa scatola, quello con il numero più alto sta davanti. Ma se il Cartellino A è nella Scatola 1, e la Scatola 1 si trova sotto la Scatola 2, il Cartellino A non potrà mai apparire davanti alla Scatola 2, per quanto alto sia il suo numero.

Illustrazione concettuale: Un elemento figlio non può oltrepassare il contesto di impilamento del proprio genitore; se il contenitore genitore è posto più in basso, il figlio rimarrà dietro agli altri overlay.

Quando due elementi non sono fratelli diretti nel DOM, il comportamento diventa più intricato poiché ciascuno può appartenere a un contesto isolato. Il browser genera un nuovo contesto di impilamento quando un elemento presenta:

• position: fixed o position: sticky
• opacity inferiore a 1
• transform, filter o perspective impostati su un valore diverso da none

Poiché barre inferiori e intestazioni fisse condividono queste proprietà, dinamiche simili avvengono tra sticky header and footer menus. Se il contenitore di un’app o di un tema crea un contesto isolato, aumentare il valore della barra figlia non avrà alcun effetto sugli elementi esterni.

Find what’s overlapping with browser DevTools

Prima di modificare il codice sorgente, ispeziona gli elementi in conflitto per analizzare i loro stili calcolati e i rispettivi contenitori genitore.

Illustrazione concettuale: Ispezione del contenitore esterno della barra di schede in DevTools per verificare i valori position e z-index nella scheda Styles.

Desktop Chrome

1. Fai clic con il tasto destro sulla barra di schede nel tuo negozio e seleziona Ispeziona (Inspect).
2. Nell’albero DOM del pannello Elements, individua il contenitore esterno della barra (come .mobile-tab-bar o il selettore dell’app).
3. Consulta la scheda Styles a destra. Come descritto nella documentazione Google Chrome DevTools docs, la scheda Styles elenca le regole CSS applicate all’elemento selezionato. Cerca position e z-index.
4. Apri l’elemento in conflitto (come il carrello laterale o la barra di ricerca), fai clic destro, seleziona Ispeziona e annota z-index e position.
5. Risali l’albero dei genitori per entrambi gli elementi per verificare se presentano transform, filter o opacity < 1 che creano contesti isolati.

Checking the mobile view

Fai clic sull’icona Attiva/Disattiva barra degli strumenti del dispositivo per simulare uno schermo mobile. Sebbene l’emulatore riproduca fedelmente media query e albero DOM, la risposta tattile su hardware reale può differire. Utilizza DevTools per identificare i numeri, quindi esegui la verifica finale su un vero smartphone.

Pick the right layer order for tab bar, cart drawer, popups and chat

Correggere le sovrapposizioni non richiede di inventare valori spropositati come 999999. Gli elementi con valori interi più alti sovrastano quelli con valori inferiori nello stesso contesto, e il valore può essere qualsiasi numero intero: positivo, negativo o zero.

Organizza la tua vetrina secondo una gerarchia visiva metodica:

Non esiste un numero universale comune a tutti i temi Shopify. Nell’analizzare how drawer menus are layered, la regola d’oro è relativa: il livello della barra di schede deve essere inferiore a quello del carrello. Solo numeri di esempio: se il valore del carrello è 100, qualsiasi valore inferiore a 100 per la barra mantiene il carrello davanti. Se non riesci a risalire al valore del carrello, le guide di varie app suggeriscono di partire da 50 e scendere gradualmente se l’interferenza persiste.

Where to change the value: theme custom CSS vs. app settings

Una volta determinato il valore necessario, applicalo tramite il CSS personalizzato del tema oppure nelle impostazioni dell’app di navigazione.

Theme settings Custom CSS

Nel pannello di Shopify, naviga su Negozio online > Edit theme > Impostazioni tema > CSS personalizzato.

In base alla guida Shopify Help Center, le regole inserite qui influenzano l’intero tema, con alcuni vincoli precisi:

• Limite di caratteri: Il CSS personalizzato per l’intero tema è limitato a 1500 caratteri.
• Portata di sezione: Il CSS aggiunto a una singola sezione agisce solo in quella sezione ed è limitato a 500 caratteri. Per una barra globale, utilizza Impostazioni tema.
• Aggiornamenti del tema: Con l’aggiornamento del tema, le classi possono variare, disattivando i selettori CSS personalizzati definiti manualmente.

/* Example: Adjusting mobile tab bar z-index in Shopify Theme settings > Custom CSS */
/* Replace .custom-tab-bar-wrapper with your actual tab bar container selector */
@media (max-width: 749px) {
  .custom-tab-bar-wrapper {
    /* Example value: ensure this integer sits below your cart drawer */
    z-index: 40;
  }
}

Inside your tab bar app

Se la barra di schede proviene da un’app, controlla prima il campo z-index integrato nelle sue opzioni; le pagine di aiuto degli sviluppatori di app di solito rimandano lì, e il valore viene salvato insieme al menu invece che nel CSS del tema. Per capire perché più app possono entrare in conflitto in un negozio, consulta how app embeds can conflict with your theme.

Why your z-index change does nothing

Se modifichi il valore di un livello ma l’interfaccia non risponde, il problema risiede quasi sempre in una di queste cinque cause tecniche:

Mobile-only fixes with a media query

Dato che le barre di schede inferiori nascono per i telefoni, circoscrivi le regole CSS agli schermi mobile per non influenzare la navigazione da computer.

Racchiudi il codice in una media query corrispondente al breakpoint del tuo tema:

/* Example: Scope tab bar layer order to mobile viewports */
/* 749px is only an example breakpoint; use your own theme's breakpoint */
@media screen and (max-width: 749px) {
  .theme-mobile-tab-bar-container {
    /* Example value: positioned above page content, below cart drawer */
    z-index: 45;
  }
}

Mantieni le regole sintetiche per rientrare nel limite di 1500 caratteri di Shopify in Impostazioni tema. Controlla inoltre la visualizzazione in modalità verticale e orizzontale per verificare che la rotazione dello smartphone non comprometta l’impaginazione.

Trade-offs: when a high z-index is the wrong fix

Aumentare arbitrariamente i valori a cifre spropositate è una scorciatoia insidiosa che comporta controindicazioni concrete:

• Coprire la procedura di pagamento: Posizionare la barra sopra il carrello laterale può nascondere il subtotale e il pulsante di checkout, rendendo difficile completare l’acquisto.
• Bloccare avvisi legali obbligatori: Una barra sovrapposta a banner per i cookie GDPR o modali di verifica dell’età impedisce ai visitatori di fornire il consenso per accedere al negozio.
• Innescare una corsa al rialzo tra app: Assegnare numeri arbitrari come 2147483647 alimenta una corsa senza fine tra app di terze parti e può comunque non bastare se un contesto di stacking genitore intrappola l’elemento. Quando il conflitto deriva da un’altra app, abbassare quell’elemento o contattare l’assistenza è spesso la strada corretta.
• Instabilità con gli aggiornamenti del tema: Le regole del CSS personalizzato possono smettere di funzionare quando aggiorni il tema se i nomi delle classi cambiano. Un’impostazione salvata nella tua app per la barra di schede non fa parte del CSS del tema.

Where Navi+ fits

Se la tua barra di schede è gestita con Navi+, non hai bisogno di modificare i file del tema né di scrivere CSS manuale per ordinare i livelli.

All’interno dell’editor di menu di Navi+:

1. Apri il menu desiderato dal pannello di controllo Navi+.
2. Seleziona la scheda Advanced nelle impostazioni del menu.
3. Trova la sezione Z-index (“Z-INDEX: Set the menu layer order”).
4. Verifica il valore attuale nel campo Z-index e inserisci il numero intero desiderato (accetta valori da 0 a 2147483647).
5. Clicca su Save.

L’impostazione del livello viene salvata nella configurazione del menu, non nel codice del tema.

Nell’esplorare percorsi di mobile navigation beyond the hamburger menu, armonizzare la barra inferiore con i carrelli laterali assicura un percorso d’acquisto fluido e privo di intoppi.

If your tab bar comes from Navi+, you don’t need to touch theme code: open the menu, go to Advanced, set the Z-index below your cart drawer, and save. If you’re unsure which value fits your theme, our support team can look at it with you.

Test checklist before you call it fixed

Completa questa lista di controllo in 10 punti prima di considerare definitive le modifiche per i tuoi acquirenti:

• Aprire il carrello laterale: Aggiungi un prodotto, apri il carrello e conferma che articoli e pulsante di checkout siano perfettamente cliccabili.
• Attivare la ricerca: Apri il cassetto di ricerca o la modale e verifica che campo di testo e suggerimenti compaiano sopra la barra.
• Verificare popup e informative: Fai comparire modali newsletter, banner cookie e finestre di consenso per accertarti che restino in primo piano.
• Esaminare la chat dal vivo: Apri il widget di supporto; controlla che la sua icona non si sovrapponga ai pulsanti della barra di navigazione.
• Aprire il menu laterale del tema: Tocca il menu hamburger del tema e verifica che scivoli senza interruzioni visive dietro la barra.
• Scorrere sezioni con contenuti complessi: Naviga attraverso caroselli e video di sfondo per accertarti che la barra rimanga sempre visibile e salda.
• Eseguire il test su iOS Safari: Accedi al negozio da un iPhone reale con Safari, osservando con cura l’area inferiore dei gesti di navigazione.
• Eseguire il test su Android Chrome: Apri il sito su uno smartphone Android reale per verificare la reattività dei punti di tocco.
• Ruotare lo schermo: Alterna la visualizzazione tra orientamento verticale e orizzontale per confermare l’adattamento delle media query.
• Svuotare la cache e provare in incognito: Effettua una verifica in finestra privata per assicurarti che il browser carichi i fogli di stile più recenti.

FAQ

How do I change the z-index of a tab bar?

Ispeziona i due elementi con DevTools per confrontarne i valori, quindi assegna alla barra un numero inferiore o superiore nel CSS del tema o nelle opzioni dell’app.

Why is my tab bar showing over the cart drawer?

La barra ha uno z-index superiore a quello del carrello nello stesso contesto di impilamento; abbassa il suo valore affinché il carrello compaia in primo piano.

Why does my z-index change have no effect?

L’elemento potrebbe trovarsi in posizione statica di default o risiedere all’interno di un contenitore genitore che genera un contesto di impilamento isolato.

Which z-index value should I use?

Non esiste un numero standard valido ovunque; scegli un valore che collochi la barra sopra i contenuti di pagina ma sotto il carrello, oppure parti da 50 per eseguire delle prove.

Where do I put the CSS in Shopify?

Inserisci il CSS globale nel pannello di Shopify sotto Negozio online > Edit theme > Impostazioni tema > CSS personalizzato (limite di 1500 caratteri).

Sources

• MDN Web Docs: Understanding CSS z-index
• MDN Web Docs: The Stacking Context
• MDN Web Docs: z-index Property Reference
• Google web.dev: CSS z-index and Stacking Contexts
• Google Chrome DevTools: View and Change CSS
• Shopify Help Center: Adding Custom CSS to Your Theme
• Hextom Help Center: My Bar Is Covering Another Element – How to Fix It
• Conversion Bear Support: Sticky Bar Is Covering the Side Cart
• Ninja Commerce Support: Resolving Sticky Bar Overlap and Push Down Issues
• MakeProSimp Support: How Does Z-index Affect the Popup and Cart Drawer?