Como tornar o menu de cabeçalho e rodapé fixo na Shopify (sem editar código)

Resposta rápida: como tornar o menu de cabeçalho e rodapé fixo

Para tornar o cabeçalho fixo, abra Configurações do tema > Cabeçalho e selecione uma opção de Sticky header (o Dawn oferece Nenhum, Ao rolar para cima, Sempre e Sempre, reduzir tamanho do logo). Como a maioria dos temas não inclui menu de rodapé fixo, adicione uma barra de abas inferior via CSS ou app, e teste em um celular real.

Siga esta sequência de três etapas para fixar a navegação em ambas as extremidades da tela:

1. Ativar o ajuste do cabeçalho: No painel de administração da Shopify, acesse Loja virtual > Temas > Personalizar. Abra a seção Cabeçalho (ou Configurações do tema > Cabeçalho), selecione o comportamento desejado para o Sticky header e salve.
2. Adicionar uma barra de abas inferior para mobile: Como os temas padrão consideram o rodapé um bloco estático de final de página e não uma barra de navegação, inclua um menu inferior fixo via CSS ou app de navegação.
3. Validar em aparelhos físicos: Abra sua loja em um smartphone real para confirmar que nem o cabeçalho nem a barra inferior tapam títulos, botões de ação ou áreas seguras de gestos do sistema.

Sticky header vs menu de rodapé fixo: o que cada um faz

Um sticky header (cabeçalho fixo) permanece ancorado no limite superior da janela do navegador enquanto o comprador navega pela página. Ele assegura que os recursos vitais da loja—como logotipo, links de coleções, barra de busca direta e ícone do carrinho—fiquem sempre acessíveis sem obrigar o visitante a rolar até o topo de uma página longa.

Por outro lado, um menu de rodapé fixo não tem relação com o rodapé tradicional do site que exibe direitos autorais, políticas e bandeiras de pagamento. No web design moderno, esse termo se refere a uma barra de navegação inferior móvel (bottom tab bar) fixada na base da tela do celular, agrupando algumas ações primárias (Início, Buscar, Gaveta de menu, Favoritos e Carrinho) ao alcance natural do polegar.

Diferença entre sticky e fixed no CSS

No CSS, position: sticky mantém o elemento no fluxo natural do documento até que a janela atinja um ponto de rolagem estabelecido. De acordo com o MDN Web Docs sobre position em CSS, um elemento com position: sticky precisa de ao menos um limite direcional (top, bottom, left ou right) para funcionar. Como preserva seu espaço físico antes de fixar, evita quebras abruptas na página.

Em contrapartida, position: fixed remove completamente o elemento do fluxo normal do documento. Conforme explica o MDN Web Docs, nenhum espaço é reservado para ele na maquete, fazendo com que os blocos posteriores subam e fiquem ocultos atrás do elemento fixo. Além disso, ambas as propriedades geram um novo contexto de empilhamento (stacking context), afetando o comportamento das camadas e valores de z-index.

Método 1: Ativar o cabeçalho fixo nas configurações do tema

Se sua loja utiliza o tema oficial Dawn da Shopify ou qualquer tema moderno Online Store 2.0, você não precisa editar código. O recurso já está disponível diretamente no editor visual de temas.

1. No painel de administração da Shopify, acerte em Loja virtual > Temas.
2. Localize o tema desejado e clique em Personalizar.
3. Na barra lateral esquerda, clique na seção Cabeçalho (ou abra Configurações do tema > Cabeçalho conforme a versão).
4. Navegue até o menu suspenso Sticky header, escolha a opção desejada e clique em Salvar.

As quatro opções de Sticky header no Dawn

No tema padrão Dawn da Shopify, as configurações de cabeçalho oferecem quatro opções de comportamento fixo definidas no código:

Conforme documentado no repositório oficial do Dawn no GitHub, o Dawn adota on-scroll-up como valor padrão para sticky_header_type e constrói o bloco através de position: sticky.

