Como Personalizar o Layout do Menu do Cabeçalho na Shopify (Configurações de Tema, Menus Suspensos e Mega Menus)

Quick Answer: How to Customize the Header Menu Layout in Shopify

Open Online Store > Themes > Customize and select the Header section. There you can change the logo position, pick which menu appears, and (in themes like Dawn) choose a menu type: Dropdown, Mega menu, or Drawer. Build the menu itself in Content > Menus.

Para personalizar o layout do menu do cabeçalho passo a passo:

1. Abra as configurações do tema: No painel de administração da Shopify, vá para Loja virtual > Temas > Personalizar e selecione a seção Cabeçalho (Header) na barra lateral esquerda.
2. Defina a posição do logo e o layout: Ajuste a opção Logo position para escolher se o logotipo fica à esquerda na mesma linha ou centralizado acima do menu. (Nota: os nomes das configurações variam conforme o tema; no Dawn chama-se Logo position).
3. Conecte e aninhe seu menu: Acesse Conteúdo > Menus para estruturar seus links com até 2 níveis aninhados, e atribua essa lista em Cabeçalho > Menu.
4. Escolha o tipo de menu e confira a versão mobile: Em Menu type, selecione Dropdown, Mega menu ou Drawer, e confira a exibição no celular por meio de Mobile logo position.

What “Header Menu Layout” Means in Shopify

Quando lojistas decidem personalizar o layout do menu do cabeçalho, raramente estão ajustando uma única configuração isolada. Na arquitetura da Shopify, o layout do cabeçalho resulta da integração de quatro camadas fundamentais:

1. Identidade da marca e alinhamento (Logo position): Controla onde o logotipo da loja aparece em relação aos links de navegação, campo de busca e carrinho.
2. Lista de navegação atribuída (Qual menu é exibido): O menu específico estruturado no painel administrativo e vinculado à seção de cabeçalho.
3. Hierarquia estrutural e tipo de menu (Profundidade & apresentação): Como as subcategorias se abrem no computador – listas verticais estreitas, amplos painéis de várias colunas ou gavetas ocultas.
4. Regras de exibição mobile (Layout mobile & comportamento da gaveta): A forma como a barra se adapta a telas touch, incluindo o posicionamento de ícones e o painel deslizante.

De acordo com a documentação oficial da Shopify, você pode alterar o menu principal padrão da maioria dos temas editando as configurações na seção Cabeçalho do tema. No entanto, os links, rótulos e relações hierárquicas entre itens são gerenciados em Conteúdo > Menus. Nessa área, o item de nível superior suporta até dois níveis de menus suspensos aninhados (totalizando no máximo três níveis de profundidade).

Como cada tema lida com esses parâmetros de forma distinta, este guia utiliza como modelo o tema Dawn da Shopify. No Dawn, esses controles são configurações modulares de schema, mas os nomes e opções disponíveis variam em outros temas. Para explorar conceitos arquiteturais de telas de laptops e pontos de quebra flex, consulte nosso estudo sobre modelos de layout de cabeçalho e breakpoints.

Step 1: Change the Logo and Menu Position in the Theme Editor

A primeira camada visível do cabeçalho é o alinhamento entre o logotipo da sua marca e os links de navegação. Veja como ajustar isso na Shopify:

1. Faça login no painel de administração da Shopify.
2. Acesse Loja virtual > Temas.
3. No tema publicado ou em uma cópia de rascunho, clique em Personalizar.
4. Na barra lateral esquerda, clique na seção Cabeçalho (Header).

No tema Dawn, você encontrará o campo Logo position, que oferece quatro opções principais:

• Middle left: Coloca o logotipo à esquerda, na mesma linha horizontal que os links do menu principal. Essa disposição compacta economiza espaço vertical.
• Top left: Posiciona o logotipo no canto superior esquerdo e move os links de navegação para uma linha dedicada logo abaixo.
• Top center: Centraliza o logotipo no topo e alinha o menu de navegação centralizado logo abaixo. Se você deseja o logo centralizado com o menu embaixo, essa é a opção nativa ideal.
• Middle center: Centraliza o logotipo, com o menu à esquerda e os ícones do cabeçalho à direita.

Lembre-se de que essas opções possuem esses nomes no Dawn; as nomenclaturas e escolhas de layout variam em outros temas. Alguns temas de terceiros separam o alinhamento do logo e do menu em campos distintos ou usam grades fixas. Se o seu tema não dispõe do formato desejado, consulte as orientações na seção sobre o que fazer quando o tema esgota suas opções.

Step 2: Choose the Header Menu and Build Nested Links

