Como alterar o z-index de uma barra de abas no Shopify (sem cobrir o carrinho ou pop-ups)

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

Para alterar o z-index de uma barra de abas, inspecione a barra e o elemento conflitante, compare seus valores de z-index e defina um valor menor ou maior no CSS personalizado do tema ou no app. O valor mais alto é exibido à frente.

Posicione a barra de abas abaixo de carrinhos laterais e pop-ups para que os clientes concluam a compra com facilidade, mas acima do conteúdo comum da página. Após ajustar o número, teste sempre em um smartphone real.

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

Uma barra de abas móvel na parte inferior utiliza posicionamento fixo (fixed) para que os links principais permaneçam ao alcance do polegar enquanto a loja é percorrida. Como ela se mantém ancorada enquanto produtos e textos passam por baixo, precisa ocupar uma camada visual elevada em relação ao fluxo padrão da página.

Os conflitos acontecem porque lojas virtuais modernas exibem várias camadas flutuantes ao mesmo tempo: carrinhos laterais (cart drawers), modais de busca, pop-ups de e-mail, widgets de chat e barras de aviso. Cada tema e cada desenvolvedor de app atribui seus próprios números inteiros aos seus componentes, então não existe um único número que funcione em todas as lojas.

Essa falta de padronização causa dois problemas visuais frequentes em smartphones:

• A barra de abas cobre o carrinho lateral: A barra fica desenhada sobre o rodapé do carrinho, ocultando o botão de finalizar compra ou o subtotal porque seu valor de camada é maior que o do carrinho.
• A barra de abas desaparece atrás de uma seção: A barra desliza para trás de um banner, vídeo ou carrossel porque essa seção possui um valor superior ou seu próprio contexto de empilhamento.

Compreender a mobile tab bar architecture permite planejar uma navegação inferior em harmonia com as outras camadas flutuantes, em vez de competir aleatoriamente com números altos.

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

No CSS, a propriedade z-index orienta como os elementos se empilham ao longo do eixo z virtual apontado em direção ao usuário. De acordo com o MDN Understanding z-index, ela é expressa como um número inteiro e controla a ordem de renderização, permitindo posicionar elementos na frente ou atrás de outros no mesmo contexto de empilhamento.

A condição fundamental é: no mesmo contexto de empilhamento.

Como sintetizado pelo Google web.dev, “Um contexto de empilhamento é um grupo de elementos com um pai comum que se movem juntos ao longo do eixo z.” Pense nos contextos de empilhamento como caixas de papelão. Se dois cartões estão na mesma caixa, aquele com o número maior fica na frente. Mas se o Cartão A está na Caixa 1, e a Caixa 1 fica embaixo da Caixa 2, o Cartão A jamais aparecerá na frente da Caixa 2, não importa quão alto seja seu número.

Ilustração conceitual: Um elemento filho não pode escapar do contexto de empilhamento do seu contêiner pai; se o pai estiver mais baixo, o filho continuará atrás dos outros overlays.

Quando dois elementos não são irmãos diretos no DOM, a dinâmica é mais complexa porque cada um pode pertencer a um contexto isolado. O navegador cria um novo contexto de empilhamento sempre que um elemento apresenta:

• position: fixed ou position: sticky
• opacity menor que 1
• transform, filter ou perspective com valor diferente de none

Como barras inferiores e cabeçalhos fixos compartilham essas propriedades, interações semelhantes ocorrem entre sticky header and footer menus. Se o contêiner de um tema ou app cria um contexto isolado, aumentar o z-index da barra filha não terá efeito sobre os elementos externos.

Find what’s overlapping with browser DevTools

Antes de editar o código, inspecione os elementos conflitantes para verificar seus estilos computados e seus contêineres pais.

Ilustração conceitual: Inspeção do contêiner externo da barra de abas no Chrome DevTools para verificar as propriedades position e z-index na aba Styles.

Desktop Chrome

1. Clique com o botão direito na barra de abas da sua loja e selecione Inspecionar (Inspect).
2. Na árvore DOM do painel Elements, localize o contêiner externo da barra (como .mobile-tab-bar ou a tag do app).
3. Consulte a aba Styles à direita. Como orienta a documentação do Google Chrome DevTools docs, a aba Styles lista as regras CSS aplicadas ao elemento selecionado. Encontre position e z-index.
4. Abra o elemento conflitante (como o carrinho lateral ou a busca), clique com o botão direito, selecione Inspecionar e anote seu z-index e position.
5. Percorra os nós pais de ambos os elementos para checar se algum contém transform, filter ou opacity < 1 criando um contexto isolado.

Checking the mobile view

Clique no ícone Alternar barra de dispositivos para simular uma tela de celular. Embora a emulação reproduza perfeitamente as media queries e o DOM, o toque físico pode ter comportamentos distintos. Use o DevTools para identificar os números e valide o resultado final em um celular de verdade.

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

Corrigir sobreposições não exige chutar números extremos como 999999. Elementos com números de camada maiores sobrepõem os de números menores no mesmo contexto, e esse valor pode ser qualquer número inteiro: positivo, negativo ou zero.

Organize sua vitrine de acordo com uma hierarquia visual clara:

Não existe um número padrão universal para todos os temas Shopify. Ao analisar how drawer menus are layered, a regra de ouro é relativa: o valor da barra de abas deve ser menor que o do carrinho. Apenas números de exemplo: se o valor do carrinho for 100, qualquer valor abaixo de 100 na barra mantém o carrinho na frente. Caso não consiga identificar o valor do carrinho, a documentação de vários apps recomenda iniciar com 50 e reduzir se o conflito persistir.

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