Pesquisas de usabilidade do Nielsen Norman Group sobre cabeçalhos fixos sustentam essa lógica: cabeçalhos parcialmente persistentes partem do princípio de que rolar para cima indica intenção de navegar ou consultar o carrinho. Ao ocultar a barra durante a leitura descendente, a loja preserva o campo visual sem dificultar o acesso aos menus.

Outros temas Online Store 2.0

Outros temas Online Store 2.0 podem oferecer uma configuração semelhante, mas o nome e as opções podem diferir dos do Dawn. Verifique sempre os controles nativos do cabeçalho antes de recorrer a códigos personalizados; se não houver essa configuração, siga para o método de CSS mais abaixo. Se você constrói no Dawn, veja nossa análise detalhada sobre o Navi+ no tema Dawn.

Prefere acompanhar em vídeo? Esta demonstração exibe o ajuste exato dentro do editor de temas:

Método 2: Tornar o cabeçalho fixo com CSS personalizado

Se o seu tema for personalizado ou não contar com a opção nativa para fixar o cabeçalho, você pode obter esse efeito via CSS sem precisar mexer no arquivo theme.liquid.

Duplique seu tema antes de começar

Antes de ajustar códigos visuais, crie sempre uma cópia de segurança da sua loja ativa. Como orienta a Central de Ajuda da Shopify sobre duplicação de temas: “Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes.”

Para duplicar, vá até Loja virtual > Temas, clique nos três pontos (...) ao lado do tema publicado e selecione Duplicar. Execute e teste suas alterações nessa versão antes de publicá-la.

Onde colar o código CSS

A Shopify inclui uma área dedicada a CSS personalizado dentro do próprio editor visual. Vá em Loja virtual > Temas > Personalizar, clique no ícone de engrenagem (Configurações do tema) à esquerda e abra a aba CSS personalizado.

De acordo com as diretrizes da Shopify para adicionar CSS personalizado, as regras inseridas nessa caixa global aplicam-se a toda a loja e respeitam um limite de 1.500 caracteres. Se você adicionar CSS em uma seção isolada, a Shopify restringirá o alcance somente àquela seção, o que pode impedir a fixação global do cabeçalho.

/* Exemplo — adapte os seletores ao seu tema e teste em um tema duplicado */
.section-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

Essa regra aplica position: sticky ao contêiner do cabeçalho. Conforme define o MDN Web Docs, um elemento sticky exige um limite direcional—aqui top: 0 define que ele deve fixar assim que sua borda superior encostar no topo do navegador. A declaração z-index: 3 assegura que ele flutue acima dos blocos e imagens da página.

Cuidado com tutoriais antigos de fóruns. Publicações antigas da Comunidade Shopify—como as voltadas ao tema Debut (Shopify Community)—usam scripts manuais de jQuery e JavaScript. O próprio tópico informa que é um tutorial avançado sem suporte da Shopify; portanto, não copie seus scripts para um tema atual. Este guia usa apenas configurações do tema e CSS.

Solução de problemas comuns com o cabeçalho fixo

Figura 1: Ilustração de conceito — Resolução de conteúdos cobertos e conflitos de camadas com scroll-padding-top.

Fixar barras de navegação interfere na geometria da página, no renderizador da janela e no empilhamento de camadas. Quando surgem anormalidades, quase sempre decorrem de quatro fatores conhecidos em CSS.

Conteúdo oculto sob o cabeçalho

A queixa mais comum após aplicar cabeçalho fixo é que banners de destaque ou títulos de coleções ficam parcialmente ocultos sob a barra logo ao carregar a página (discussão na Comunidade Shopify).

Essa falha ocorre quando se usa position: fixed em vez de position: sticky. Como fixed suprime o elemento do fluxo da página (MDN Web Docs), os blocos subsequentes sobem para ocupar o topo. Mudar para position: sticky corrige isso na maioria das vezes, pois preserva o espaço inicial até que o usuário role a tela.