Mudar a posição não terá utilidade se o cabeçalho estiver conectado à lista de links errada ou se as subcategorias não abrirem. Na Shopify, os menus são criados na administração geral e depois vinculados ao editor do tema.

Passos para construir e conectar seu menu:

1. No painel da Shopify, acesse Conteúdo > Menus (conforme explicado na Central de Ajuda da Shopify).
2. Clique em Menu principal (ou em Criar menu).
3. Adicione suas categorias mestras como itens de primeiro nível.
4. Para criar submenus, arraste os itens secundários para a direita abaixo do item pai até notar um recuo visual.
5. Clique em Salvar menu.

Conforme as especificações de navegação da Shopify, o item de primeiro nível pode ter até dois níveis de menus suspensos aninhados (três níveis no total). Todos os temas da Shopify são programados para exibir esses itens aninhados como menus suspensos originados do menu principal.

Após salvar a estrutura, retorne para Loja virtual > Temas > Personalizar, clique em Cabeçalho, localize o cartão Menu, clique em Alterar, selecione a lista recém-estruturada e clique em Salvar. Para ver um guia detalhado sobre como organizar categorias em vários níveis sem erros de arrasto, leia nosso artigo sobre como adicionar um submenu ao seu menu de navegação.

Step 3: Pick Dropdown, Mega Menu, or Drawer

Com os links conectados ao cabeçalho, é hora de definir como as subcategorias se abrirão em computadores desktop. No Dawn, nas configurações da seção Cabeçalho, localize o campo Menu type, que oferece 3 modelos (os rótulos variam conforme o tema):

Figura 1: Ilustração conceitual (Concept illustration) — Step 3: Pick Dropdown, Mega Menu, or Drawer

Segundo pesquisas do Nielsen Norman Group, os mega menus constituem “uma excelente escolha de design para acomodar um grande número de opções”. O NN/g enfatiza que os mega menus mostram tudo de relance, permitindo que os usuários descubram os produtos visualmente em vez de depender da memória.

Por outro lado, escolher Drawer no Dawn (controlado pela condição section.settings.menu_type_desktop == 'drawer' no header.liquid do Dawn) esconde os links horizontais atrás de um botão de menu no computador. Fica limpo, mas com um compromisso real: a pesquisa do NN/g de 2016 constatou que a descoberta cai quase pela metade ao esconder a navegação principal de um site. Se a sua loja tem um catálogo amplo, reserve a gaveta para o celular e use um menu aberto no computador. Para projetar colunas de links, títulos e blocos visuais equilibrados, consulte nosso guia sobre melhores práticas para mega menus.

Show Menu Links Directly in the Header Instead of a Dropdown

Uma dúvida comum, inclusive em um tópico da Shopify Community sobre o tema Sense, é como exibir os links de primeiro nível diretamente no cabeçalho, sem menu suspenso.

Na Shopify, os menus suspensos não são ligados ou desligados por um botão do tema; eles dependem exclusivamente da hierarquia de links. Como explica a Central de Ajuda da Shopify, todos os temas exibem itens aninhados como menus suspensos. Se um item possui links secundários com recuo em Conteúdo > Menus, o tema cria automaticamente uma caixa suspensa.

Para exibir todos os links diretamente na barra do cabeçalho:

1. Abra o painel da Shopify e vá para Conteúdo > Menus.
2. Selecione o menu ativo do cabeçalho.
3. Analise a lista. Se houver itens com recuo debaixo de outro, arraste-os para a esquerda até que fiquem alinhados com o primeiro nível.
4. Certifique-se de que todos os itens estejam no nível raiz.
5. Clique em Salvar menu.

Ao visualizar sua loja, o tema apresentará esses links alinhados lado a lado na barra horizontal sem ativar qualquer caixa suspensa.

Tenha em mente os limites de largura. O NN/g recomenda que, se um site tem 4 ou menos links de navegação de primeiro nível, eles sejam exibidos como links visíveis. Com muitos links de primeiro nível, a linha pode quebrar em duas ou apertar o logotipo em notebooks mais estreitos, então visualize várias larguras. Se o seu catálogo precisa de muitos destinos, agrupe-os sob títulos pai, por exemplo com um mega menu, em vez de sobrecarregar a barra principal.

Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

Um layout de menu de cabeçalho que parece equilibrado em um monitor de computador pode quebrar facilmente em um celular. Como o espaço no mobile é limitado, os temas tratam a navegação mobile com layouts responsivos próprios.

Figura 2: Ilustração conceitual (Concept illustration) — Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

Nas configurações de Cabeçalho do Dawn, os lojistas contam com o ajuste Mobile logo position:

• Center: Centraliza o logotipo na barra de cabeçalho mobile.
• Left: Alinha o logotipo à esquerda na barra de cabeçalho mobile.