Assim que identificar o valor ideal, aplique-o por meio do CSS personalizado do seu tema ou nas configurações do seu aplicativo de navegação.

Theme settings Custom CSS

No painel do Shopify, vá para Loja virtual > Edit theme > Configurações do tema > CSS personalizado.

Segundo a central de ajuda do Shopify Help Center, as regras inseridas aqui afetam todo o tema, com certas restrições:

• Limite de caracteres: O CSS personalizado para todo o tema é limitado a 1500 caracteres.
• Escopo de seção: O CSS adicionado a uma seção individual se restringe a ela e tem limite de 500 caracteres. Para uma barra global, use Configurações do tema.
• Atualizações de tema: Ao atualizar o tema, nomes de classes podem mudar, fazendo com que seletores CSS personalizados deixem de funcionar.

/* 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 a sua barra de abas vem de um app, verifique primeiro o campo de z-index nas configurações dele; as páginas de ajuda dos desenvolvedores de apps costumam indicar isso, e o valor é salvo junto com o menu, e não no CSS do tema. Para entender por que vários apps podem entrar em conflito em uma loja, veja how app embeds can conflict with your theme.

Why your z-index change does nothing

Se você altera o valor de uma camada mas o layout não responde, a falha geralmente está ligada a uma destas cinco causas técnicas:

Mobile-only fixes with a media query

Como as barras de abas inferiores são projetadas para celulares, limite suas regras CSS para telas mobile para não interferir na versão de computador.

Envolva o código em uma media query correspondente ao ponto de interrupção do seu 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;
  }
}

Mantenha as regras concisas para não ultrapassar o limite de 1500 caracteres do Shopify em Configurações do tema. Teste também as orientações retrato e paisagem para confirmar que a rotação do smartphone não desconfigure a barra.

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

Adotar números excessivamente altos é um atalho perigoso que gera desvantagens técnicas reais:

• Cobrir a finalização de compra: Se a barra fica sobre o carrinho lateral, pode esconder o subtotal e o botão de checkout, dificultando a conclusão da compra.
• Bloquear avisos de consentimento: Uma barra sobreposta a banners de cookies GDPR ou modais de verificação de idade impede que o cliente aceite os termos para acessar a loja.
• Estimular disputas entre apps: Inserir números arbitrários como 2147483647 cria uma disputa sem fim entre apps de terceiros e ainda pode falhar se um contexto de empilhamento pai prender o elemento. Quando o erro vem de outro app, diminuir essa camada ou contatar o suporte costuma ser o caminho correto.
• Insegurança em atualizações de tema: O CSS personalizado pode deixar de funcionar quando você atualiza o tema, se os nomes das classes mudarem. Uma configuração salva no app da barra de abas não faz parte do CSS do tema.

Where Navi+ fits

Se sua barra de abas foi criada com o Navi+, você não precisa editar arquivos do tema nem escrever CSS manual para ordenar as camadas.

Dentro do editor de menus do Navi+:

1. Abra o menu desejado no painel do Navi+.
2. Acesse a aba Advanced nas configurações do menu.
3. Localize o card Z-index (“Z-INDEX: Set the menu layer order”).
4. Verifique o valor atual no campo Z-index e digite o número inteiro desejado (aceita valores de 0 a 2147483647).
5. Clique em Save.

Sua configuração de camada é salva na configuração do menu, e não no código do seu tema.

Ao explorar opções de mobile navigation beyond the hamburger menu, harmonizar a barra inferior com os carrinhos laterais garante uma jornada de compra sem atritos.

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

Verifique estes 10 itens de validação antes de disponibilizar as alterações para seus compradores:

• Abrir o carrinho lateral: Adicione um produto, abra o carrinho e confira se os itens e o botão de checkout estão totalmente clicáveis.
• Testar a busca: Abra a gaveta ou modal de busca e certifique-se de que o campo e as sugestões apareçam acima da barra.
• Acionar pop-ups e avisos: Dispare modais de newsletter, banners de cookies e verificação de idade para checar a sobreposição.
• Examinar o chat ao vivo: Abra o widget de suporte; garanta que seu botão flutuante não cubra os links da barra de abas.
• Abrir o menu lateral do tema: Clique no menu hambúrguer do tema e verifique se ele desliza sem falhas visuais atrás da barra.
• Rolar por mídias complexas: Navegue por banners de vídeo e carrosséis para confirmar a visibilidade constante da barra.
• Testar no iOS Safari: Abra a loja em um iPhone real pelo Safari, conferindo a área da barra inferior de gestos.
• Testar no Android Chrome: Carregue o site em um celular Android real para validar a precisão dos toques nos botões.
• Rotacionar a tela: Alterne o aparelho entre modo retrato e paisagem para confirmar a responsividade das media queries.
• Limpar cache e testar em aba anônima: Faça o teste em janela privada para assegurar que o navegador carregue as folhas de estilo recentes.

FAQ

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

Inspecione ambos os elementos no DevTools para comparar os valores e atribua um número menor ou maior no CSS do tema ou nas opções do app.

Why is my tab bar showing over the cart drawer?

A barra tem um z-index maior que o do carrinho no mesmo contexto de empilhamento; reduza o valor da barra para que o carrinho fique em primeiro plano.

Why does my z-index change have no effect?

O elemento pode estar com posição estática padrão ou situado dentro de um contêiner pai que estabelece um contexto de empilhamento isolado.

Which z-index value should I use?

Não há um número padrão universal; selecione um valor que coloque a barra sobre o conteúdo da página mas sob o carrinho, ou comece testando com 50.

Where do I put the CSS in Shopify?

Insira o CSS global no painel do Shopify em Loja virtual > Edit theme > Configurações do tema > CSS personalizado (limite de 1500 caracteres).

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?