Se seu tema precisa obrigatoriamente de posicionamento fixed, ou se links âncora internos (como #avaliacoes ou #especificacoes) pulam para trás do cabeçalho, declare scroll-padding-top no elemento HTML raiz. Conforme o MDN Web Docs, essa regra desconta a área coberta durante a rolagem:

/* Exemplo — adapte os seletores ao seu tema e teste em um tema duplicado */
html {
  scroll-padding-top: 80px; /* valor de exemplo: substitua pela altura medida do seu próprio cabeçalho */
}

Meça sempre a altura exata em pixels do cabeçalho da sua própria loja através das ferramentas de desenvolvedor do navegador; não copie valores empíricos de fóruns, pois as proporções variam entre marcas.

O cabeçalho deixa de fixar (falha de overflow)

Um cenário muito comum é um cabeçalho sticky que para de funcionar de repente após a loja instalar um aplicativo de carrossel de fotos ou um banner promocional.

A mecânica técnica está detalhada no MDN Web Docs: um elemento sticky ancora-se ao elemento ancestral mais próximo que possua um mecanismo de rolagem. Se qualquer elemento pai (html, body ou contêiner externo) contiver overflow: hidden, overflow: auto ou scroll, o cabeçalho ficará preso a ele e não à janela do navegador. Caso esse ancestral não role, o cabeçalho não se moverá. Inspecione e remova declarações de overflow inadequadas.

O cabeçalho escorrega por baixo de outros elementos (z-index)

Ao rolar a tela por vídeos ou módulos de avaliações, o cabeçalho pode sumir atrás desses itens. Do mesmo modo, menus suspensos ou o carrinho lateral podem acabar cortados pela área do cabeçalho.

Como position: sticky e position: fixed estabelecem novos contextos de empilhamento (MDN Web Docs), os itens internos são calculados em relação à camada do cabeçalho. Atribua um z-index adequado ao cabeçalho, garantindo que janelas modais e o carrinho deslizante mantenham um valor superior ao do cabeçalho.

Desativar a fixação exclusivamente em celulares

Em telas de smartphones com altura limitada, um cabeçalho perene consome espaço vital de leitura. Você pode restringir o comportamento fixo apenas a telas de computadores por meio de uma media query padrão:

/* Exemplo — adapte os seletores e o ponto de quebra (aqui 750px) ao seu tema e teste em um tema duplicado */
@media (min-width: 750px) {
  .section-header {
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

O campo de CSS personalizado da Shopify aceita consultas @media normalmente (Central de Ajuda Shopify). No Dawn, você também pode optar por definir o ajuste como Nenhum ou Ao rolar para cima. Evite usar scripts em JavaScript para alterar classes do cabeçalho após o carregamento, pois provocam saltos bruscos no layout prejudiciais aos Core Web Vitals. Segundo o Google web.dev sobre CLS, sites devem buscar uma pontuação de CLS de 0,1 ou inferior.

O quadro comparativo a seguir resume os problemas mais frequentes e suas correções técnicas:

Por que a maioria dos temas da Shopify não possui menu de rodapé fixo

Embora os cabeçalhos fixos sejam comuns, a outra metade da busca—um menu de rodapé fixo—revela uma lacuna importante na arquitetura padrão dos temas.

Nos temas da Shopify, o ‘rodapé’ é projetado como um bloco de encerramento estático no final do documento. Costuma concentrar diversas colunas: informações institucionais, links de suporte, termos legais e certificados de pagamento. Fixar um rodapé convencional completo na base de um celular cobriria quase toda a tela, impedindo que o cliente veja os produtos.

O que lojistas e clientes realmente buscam sob o nome de ‘menu de rodapé fixo’ é uma barra de abas inferior para mobile (bottom tab bar)—uma faixa compacta de navegação fixada na base da tela. A maioria dos temas não oferece isso de forma nativa. Para implementá-la, resta escolher entre desenvolvimento em CSS e seções Liquid, ou um app especializado.

Construir uma barra inferior fixa com CSS personalizado

Caso decida criar via CSS personalizado, a estrutura inicial apoia-se em um contêiner fixo ancorado na borda inferior:

/* Exemplo — adapte os seletores ao seu tema e teste em um tema duplicado */
.my-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  z-index: 10;
}

body {
  padding-bottom: 60px;
}

Visto que position: fixed extrai a barra do fluxo da página (MDN Web Docs), incluir um padding-bottom correspondente no elemento body é indispensável. Sem essa margem, a barra encobrirá para sempre os links do rodapé real e os botões de chat. Lembre-se também de que precisará programar o HTML/Liquid dos links e ícones e atualizá-lo a cada nova versão do tema.

Considerar a Safe Area no iPhone

Smartphones modernos sem botão de início físico (como os modelos de iPhone recentes) exibem uma barra horizontal para gestos na extremidade inferior da tela. Se uma barra fixa for instalada sem margem de segurança de hardware, os botões colidirão com os gestos do sistema.

Conforme documentado no MDN Web Docs sobre env() no CSS, as margens seguras podem ser compensadas por meio de variáveis de ambiente universais:

/* Exemplo — adapte os seletores ao seu tema e teste em um tema duplicado */
.my-bottom-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

O uso de env(safe-area-inset-bottom) garante que os ícones fiquem confortavelmente posicionados acima dos gestos do sistema operacional. Para aprofundar na ergonomia mobile e na zona do polegar, confira nosso guia técnico sobre design de navegação inferior e tab bar na Shopify.

Uso conjunto de cabeçalho fixo e barra inferior no celular

Figura 2: Ilustração de conceito — Harmonização de duas barras persistentes no celular para evitar interferências no checkout.

Adotar simultaneamente um cabeçalho fixo no topo e uma barra inferior na base introduz um desafio de ergonomia: a disputa pela altura da tela.

Em monitores de computador, geralmente há bastante altura disponível para um cabeçalho. Em smartphones, no entanto, a área de exibição é restrita. Relatórios do Nielsen Norman Group ressaltam que poupar espaço de tela é prioridade máxima em dispositivos móveis devido às dimensões reduzidas.

Se ambas as barras ficarem visíveis o tempo todo com alturas expressivas, restará apenas uma pequena fresta para a visualização dos produtos. Para assegurar uma navegação confortável, siga estes princípios:

1. Mantenha o cabeçalho compacto: Escolha no Dawn a opção Ao rolar para cima, que afasta o cabeçalho durante a leitura para baixo, ou Sempre, reduzir tamanho do logo para manter um cabeçalho fixo menor.
2. Evite obstruir o botão de compra: Em páginas de produto, alguns temas trazem seu próprio botão fixo de ‘Adicionar ao carrinho’ embaixo. Se a sua barra de abas for posicionada em bottom: 0, poderá tapar totalmente esse botão. Verifique sempre suas páginas de produto em aparelhos reais.
3. Preservar a visibilidade do foco do teclado (WCAG 2.4.11): O padrão de acessibilidade W3C WCAG 2.4.11 (Focus Not Obscured - Minimum) determina que elementos sob foco de teclado não fiquem totalmente escondidos por conteúdos fixos da página. Configurar tanto scroll-padding-top quanto scroll-padding-bottom (MDN Web Docs) garante que campos ativos fiquem na área visível.
4. Garantir áreas de toque seguras (WCAG 2.5.8): Pelo critério W3C WCAG 2.5.8 (Target Size - Minimum), alvos de toque em telas móveis devem medir ao menos 24 por 24 pixels CSS para evitar toques incorretos.

Para entender mais alternativas de interface para telas pequenas, veja nossas publicações sobre navegação móvel além do menu hambúrguer e o guia de acessibilidade para navegação.

Compromissos: quando não vale a pena fixar os menus

Barras persistentes são poderosas, mas não são a resposta perfeita para qualquer layout. Como pontuou Page Laubheimer no relatório do Nielsen Norman Group: “Sticky headers can be a positive addition to a site, but only if they truly serve a purpose for your users.”

Avalie esses pontos antes de implementar barras fixas:

• Lojas de produto único e páginas concisas: Se a sua loja vende poucos itens com páginas promocionais curtas, os clientes não precisam alternar entre categorias o tempo todo. Barras fixas só consumirão espaço sem utilidade prática.
• Lojas com múltiplos elementos fixos: Se seu tema já possui botão fixo de compra, aviso de frete ou botão flutuante de chat, adicionar outra barra inferior criará uma poluição visual evidente.
• Custo de manutenção em atualizações: Cada linha de CSS personalizado exige manutenção contínua. Como salienta o guia de CSS da Shopify, atualizações futuras do tema podem alterar nomes de classes e exigir novos ajustes manuais.

Para descobrir o formato ideal de navegação para a escala da sua loja, consulte nosso conteúdo sobre como escolher o tipo de menu certo para sua loja.

Onde o Navi+ se encaixa: barra de abas inferior sem código

Vale ressaltar com transparência total: o Navi+ não cria nem manipula cabeçalhos fixos. As opções nativas do tema (Método 1) ou o CSS personalizado global (Método 2) continuam sendo a rota recomendada para o topo da página.

A atuação do Navi+ concentra-se em resolver a outra metade da equação: o menu de rodapé fixo ausente na grande maioria dos temas. Em vez de programar seções Liquid e calcular recuos seguros manualmente em CSS, o Navi+ entrega uma Tab Bar: uma barra de menu fixada na parte inferior da tela, que você monta a partir de modelos dentro do app.

O que a Tab Bar faz:

• Disponibilidade contínua em toda a loja: A Tab Bar do Navi+ permanece visível em todas as páginas da loja (Documentação Navi+), e a estrutura do menu suporta até 3 níveis.
• Ativação direta sem mexer em código: A integração ocorre via App embeds da Shopify. Segundo as instruções de publicação do Navi+, basta montar o menu no app, acessar Loja virtual > Temas > Personalizar > App embeds, ativar o Store Connector e clicar em Salvar.
• Regras de exibição: Os menus podem ser exibidos ou ocultados por dispositivo (celular ou computador), por tipo de página (como início, produto ou coleção) ou por palavras-chave na URL (Documentação Navi+). Por exemplo, você pode exibir a Tab Bar apenas no celular.

Como em qualquer alteração visual, recomendamos realizar a configuração inicial em uma cópia duplicada do seu tema (Guia de duplicação da Shopify).

If you’d rather not maintain custom CSS for the bottom bar, Navi+ Tab Bar gives you a sticky bottom menu you can set up from templates and limit to mobile — try it on a duplicate theme first. Para ver as instruções oficiais de ativação, confira como publicar a Tab Bar na Shopify.

Checklist de ações

• Duplicar o tema: Gerar uma cópia de segurança em Loja virtual > Temas antes de mudar configurações ou adicionar códigos CSS.
• Definir o modo do cabeçalho fixo: Escolher a alternativa mais conveniente nos ajustes do tema (‘Ao rolar para cima’ ou ‘Sempre’).
• Conferir fluidez de rolagem: Rolar para cima e para baixo em páginas de catálogo e de produto para checar a suavidade da animação.
• Revisar saltos de links âncora: Testar âncoras internas (#avaliacoes, #detalhes) para assegurar que títulos não fiquem tapados; aplicar scroll-padding-top se preciso.
• Avaliar sobreposição de camadas: Abrir menus suspensos, mega menus e a gaveta do carrinho para checar se abrem à frente do cabeçalho.
• Implantar a barra de navegação inferior: Adicionar a barra de abas mobile via CSS ou app, checando env(safe-area-inset-bottom) e o padding do body.
• Auditar a página de produto: Confirmar no celular que a barra inferior não encobre o botão Adicionar ao carrinho ou botões de checkout acelerado.
• Testar acessibilidade e aparelhos reais: Percorrer com a tecla Tab para checar o foco do teclado e fazer testes em celulares iPhone e Android reais.

FAQ

Como faço para tornar o cabeçalho e o rodapé fixos na Shopify?

Para o cabeçalho, use as configurações nativas de Sticky header do seu tema, como ‘Ao rolar para cima’ no Dawn. Para o rodapé, como temas não trazem menu fixo embaixo, adicione uma barra de abas móvel via CSS ou um app de menu.

Por que o conteúdo da minha página fica oculto atrás do cabeçalho fixo?

Geralmente ocorre por conta de position: fixed, que extrai o cabeçalho do fluxo da página sem reservar espaço no layout. Mudar para position: sticky ou incluir scroll-padding-top na tag HTML resolve a sobreposição.

Por que meu sticky header parou de funcionar de repente?

O cabeçalho fixo perde a ancoragem se algum elemento ancestral contiver overflow: hidden, scroll ou auto. No CSS, elementos sticky vinculam-se ao contêiner de rolagem mais próximo e não à janela.

Posso manter o cabeçalho fixo no computador mas desativar no celular?

Sim. Se utilizar CSS personalizado, coloque as instruções dentro de uma media query min-width que corresponda ao ponto de quebra do seu tema. Se utilizar um app como o Navi+ para a barra inferior, defina a regra de exibição por dispositivo para que apareça apenas no celular.

Uma barra inferior fixa vai cobrir a barra de gestos do iPhone?

Pode cobrir se as áreas seguras não forem respeitadas. A inclusão de env(safe-area-inset-bottom) no padding da barra garante que os botões se posicionem perfeitamente acima da barra de gestos.

Um sticky header prejudica a experiência do usuário (UX)?

Estudos do Nielsen Norman Group comprovam que cabeçalhos fixos agregam valor quando facilitam funções essenciais. No entanto, no celular, devem ser compactos ou sumir ao descer para não poluir a visualização.

Fontes

1. Esquema de idioma padrão do tema Dawn (Shopify): locales/en.default.schema.json
2. Código-fonte da seção Header do tema Dawn (Shopify): sections/header.liquid
3. MDN Web Docs — Propriedade CSS position: developer.mozilla.org/en-US/docs/Web/CSS/position
4. MDN Web Docs — Propriedade CSS scroll-padding-top: developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
5. MDN Web Docs — Função CSS env(): developer.mozilla.org/en-US/docs/Web/CSS/env
6. W3C Web Accessibility Initiative — Critério WCAG 2.4.11 Focus Not Obscured (Minimum): w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html
7. W3C Web Accessibility Initiative — Critério WCAG 2.5.8 Target Size (Minimum): w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
8. Nielsen Norman Group — Análise sobre Sticky Headers (Page Laubheimer): nngroup.com/articles/sticky-headers/
9. Google web.dev — Otimização de Cumulative Layout Shift (CLS): web.dev/articles/cls
10. Central de Ajuda Shopify — Adicionar CSS personalizado ao tema: help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
11. Central de Ajuda Shopify — Duplicação de temas: help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes
12. Comunidade Shopify — Debate sobre Sticky/Fixed Header Menu: community.shopify.com/t/sticky-fixed-header-menu/308093
13. Comunidade Shopify — Guia Sticky/Fixed Header para Debut: community.shopify.com/t/sticky-fixed-header-and-navigation-for-debut-theme/3640
14. Central de Ajuda Navi+ — Publicar a Tab Bar na Shopify: help.naviplus.io/docs/usage/tabbar-bottom-navigation/publishing-on-shopify/
15. Central de Ajuda Navi+ — Uso e segmentação da Tab Bar: help.naviplus.io/docs/usage/tabbar-bottom-navigation/how-to-use/