Os rótulos variam conforme o tema. Por exemplo, em temas de terceiros como o Stiletto, o menu mobile usa configurações da seção Header. Em muitos temas, os links de navegação mobile ficam recolhidos em uma gaveta lateral aberta ao tocar no ícone de hambúrguer.

No entanto, depender totalmente de uma gaveta de hambúrguer oculta tem um custo. A pesquisa do Nielsen Norman Group de 2016 constatou que a descoberta cai quase pela metade ao esconder a navegação principal de um site.

As gavetas ocultas continuam úteis para catálogos grandes, mas você também pode manter algumas páginas-chave visíveis com uma barra de abas fixa na base (por exemplo Home, Shop, Search e Cart), ao alcance do polegar, deixando as categorias mais profundas para a gaveta. Para configurar estruturas de links independentes por tela, consulte nosso tutorial sobre criar menus separados para desktop e mobile.

When Your Theme Runs Out of Options: Code Edits vs a Menu App

Em algum momento, todo lojista atinge o limite do personalizador de temas: precisar de cinco colunas em vez de quatro no mega menu, um menu dividido em ambos os lados de um logotipo central ou banners promocionais na gaveta móvel. Ao chegar a essa barreira, surgem dois caminhos: editar arquivos Liquid do tema ou usar um aplicativo de menu dedicado.

Before you edit code: duplicate the theme

Se decidir alterar diretamente o código do tema (como sections/header.liquid ou folhas de estilo CSS), nunca edite o tema ativo publicado. A documentação oficial da Shopify recomenda criar uma cópia de backup para poder descartar as alterações e recomeçar caso ocorra algum erro.

Como duplicar seu tema com segurança:

1. No painel da Shopify, vá para Loja virtual > Temas.
2. Localize o tema atual, abra o menu de ações dele e selecione Duplicate.
3. Renomeie a cópia deixando claro que se trata de uma versão de teste para código.
4. Faça e valide todas as alterações exclusivamente nessa cópia antes de publicá-la.

The hidden cost of custom theme edits

Alterar o código diretamente gera manutenção contínua. A documentação da Shopify alerta que, ao atualizar um tema, suas alterações de código podem ser removidas na cópia atualizada. Se você reescrever o header.liquid para mudar alinhamento, media queries de CSS ou animações da gaveta, planeje verificar e reaplicar essas edições após cada atualização do tema.

Se as suas necessidades de layout vão além das configurações nativas, você pode considerar um tema feito para navegação mais complexa ou um aplicativo que funcione junto com o seu tema.

Common Header Menu Problems and Fixes

Ao configurar o cabeçalho, pequenos erros de ajuste podem fazer com que links desapareçam. Utilize esta tabela de diagnóstico para solucionar os problemas mais recorrentes:

Trade-offs: When Not to Change Your Header Layout

Mudar o layout do cabeçalho nem sempre é a decisão mais prudente. Antes de reestruturar menus ou aplicar mega menus, pondere as seguintes consequências práticas:

• Catálogos pequenos não precisam de mega menu: se a sua loja tem apenas poucas categorias simples, um painel largo de mega menu pode deixar mais espaço do que o necessário. Um menu suspenso de uma coluna ou uma linha simples de links costuma bastar.
• Gaveta no computador reduz a visibilidade da navegação: escolher Drawer no computador deixa o visual limpo, mas a pesquisa do NN/g de 2016 constatou que esconder a navegação principal reduz quase pela metade a descoberta. Reserve para lojas em que a descoberta depende de storytelling na página.
• Edições Liquid personalizadas geram trabalho a cada atualização: segundo a documentação da Shopify, alterações no header.liquid ou em CSS personalizado podem ser perdidas ao atualizar o tema. Se ninguém puder manter as edições entre versões, prefira as configurações padrão do tema ou um aplicativo.
• Adicionar aplicativos gera mais manutenção administrativa: Cada aplicativo instalado traz um painel extra de gerenciamento. Só adote uma ferramenta externa se o tema realmente não conseguir acomodar sua linha de produtos.

Where Navi+ Fits

Quando as opções de cabeçalho do seu tema chegam ao limite, o Navi+ é uma forma de adicionar recursos de navegação junto ao tema.

Você cria o menu no aplicativo Navi+ e o ativa como app embed no editor de temas. O menu é desenhado no navegador ao lado do cabeçalho do seu tema, então você não precisa editar o header.liquid:

• Desktop Mega Menu: exibe um menu suspenso completo com colunas, imagens e links em destaque.
• Mobile Menu: um menu mobile deslizante que mostra toda a sua navegação sem sair da página.
• Tab Bar: uma barra de abas fixa na base para mobile que mantém alguns destinos principais ao alcance do polegar.

