Você acabou de instalar o Dawn (ou Refresh, ou Sense), e seu menu funciona. As categorias aparecem, o ícone de hamburger abre no mobile, e o ícone do carrinho fica no canto superior direito. Você pensa: “Bom o suficiente, vou prosseguir para as fotos dos produtos.”
Esse instinto vai custar conversões. Não porque esses temas sejam ruins—eles são genuinamente bem construídos. Mas “funciona” e “funciona bem para vender” são coisas diferentes. Cada tema padrão faz trade-offs de design específicos, e alguns desses trade-offs prejudicam ativamente novas lojas.
Este guia analisa os três temas Shopify gratuitos mais populares—Dawn, Refresh e Sense—e identifica exatamente quais recursos de menu são bons o suficiente para manter, quais precisam de ajustes menores e quais você deve mudar imediatamente.
- A navegação do Dawn é limpa e rápida, mas não tem suporte a mega menu e tab bar mobile por padrão
- O Refresh (2024) adiciona um header mais moderno, mas ainda usa o padrão de hamburger no mobile
- O Sense prioriza apelo visual e funciona bem para marcas com muitas imagens, mas pode parecer lento em celulares mais antigos
- Os três temas compartilham lacunas comuns: sem tab bar na base, sem ícones de menu, customização mobile limitada
- Você pode corrigir a maioria dos problemas através das configurações do tema—apenas alguns requerem apps ou código customizado
Uma observação rápida sobre a escolha do tema
Se você ainda não escolheu um tema, não complique. Dawn, Refresh e Sense são todos gratuitos, todos mantidos pelo Shopify e todos têm bom desempenho pronto para usar. As diferenças são principalmente visuais—Dawn é minimalista, Refresh é moderno, Sense é editorial.
Para navegação especificamente, nenhum dos três tem uma vantagem clara sobre os outros. As mesmas lacunas e pontos fortes se aplicam aos três. Escolha com base na estética da sua marca e depois customize a navegação.
Dawn: o tema padrão mais popular
Dawn é o tema gratuito emblemático do Shopify, e o que a maioria das novas lojas começa. É intencionalmente minimalista, rápido para carregar e segue as melhores práticas de acessibilidade. Vamos decompor sua navegação.
O que funciona bem
Estrutura de header limpa. O header do Dawn é direto: logo à esquerda, menu horizontal no centro ou alinhado à esquerda, ícones de utilidade (busca, conta, carrinho) à direita. Isso segue o layout de e-commerce padrão que os usuários esperam.
Menu mobile decente. O ícone de hamburger abre uma gaveta deslizante limpa com seus itens de menu. Ele suporta um nível de aninhamento (toque em uma categoria para expandir subcategorias), o que é suficiente para a maioria de lojas pequenas e médias.
Carregamento rápido. A navegação do Dawn é leve. Ela não carrega frameworks JavaScript pesados ou animações personalizadas, então o menu aparece rapidamente até mesmo em conexões lentas. Em testes do PageSpeed Insights, Dawn consistentemente marca 85+ em desempenho mobile.
Opção de header fixo. Em Configurações do Tema → Header, você pode ativar um header fixo que permanece visível enquanto os usuários rolam. Isso mantém seu menu, busca e carrinho acessíveis o tempo todo—uma melhoria significativa de usabilidade que muitos proprietários de lojas esquecem de ativar.
Busca integrada. Dawn inclui um ícone de busca no header que abre uma sobreposição de busca preditiva. Ela mostra resultados conforme você digita, o que ajuda clientes a encontrarem produtos mais rapidamente.
O que precisa de ajustes
Sem mega menu por padrão. Dawn suporta menus suspensos (um nível de subcategorias), mas não verdadeiros mega menus com layouts multi-coluna, imagens de categoria ou banners promocionais. Para lojas com 30+ produtos, um dropdown com 15 subcategorias se torna uma lista longa e rolável que é difícil de navegar.
Solução alternativa: Você pode criar um pseudo-mega-menu organizando sua navegação do Shopify em grupos lógicos (Online Store → Navigation), mas o resultado visual ainda é um dropdown de coluna única. Para um verdadeiro mega menu multi-coluna com imagens, você precisará de um app de navegação.
Ícone de busca vs. barra de busca. No desktop, Dawn mostra apenas um ícone de lupa por padrão. Clicar nele abre a sobreposição de busca, o que é bom—mas pesquisa do Baymard Institute mostra que um campo de busca visível (não apenas um ícone) aumenta o uso de busca em 20-30%.
Solução alternativa: Algumas customizações do Dawn permitem exibir uma barra de busca persistente no header. Verifique as configurações do seu tema ou a documentação do Dawn para opções de “predictive search”. Se sua versão do tema não suportar isso, um app focado em busca pode adicionar.
Limitações da barra de anúncio do header. A barra de anúncio do Dawn suporta texto e um link, mas não múltiplas mensagens rotativas ou contadores regressivos. Para promover limites de frete (“Frete grátis acima de R$ 100”) ou ofertas por tempo limitado, uma mensagem estática única é funcional, mas básica.
O que mudar imediatamente
Ativar header fixo. Vá para Configurações do Tema → Header → marque “Ativar header fixo”. Esse único toggle torna sua navegação acessível o tempo todo, em vez de desaparecer ao rolar. Não há desvantagem.
Ativar busca preditiva. Em Configurações do Tema, certifique-se de que a busca preditiva está ativada. Ela mostra sugestões de produtos conforme os clientes digitam, reduzindo as etapas entre busca e página de produto.
Verificar a profundidade do seu menu. Vá para Online Store → Navigation e revise sua estrutura de menu. Se alguma categoria estiver aninhada mais de dois níveis de profundidade (Categoria → Subcategoria → Sub-subcategoria), simplifique-a. O menu mobile do Dawn lida graciosamente com um nível de aninhamento, mas fica incômodo com dois ou mais níveis.
Refresh: a atualização moderna
Refresh é um dos temas gratuitos mais novos do Shopify, lançado em 2024. Ele pega a abordagem focada em desempenho do Dawn e adiciona mais polimento visual—cantos arredondados, tipografia mais suave e um layout de header ligeiramente diferente.
O que funciona bem
Layout de header atualizado. Refresh oferece múltiplas opções de layout de header: logo à esquerda com menu inline, logo no centro com menu abaixo, ou um layout compacto para telas menores. Essa flexibilidade permite que você combine com o estilo da sua marca sem código customizado.
Gaveta mobile melhorada. A gaveta de menu mobile no Refresh se sente mais polida que a do Dawn. Ela inclui animações mais suaves, tipografia mais clara e melhor espaçamento entre áreas tocáveis. A hierarquia visual entre categorias pai e subcategorias é mais distinta.
Filtros de página de coleção. Embora não seja estritamente navegação, a página de coleção do Refresh inclui funcionalidade de filtro e ordenação integrada que é mais limpa que a padrão do Dawn. Clientes podem filtrar por preço, disponibilidade e tipo de produto—reduzindo o burden no seu menu principal de exibir todas as variações.
Acessibilidade. Como Dawn, Refresh segue as diretrizes WCAG. Itens de menu têm rótulos ARIA apropriados, estados de foco são visíveis para navegação por teclado e proporções de contraste atendem aos padrões de acessibilidade.
O que precisa de ajustes
Limitações de mega menu similares. Refresh herda a mesma restrição do Dawn: menus suspensos suportam subcategorias, mas verdadeiros mega menus com imagens e layouts multi-coluna requerem customização adicional ou um app.
Desempenho de animação em dispositivos antigos. As animações mais suaves do Refresh parecem ótimas em celulares mais novos, mas podem causar lag leve em dispositivos antigos (iPhone SE, celulares Android de orçamento). Se seu público-alvo inclui compradores sensíveis a preço usando hardware mais antigo, teste em um dispositivo de gama baixa.
Solução alternativa: A maioria da lentidão relacionada a animação pode ser mitigada reduzindo o número de itens de menu e desativando efeitos parallax nas configurações do tema.
O que mudar imediatamente
Ativar header fixo. Igual ao Dawn—ative-o em Configurações do Tema → Header. O header fixo do Refresh é ligeiramente mais compacto que o header completo, o que é bom: economiza espaço da tela mantendo a navegação acessível.
Revisar opções de layout de header. Refresh oferece 3-4 variantes de layout de header. Tente cada uma e veja qual dá mais visibilidade às suas categorias. Para lojas com 5+ categorias de nível superior, um layout com o menu abaixo do logo (largura total) geralmente funciona melhor que amontoar tudo em uma linha.
Auditar espaçamento mobile. Apesar do menu mobile do Refresh ter melhor espaçamento padrão que o Dawn, revise-o com toque de polegar real. Se algum item está muito próximo, aumente o padding do menu no CSS customizado do seu tema ou nas configurações da seção.
Sense: o tema editorial
Sense é projetado para marcas que se inclinam para storytelling—pense em produtos artesanais, marcas de beleza ou lojas de lifestyle. Sua navegação reflete esse foco editorial.
O que funciona bem
Peso visual no header. O header do Sense dá mais espaço para seu logo e identidade da marca. A navegação se sente intencional em vez de utilitária, o que combina com marcas onde a estética é um ponto de venda.
Páginas de coleção amigáveis a imagens. O layout de coleção do Sense enfatiza a imagem do produto, e a navegação suporta isso mantendo menus limpos e desagrupados. Para lojas onde as fotos do produto vendem melhor que nomes de categoria, isso é uma vantagem.
Menu mobile elegante. A gaveta mobile do Sense é visualmente refinada—tipografia limpa, espaço em branco generoso, transições suaves. Ela cria uma sensação premium que combina com marcas editoriais ou de luxo.
O que precisa de ajustes
Menos opções de layout de header. Comparado ao Dawn e Refresh, Sense oferece menos opções de customização para layout de header. O posicionamento do logo e a posição do menu estão mais travados, o que pode parecer restritivo se sua estrutura de categoria não encaixa no layout padrão.
Trade-offs de desempenho. Sense carrega um pouco mais de CSS e JavaScript que o Dawn, primariamente para efeitos visuais. Para a maioria das lojas a diferença é negligenciável (50-100ms no mobile), mas se você está empilhando outros apps em cima, cada milissegundo conta.
Solução alternativa: Minimize scripts de terceiros e evite instalar múltiplos apps que adicionem JavaScript ao seu header. Se você está usando Sense, seja especialmente cuidadoso com o peso total da página.
O que mudar imediatamente
Simplifique sua estrutura de menu. O design elegante de menu do Sense funciona melhor com menos categorias bem escolhidas (5-7 itens de nível superior). Se você herdou uma árvore de categoria complexa de um tema anterior, este é um bom momento para consolidar.
Teste em dispositivos Android de gama média. O polimento visual do Sense é projetado para telas modernas, mas uma porção significativa do tráfego global de e-commerce vem de celulares de gama média. Abra sua loja em um Samsung Galaxy A-series ou similar e verifique se o menu abre suavemente.
Ativar busca proeminentemente. O ícone de busca do Sense pode parecer secundário ao design visual. Certifique-se de que ele está posicionado proeminentemente no header—clientes não deveriam ter que procurar por ele.
Lacunas compartilhadas pelos três temas
Independentemente de qual tema você escolha, todos os três compartilham limitações de navegação que afetam proprietários de novas lojas:
Sem tab bar na base
Nenhum dos temas gratuitos do Shopify inclui uma tab bar na base do mobile (navegação no estilo Instagram/Amazon na base da tela). Essa é uma lacuna significativa porque:
- Tab bars mantêm a navegação visível sem exigir um toque para abrir o menu de hamburger
- Elas são amigáveis ao polegar (a base da tela é a zona de alcance mais fácil)
- Elas reduzem as etapas de “navegação” de 2 toques (abrir menu → selecionar categoria) para 1 toque
Adicionar uma tab bar requer um app de navegação ou código customizado de tema.
Sem ícones de menu
Os três temas exibem apenas itens de menu em texto. Sem ícones para Home, Busca, Carrinho ou categorias. Pesquisa mostra que parear ícones com rótulos de texto melhora velocidade de scanning em 20-35% e ajuda clientes a se orientarem mais rápido.
Customização mobile limitada
Você não pode configurar menus mobile e desktop separados nativamente. O que você configura em Online Store → Navigation se aplica a ambos os tamanhos de tela. Mas usuários mobile e desktop têm necessidades diferentes—menus mobile devem ser mais planos e diretos, enquanto menus desktop podem ter mais profundidade.
Sem análise de menu
Nenhum desses temas te diz quais itens de menu recebem mais cliques, quais categorias dirigem mais tráfego, ou quais caminhos de navegação levam a compras. Você precisa de rastreamento de eventos do Google Analytics ou um app de navegação dedicado para obter esses dados.
| Feature | Dawn | Refresh | Sense | Ideal |
|---|---|---|---|---|
| Header fixo | Sim (toggle) | Sim (toggle) | Sim (toggle) | Sim |
| Mega menu | Não | Não | Não | Multi-coluna com imagens |
| Tab bar mobile | Não | Não | Não | 4-5 tabs na base |
| Ícones de menu | Não | Não | Não | Ícones + rótulos de texto |
| Busca preditiva | Sim | Sim | Sim | Sim |
| Menus mobile/desktop separados | Não | Não | Não | Configuração independente |
| Análise de cliques de menu | Não | Não | Não | Rastreamento de cliques integrado |
| Subcategorias dropdown | Sim (1 nível) | Sim (1 nível) | Sim (1 nível) | 2+ níveis |
Quando o padrão é suficiente (e quando não é)
Mantenha os padrões se:
- Você tem menos de 30 produtos
- Sua estrutura de categoria é plana (5-7 categorias, sem subcategorias)
- Seu tráfego é primariamente desktop
- Você está apenas lançando e quer validar product-market fit antes de investir em navegação
Nesse cenário, Dawn, Refresh ou Sense com header fixo ativado e busca preditiva ligada servirão bem. Não gaste dinheiro em apps de navegação até você ter dados de tráfego mostrando onde clientes ficam presos.
Faça upgrade se:
- Você tem 30+ produtos com subcategorias
- Tráfego mobile excede 50% (verifique em Shopify Analytics → Online Store → Sessions by device)
- Sua taxa de rejeição está acima de 60% e você suspeita de confusão de navegação
- Você quer um mega menu com imagens de categoria, ícones ou banners promocionais
- Você precisa de uma tab bar mobile para navegação amigável ao polegar
Para esses cenários, um app de navegação como Navi+ Menu Builder pode preencher a lacuna entre o que seu tema oferece e o que seus clientes precisam. Ele se sobrepõe ao seu tema existente sem substituir, adicionando mega menus, tab bars, ícones e configurações separadas de mobile/desktop.
Atualizações de temaShopify regularmente atualiza seus temas gratuitos. Algumas lacunas mencionadas aqui podem ser resolvidas em versões futuras. Após uma atualização de tema, re-teste sua navegação para ver se novos recursos foram adicionados—e para garantir que customizações existentes não foram sobrescrevidas.
Seus próximos passos
- Identifique seu tema. Vá para Online Store → Themes para confirmar qual tema você está executando.
- Ativar header fixo. Todo tema suporta isso. Ative agora.
- Ativar busca preditiva. Igual—um toggle, melhoria imediata.
- Revisar a tabela de comparação acima. Identifique quais lacunas importam mais para o tamanho e padrão de tráfego da sua loja.
- Decida: ajustar ou fazer upgrade. Se os padrões cobrem suas necessidades, foque em conteúdo e marketing. Se você precisa de mega menus, tab bars ou layouts específicos do mobile, avalie um app de navegação.
Os temas Shopify padrão oferecem um ponto de partida sólido para navegação, e para muitas novas lojas, esse ponto de partida é genuinamente bom o suficiente. A chave é saber quais recursos ativar imediatamente (header fixo, busca preditiva) e quais limitações importarão conforme sua loja cresce (sem mega menu, sem tab bar, sem menus separados para mobile). Comece com o que você tem, rastreie onde clientes ficam presos, e faça upgrade deliberadamente quando os dados disserem a você.
This article is part of the larger guide on Noções básicas de navegação para sua primeira loja online: os 5 essenciais.