Os menus do Navi+ também vão até três níveis. Para decidir qual tipo de menu combina com o seu catálogo, consulte nosso guia: como escolher o tipo de menu ideal na Shopify.

If your theme’s Header section stops at a basic dropdown, Navi+ lets you add a Desktop Mega Menu, a Mobile Menu, or a bottom Tab Bar alongside your theme — try it on a duplicate theme first and keep what works.

Action Checklist

Utilize esta lista de verificação de 8 etapas operacionais para planejar, configurar e auditar o layout do menu do seu cabeçalho:

• Duplicar o tema: Crie uma cópia de segurança em Loja virtual > Temas antes de alterar parâmetros de layout importantes.
• Configurar o alinhamento do logo: Em Personalizar > Cabeçalho, defina a Logo position desejada (ex.: Top center ou Middle left no Dawn; os nomes das opções variam conforme o tema).
• Estruturar a hierarquia de links: Em Conteúdo > Menus, organize a navegação arrastando os itens para criar recuos limpos (no máximo 2 níveis aninhados sob o item pai).
• Vincular o menu ao cabeçalho: Confirme em Cabeçalho > Menu se a seção está apontando para a lista de links pretendida.
• Definir o tipo de menu para desktop: Selecione Dropdown, Mega menu ou Drawer de acordo com a extensão do seu catálogo.
• Checar o alinhamento no celular: Visualize o layout no smartphone e configure a Mobile logo position (Center ou Left).
• Testar a ergonomia de toque: Experimente a gaveta móvel em um celular real e avalie se uma barra de abas inferior facilitará o acesso a páginas estratégicas.
• Verificar breakpoints em diferentes telas: Teste no computador, laptop e tablet para assegurar que os links não quebrem linhas desordenadamente nem cubram o logo.

FAQ

How many levels can a Shopify header menu have?

O item de nível superior de um menu da Shopify suporta até dois níveis de menus suspensos aninhados abaixo dele, compondo uma estrutura hierárquica máxima de três níveis.

How do I make a dropdown in the Shopify header?

No painel da Shopify, acesse Conteúdo > Menus, abra seu menu, arraste os itens secundários para a direita abaixo do item principal até criar o recuo e salve as alterações.

How do I put the logo in the center with the menu below?

No tema Dawn, acesse a edição da seção Cabeçalho e em Logo position escolha Top center. Essa opção centraliza o logotipo e dispõe o menu horizontal logo abaixo. (Os nomes variam em outros temas).

Can I show menu links in the header instead of a dropdown?

Sim. Os temas da Shopify exibem automaticamente como menu suspenso qualquer item que contenha sublinks. Para que os links fiquem retos na barra horizontal, coloque todos os itens no nível raiz em Conteúdo > Menus.

Can I change the menu layout only on mobile?

Sim. O Dawn conta com a configuração Mobile logo position (Center ou Left) na seção Cabeçalho. Os links de celular geralmente compartilham a lista do desktop dentro de uma gaveta lateral, mas alguns temas oferecem controles específicos de mobile no Cabeçalho.

Should I edit header.liquid?

Edite o header.liquid somente depois de criar uma cópia de backup do tema. Lembre-se de que suas alterações de código podem ser removidas ao atualizar para uma versão mais nova do tema.

Sources

• Shopify Help Center: Drop-down menus — Documentação oficial sobre limites de aninhamento, vinculação de cabeçalho e gerenciamento em Conteúdo > Menus.
• Shopify Help Center: Duplicating themes — Diretrizes oficiais recomendando o backup de temas antes de modificações em arquivos de código.
• Shopify Help Center: Editing theme code — Advertência sobre a exclusão de códigos customizados durante atualizações de versão de temas.
• Shopify Dawn GitHub Repository: en.default.schema.json — Schema oficial com as opções nativas Logo position, Menu type e Mobile logo position.
• Shopify Dawn GitHub Repository: sections/header.liquid — Arquivo de código fonte que implementa modelos de menu desktop e condicionais de gaveta lateral.
• Nielsen Norman Group: Mega Menus Work Well Anywhere Navigation Needs to Go — Estudo de usabilidade sobre o valor dos mega menus para acomodar amplas seleções de categorias.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt Metrics (2016) — Pesquisa que demonstra que esconder a navegação principal reduz a facilidade de descoberta quase pela metade.
• Fluorescent Theme Documentation: Stiletto Header — Documentação técnica exemplificando o gerenciamento de cabeçalho em temas comerciais.
• Shopify Community: How to change header-menu layout Sense theme — Discussão com comerciantes sobre como dispor links diretamente na barra horizontal sem caixas suspensas.