Como implementar o design de um menu a partir de uma imagem na Shopify (Mega menu, Drawer, Barra de abas)
Você encontrou a captura de tela de um menu que gostaria muito de ver na sua loja Shopify. Pode ser a navegação de uma grande marca que admira, um mockup do Figma enviado pelo seu designer ou uma inspiração do Pinterest. O visual traz colunas organizadas, fotos de coleções, banners promocionais e selos bem definidos. Porém, ao abrir o painel da Shopify, surge uma barreira imediata: não há botão para carregar um layout pronto nem campos de imagem dentro dos itens de menu convencionais.
Uma imagem de menu é uma especificação, não uma figura: divida-a em estrutura, blocos de conteúdo, estilo e comportamento, depois construa cada parte com a ferramenta certa e desenhe a versão móvel de propósito. Ao desmembrar a imagem em módulos práticos, fica bem mais fácil recriar esse menu na Shopify.
Quick answer: how to turn a menu image into a working Shopify menu
Trate a imagem como uma especificação técnica, não como uma figura pronta. Anote o tipo de menu, os níveis e as colunas, os blocos de conteúdo (links, imagens, banners, produtos), o estilo visual e o comportamento no celular; em seguida, construa cada parte com as opções de cabeçalho do tema, um aplicativo de menu ou código personalizado, desenhando a versão móvel separadamente.
Para recriar qualquer design de menu na Shopify, siga estes cinco passos:
- Step 1: Break the image into a menu design spec: Registre níveis, colunas, blocos de imagens, cores da marca e interações de hover ou clique.
- Step 2: Choose the build route: theme settings, a menu app, or custom code: Pese o esforço de montagem, a liberdade de design e o risco de manutenção nas atualizações do tema.
- Step 3: Map each part of the image to a building block: Conecte as áreas visuais a listas de links, cartões de coleção, banners ou ícones.
- Step 4: Translate the desktop design for mobile: Converta grades largas de desktop em uma gaveta lateral (drawer), uma barra de abas inferior ou uma linha de ícones.
- Step 5: Match colors, fonts, and spacing to your brand: Adote a tipografia e paleta da sua própria loja e verifique o contraste acessível em vez de copiar ativos alheios.
Os menus da Shopify guardam links; o acabamento visual vem do seu tema, de um app ou de código. Como as grades de computador não encolhem perfeitamente nas telas de toque, a navegação móvel precisa de um planejamento dedicado.
Why a Shopify menu rarely matches a design image out of the box
Quando os lojistas tentam recriar um design a partir de uma imagem, o primeiro impulso é abrir Conteúdo > Menus esperando encontrar opções de estilo. No entanto, encontram apenas uma lista simples de campos de texto.
Na Shopify, os menus funcionam como árvores de links aninhados. De acordo com a documentação oficial da Central de Ajuda da Shopify sobre menus suspensos, o item de nível superior pode ter até dois níveis de menus suspensos aninhados, criando uma profundidade máxima de três níveis. No código do tema, cada item é representado por um objeto Liquid link. Na documentação Liquid da Shopify, um item é simplesmente “a link in a menu” (um link em um menu) com propriedades como title e url, sem qualquer campo de imagem nativo.
Adicionar menus ajuda os clientes a navegar pela loja e a encontrar páginas essenciais (Central de Ajuda da Shopify). No entanto, o menu principal e os menus suspensos são exibidos em locais diferentes dependendo do tema adotado. O painel da Shopify armazena apenas dados de rota. O visual final—cores, tipografia, colunas e se os menus aparecem como listas verticais ou amplos mega menus—é definido pelo tema, por um app ou por código personalizado.
A maioria das imagens de referência vem de lojas que usam outros temas, código sob medida ou apps de terceiros. Se a sua imagem for a demonstração oficial do tema que você já utiliza, consulte o nosso guia para fazer seu menu parecer a demonstração do tema. Mas se a imagem veio de outra marca ou de um mockup sob medida, você deve fatiá-la em blocos e construí-la passo a passo.
Step 1: Break the image into a menu design spec
Concept illustration: Uma imagem de design dividida em estrutura, blocos de conteúdo, estilo e comportamento.
Antes de alterar configurações ou escrever código, analise a sua imagem e monte uma especificação por escrito cobrindo quatro aspectos: estrutura, blocos de conteúdo, estilo e comportamento.
Structure: levels and columns
- Identificar a família de menu: Trata-se de uma barra horizontal padrão com menus suspensos, um mega menu amplo (painel com várias colunas), uma gaveta lateral (drawer) ou uma barra de abas inferior? Para comparar formatos, confira nosso guia para escolher o tipo de menu adequado.
- Contar os itens de primeiro nível: Note quantos links primários aparecem no cabeçalho (por exemplo: Novidades, Coleções, Sobre nós, Promoções).
- Verificar os níveis aninhados: Observe o painel suspenso. Os links aparecem diretamente ou organizados sob subtítulos em negrito? Lembre-se do teto da Shopify de três níveis no total.
- Contar as colunas: Conte quantas colunas verticais compõem a grade do mega menu.
Content blocks: links, images, banners, products
Faça um inventário de todos os componentes presentes no modelo:
- Colunas de links em texto: Listas verticais de páginas ou coleções.
- Títulos de grupos: Rótulos em negrito que agrupam categorias correlatas.
- Cartões com fotos de coleções: Miniaturas fotográficas acompanhadas do nome da coleção.
- Banners promocionais: Imagens retangulares destacando campanhas, cupons ou lookbooks.
- Produtos em destaque: Pequenos blocos com foto do produto, título e preço.
- Ícones ao lado dos links: Pequenos símbolos ou selos inseridos junto ao texto.
- Botões de chamada para ação (CTA): Links formatados como botões evidentes (ex. Ver lançamentos).
Style: colors, fonts, spacing
Registre a identidade visual de maneira qualitativa, sem tentar medir pixels exatos em imagens comprimidas:
- Cores: Identifique o fundo do painel (branco, cinza claro ou escuro), a cor dos links, o realce no hover e as linhas divisórias.
- Tipografia: Observe a família tipográfica (sem serifa moderna ou serifa clássica), o uso de maiúsculas e a diferença de peso entre títulos e links.
- Espaçamento: Veja se o menu parece arejado com margens amplas ou compacto para acomodar muitas categorias.
- Bordas e cantos: Note se as imagens têm cantos retos ou suavemente arredondados.
Behavior: hover, click, and mobile
- Disparo: O menu abre ao passar o mouse (hover) ou exige um clique?
- Abertura de subitens: No menu lateral, os submenus abrem em acordeão para baixo ou deslizam para o lado?
- Visão móvel: A imagem traz o layout para smartphones? Caso não traga, você precisará planejar a disposição para telas de toque.
Ficha de especificação do menu
Copie esta lista para as suas anotações antes de começar a montagem:
- Tipo de menu: Barra horizontal / Mega menu de desktop / Drawer móvel / Barra de abas
- Contagem de itens principais: (ex. 5 itens)
- Profundidade de níveis: Nível 1 / Nivel 2 / Nível 3 (limite Shopify: 3 níveis)
- Quantidade de colunas: (ex. 4 colunas no desktop)
- Blocos de conteúdo: Listas de links / Cartões de coleção / Banners / Produtos / Ícones / Botões
- Estimativa de cores: Fundo, texto dos links, realce de hover, bordas
- Estilo de fontes: Sem serifa ou serifa, maiúsculas, peso dos títulos
- Comportamento no desktop: Hover com pausa segura / Clique
- Estratégia para mobile: Drawer lateral / Linhas em acordeão / Barra de abas fixa / Linha de ícones
Step 2: Choose the build route: theme settings, a menu app, or custom code
Com a especificação em mãos, escolha o caminho de construção. Na Shopify, você pode optar por: configurações do próprio tema, um aplicativo de menu ou código sob medida.
Examine cada alternativa ponderando esforço de configuração, controle de design e risco de manutenção nas atualizações de tema:
| Caminho de construção | Esforço de montagem | Controle de design | Risco em atualizações do tema | Mais indicado para |
|---|---|---|---|---|
| Ajustes do tema | Baixo (configurado no editor de temas sem mexer em código) | Limitado (estritamente restrito aos recursos que o tema ativo já possui) | Baixo: personalizações feitas no editor são mantidas nas atualizações | Menus suspensos comuns e mega menus simples nativos do tema |
| App de menu | Moderado (editor visual com ferramentas de arrastar e soltar) | Alto (colunas personalizadas, cartões com fotos, banners, produtos e barras móveis) | Baixo a Moderado: app embeds evitam editar código, mas convém checar compatibilidade em grandes trocas | Lojas que buscam layouts ricos e banners sem lidar com programação |
| Código personalizado | Alto (desenvolvimento em Liquid, CSS, JavaScript e esquemas) | Máximo (controle irrestrito sobre marcação, animações e lógica) | Alto: convém salvar uma cópia do código personalizado antes de atualizar, e ele pode precisar ser reaplicado | Marcas com desenvolvedores próprios ou agências contratadas |
Opção 1: Ajustes nativos do tema
Comece verificando o personalizador do seu tema (Loja virtual > Temas > Personalizar). Abra a seção Cabeçalho (Header) para ver as opções disponíveis. Alguns temas contam com suporte a mega menu nativo, organizando os links aninhados de Conteúdo > Menus em várias colunas.
A maior vantagem é a tranquilidade técnica: quaisquer personalizações feitas usando o editor de temas são copiadas e aplicadas ao tema atualizado (Central de Ajuda da Shopify). Porém, a flexibilidade visual é limitada. Se o tema não suportar imagens ou banners na cabecera, os ajustes nativos não conseguirão criá-los. Para conhecer essas fronteiras, leia nosso artigo sobre os limites dos menus dos temas da Shopify.
Opção 2: Aplicativo de menu dedicado
Se a sua imagem de referência tiver banners, cartões com fotos de produtos, coleções ou uma barra de abas inferior ausentes no seu tema, usar um aplicativo especializado é o caminho mais prático.
Os apps atuais da Shopify usam extensões de aplicativo de tema. Quando os apps utilizam extensões desse tipo, os comerciantes não precisam editar manualmente o código do tema (Shopify Developer Documentation). Você configura colunas, links, imagens e cores no editor visual do aplicativo e ativa o app embed no editor de temas.
A contrapartida é adicionar uma dependência de software. Apps podem ter cobrança mensal, e a Shopify lembra que alguns aplicativos podem não ser compatíveis com um novo tema ao trocar de tema (Central de Ajuda da Shopify). Mesmo assim, para quem não programa, o app oferece liberdade visual sem fragilizar o código do tema.
Opção 3: Código personalizado
Caso precise de uma animação exclusiva ou de um layout diferenciado que nem o tema nem os apps atendam, escrever código sob medida garante controle total. Um desenvolvedor ajustará os arquivos Liquid do cabeçalho, criará regras CSS e integrará metafields.
O vídeo a seguir ilustra um exemplo prático do caminho de código personalizado, ensinando a inserir trechos de código e metafields em um tema gratuito para exibir imagens no menu:
Embora o código sob medida permita qualquer layout, ele traz obrigações de manutenção contínua. A Central de Ajuda da Shopify recomenda: “Você deve sempre salvar uma cópia de qualquer código personalizado antes de atualizar seu tema” (Central de Ajuda da Shopify). Como o código personalizado pode precisar ser aplicado de novo em um tema atualizado, mantenha uma cópia salva e revise seu menu a cada atualização.
Step 3: Map each part of the image to a building block
Depois de escolher a rota técnica, associe cada detalhe visual da sua especificação do Passo 1 a um bloco de navegação real.
A tabela abaixo mostra como sete componentes comuns do design são viabilizados através de ajustes do tema, apps de menu e código sob medida:
| Elemento na imagem | Função técnica | Ajustes do tema | App de menu | Código sob medida |
|---|---|---|---|---|
| Links de primeiro nível | Barra principal de navegação com as seções primárias | Nativo: links em Conteúdo > Menus associados ao Header | Depende do app: pode substituir ou ampliar a barra do cabeçalho do tema | Laço Liquid percorrendo linklists.main-menu.links no cabeçalho |
| Colunas de links com títulos | Sublinks reunidos sob títulos de categoria em negrito | Depende do tema: disponível se o tema contiver blocos de mega menu | Depende do app: procure um construtor de colunas com títulos de grupo | Laços Liquid aninhados (for child in link.links) dispostos com CSS Grid |
| Cartões de imagem de coleção | Miniaturas com imagem da coleção e texto | Depende do tema: alguns temas pagos puxam a imagem da coleção | Depende do app: procure blocos de cartões com imagem ligados às coleções | Trecho Liquid que busca collection.featured_image ou metafield |
| Banners promocionais | Cartão gráfico para campanhas de desconto ou lookbooks | Depende do tema: alguns temas incluem um bloco promocional no cabeçalho | Depende do app: procure blocos de banner com suas próprias imagens e links em botão | Blocos estáticos no schema da seção com seleção de imagem e links |
| Produtos em destaque | Minificha com foto do produto, título e preço | Depende do tema | Depende do app: procure blocos de produto | Consulta Liquid buscando produtos específicos via all_products[handle] |
| Ícones ao lado dos links | Pequenos glifos visuais próximos ao texto (ex. tag de sale) | Depende do tema | Depende do app: procure seletores de ícones ou upload de ícones próprios | Código SVG em linha ou pseudoelementos CSS mapeados aos links |
| Botões de ação (CTA) | Link formatado como botão destacado (ex. Agendar horário) | Depende do tema: certos temas estilizam o último link como botão | Depende do app: procure estilo de botão para itens individuais do menu | Classe CSS personalizada aplicada às tags de âncora no Liquid |
Diretrizes de estrutura para mega menus
Se a sua imagem de referência apresenta um painel largo com várias colunas, você está construindo um mega menu. Pesquisas de usabilidade do Nielsen Norman Group comprovam que mega menus funcionam muito bem porque exibem muitas opções em um layout suspenso bidimensional. Esse formato panorâmico ajuda os clientes a explorar o sortimento rapidamente, sem a necessidade de abrir sucessivos menus suspensos estreitos.
O NN/g ressalta ainda que “mega menus facilitam o uso de fotos e ícones quando apropriado” (Nielsen Norman Group). Elementos visuais agilizam o reconhecimento das seções. No entanto, as fotos devem priorizar a clareza. Acompanhe cada imagem com um rótulo legível para que o comprador saiba exatamente aonde o link o conduzirá.
Por fim, o NN/g orienta a “agrupar as opções em conjuntos relacionados” (Nielsen Norman Group). Se você tem vinte sublinks, não os mostre em uma lista única e desordenada. Distribua-os sob cabeçalhos de coluna bem definidos—como Partes de cima, Calças, Casacos e Acessórios. Para aprofundar esses critérios, conheça o nosso artigo sobre boas práticas para mega menus.
Step 4: Translate the desktop design for mobile
Concept illustration: Um mega menu de desktop traduzido em uma gaveta móvel, um menu de ícones e uma barra de abas inferior.
Um equívoco frequente ao recriar um menu a partir de uma captura de desktop é deixar os celulares de lado. Um mega menu no computador ocupa uma tela larga, ao passo que a tela de um smartphone é estreita. Não é possível espremer uma grade de várias colunas em um telefone compacto.
Pesquisas de usabilidade do Baymard Institute destacam essa dificuldade: “Durante os testes de usabilidade, observamos sistematicamente que a navegação móvel é especialmente difícil para os usuários.” Nos celulares, os compradores lidam com tipografia reduzida e alvos de toque apertados.
O Baymard observa que, na maioria das vezes, o menu móvel fica recolhido por padrão e oculto atrás de um ícone de hambúrguer (Baymard Institute). Embora esconder a navegação economize tela, há um prejuízo real: estudos do Nielsen Norman Group revelam que a capacidade de descoberta cai quase pela metade quando a navegação fica escondida fora da tela.
Para compensar essa perda de visibilidade, o NN/g recomenda: “Se o seu site tiver 4 ou menos links de navegação principais, exiba-os como links visíveis” (Nielsen Norman Group). Em lojas Shopify, esse princípio dá origem a três abordagens práticas:
1. A gaveta móvel lateral (drawer)
Para catálogos médios e grandes, o menu drawer permanece indispensável. Quando o cliente clica no ícone de hambúrguer, o painel se abre. Para adaptar o seu mega menu a esse formato:
- Transforme colunas horizontais em listas verticais expansíveis em acordeão.
- Empregue os títulos de coluna como botões para abrir as subcategorias.
- Deixe os links de produtos recuados logo abaixo.
- Troque banners pesados por faixas horizontais finas ou retire-os no mobile para evitar rolagens cansativas.
2. A barra de abas fixa na parte inferior (tab bar)
Para que suas páginas mais relevantes fiquem sempre à vista em smartphones, instale uma barra de abas fixada na borda inferior da tela. Posicionada na zona de alcance cômodo do polegar, ela oferece três a quatro atalhos centrais (como Início, Loja, Buscar, Carrinho). Os clientes alternam entre as áreas com um único toque sem precisar abrir o menu lateral. Saiba como estruturar essa barra em nosso guia sobre navegação móvel além do menu hambúrguer.
3. Trilhas de ícones de categorias
Se o seu layout de computador exibia cartões ilustrados de coleções, adapte-os no celular por meio de uma linha de ícones no topo das páginas de coleção ou na gaveta lateral. Pequenos ícones redondos com termos como Vestidos, Blusas ou Calçados permitem navegar visualmente sem consumir espaço vertical.
Adotar estruturas pensadas para cada tipo de aparelho garante compras mais confortáveis para todos os clientes. Acompanhe o passo a passo completo no nosso guia para criar menus separados para desktop e mobile.
Step 5: Match colors, fonts, and spacing to your brand
Inspirar-se em uma imagem de menu significa adotar o equilíbrio de espaços e a distribuição em colunas—nunca copiar ativos protegidos de terceiros. Jamais copie logotipos, fotos autorais ou fontes pagas de outras marcas. Transmita essa mesma harmonia visual por meio da verdadeira identidade da sua loja.
Aplicar os estilos do seu tema ativo
Integre a tipografia e as cores da sua marca à nova navegação:
- Adote as fontes já configuradas no seu tema (Loja virtual > Temas > Personalizar > Configurações do tema > Tipografia) para que o menu converse com o restante do site.
- Defina o fundo dos painéis com base nas cores neutras da sua loja (como um branco limpo ou bege suave).
- Use a cor de destaque da sua marca para realces de hover, selos de promoção e botões de chamada.
Para mais recomendações sobre como sincronizar navegação e posicionamento de marca, leia nosso artigo sobre como fazer a navegação ter a identidade da sua marca.
Garantir contraste de texto acessível
Um design bonito precisa ser legível para todo mundo. Imagens de exemplo na internet frequentemente usam fontes cinza claro sobre fundos brancos ou tipografia fina em branco sobreposta a fotografias complexas. Em uma loja real, essa falta de contraste impede que muitos compradores consigam ler o menu com nitidez.
As normas internacionais de acessibilidade estabelecem limites objetivos. Segundo as recomendações WCAG 2.2 da W3C Web Accessibility Initiative, o texto comum requer uma taxa de contraste mínima de 4.5:1 em relação ao fundo, e textos grandes precisam de pelo menos 3:1.
Ao definir as cores do seu menu:
- Garanta que a cor do texto dos links mantenha um contraste de pelo menos 4.5:1 com o fundo do painel.
- Ao posicionar textos ou botões sobre uma foto de banner, coloque uma placa opaca ou semitransparente atrás da escrita para assegurar o contraste de 4.5:1, independentemente do brilho da foto.
- Preserve um espaçamento vertical amplo entre os links no celular para evitar toques incorretos acidentais.
Trade-offs: what not to copy pixel for pixel
Diante de uma imagem elegante, surge a tentação de copiar milimetricamente cada sombra, animação e margem. Porém, imitar uma ideia visual sem ponderar a ergonomia e os limites da plataforma gera problemas de navegação e custos imprevistos.
Evite cometer estes três erros comuns:
1. Animações de hover hiper-reativas
Mockups estáticos dão a impressão de que os menus devem abrir imediatamente ao mínimo toque do cursor. Na prática, a abertura instantânea irrita o usuário: ao movimentar o mouse em direção à barra de busca ou ao carrinho, ele ativa sem querer painéis enormes que bloqueiam a tela.
O Nielsen Norman Group recomenda uma pausa intencional: “O mouse deve permanecer parado por 0,5 segundo antes de exibir qualquer coisa.” Esse curto intervalo de meio segundo evita disparos acidentais durante a movimentação habitual do cursor.
A acessibilidade por teclado é igualmente essencial. Conforme as diretrizes do W3C para menus suspensos, o padrão determina: “Os submenus não devem abrir ao usar a tecla Tab para navegar pelo menu.” Quando alguém navega usando Tab para pular entre os links principais, a abertura automática de submenus gera desorientação. Eles só devem expandir mediante uma ação intencional.
2. Criar mais colunas do que seu catálogo possui
Se a sua imagem de referência veio de uma grande rede de varejo com muitas colunas e dezenas de subcategorias, não force um catálogo pequeno dentro dessa mesma estrutura. Espalhar poucos itens em muitas colunas cria áreas vazias e colunas com apenas um link, passando a sensação de uma loja incompleta. Ajuste o número de colunas à variedade real do seu estoque.
3. Layouts excêntricos que geram dívida técnica
Menus com divisões diagonais, recortes assimétricos ou animações complexas em JavaScript podem se destacar no portfólio de um designer. Mas na Shopify, colocá-los em prática exige códigos Liquid e scripts delicados.
Conforme ressalta a documentação sobre atualização de temas da Shopify, você deve sempre salvar uma cópia de qualquer código personalizado antes de atualizar o tema. Menus muito personalizados podem precisar ser revisados e reaplicados após as atualizações.
Nenhum software ou tema garante correspondência exata de cada pixel com qualquer ilustração imaginada. O objetivo não é clonar um desenho, mas sim construir uma navegação estável, agradável e funcional para quem compra na sua loja.
Where Navi+ fits
Se a sua imagem de referência inclui estruturas em várias colunas, fotos de coleções, banners promocionais ou uma barra de abas móvel que o seu tema padrão não oferece, você não precisa necessariamente encomendar programação sob medida. É aqui que o app Navi+ se encaixa na sua loja.
O Navi+ é um aplicativo de navegação para a Shopify que ajuda lojistas a construir layouts de menu de forma visual:
- Mega Menus para computador: Crie painéis suspensos de várias colunas com produtos, coleções, fotos, ícones e larguras flexíveis (Shopify App Store), recriando a disposição e os banners do seu modelo.
- Menus móveis e gavetas (drawers): Desenvolva menus e painéis laterais específicos para smartphone (Shopify App Store), podendo espelhar a estrutura do computador ou usar uma hierarquia pensada exclusivamente para celulares.
- Barras de abas fixas na parte inferior: Inclua uma barra de navegação no rodapé com ícones e rótulos estilo aplicativo (Shopify App Store), mantendo os principais atalhos sempre ao alcance do polegar.
- Trilhas de ícones de coleções: Crie faixas de ícones arredondados para facilitar a navegação visual no smartphone.
- Sem mexer em código: Crie e edite menus aproveitando modelos prontos, auxílio de inteligência artificial e ferramentas de arrastar e soltar sem tocar nos arquivos do tema (Shopify App Store).
- Instalação segura no tema: O aplicativo se integra por meio de extensões de aplicativo de tema (Shopify Developer Documentation), para que você não precise editar manualmente o código Liquid do tema.
- Hierarquia padronizada: Suporta até três níveis aninhados, mantendo conformidade integral com a estrutura da Shopify.
Os modelos pré-configurados fornecem um começo rápido, mas é você quem conecta suas coleções, envia suas fotografias otimizadas e define as cores da sua marca. O Navi+ não faz a leitura mágica de um arquivo de imagem para gerar um menu pronto instantaneamente; ele entrega os blocos de construção que você precisa para montar esse design com facilidade.
Se o seu tema não consegue produzir as colunas, os cartões ilustrados ou a barra de abas móvel da sua imagem de referência, você pode recriá-los no Navi+ a partir de um modelo pronto e ajustar cada bloco ao seu sortimento e à sua marca.
Pre-publish checklist
Antes de disponibilizar o novo menu aos visitantes da sua loja, revise esta lista prática:
- Conferência com a especificação: Compare o menu pronto com a ficha elaborada no Passo 1 para ter certeza de que nenhuma coluna ou bloco ficou de fora.
- Teste de links: Clique em cada link, cartão de coleção e banner para assegurar que nenhum leve a páginas com erro 404.
- Otimização de imagens: Verifique se as imagens são da sua autoria, se estão comprimidas para carregamento rápido e se contêm texto alt descritivo.
- Testes em múltiplos dispositivos: Examine o menu em um navegador de computador e faça testes em um smartphone real.
- Acessibilidade por teclado: Navegue com a tecla Tab pelos links do cabeçalho para comprovar que os submenus não abrem sem comando (W3C Flyout Menus).
- Verificação de contrastes: Confirme que todos os textos sobre fundos e banners alcançam a taxa mínima de 4.5:1 (WCAG 2.2).
- Ajuste na tela móvel: Assegure-se de que a gaveta móvel e a barra de abas se acomodem sem provocar rolagem horizontal indesejada.
- Cópia de segurança do código: Se você inseriu código Liquid ou CSS manual no tema, salve uma cópia do seu código personalizado (Central de Ajuda da Shopify).
- Manutenção em atualizações: Planeje uma checagem do menu sempre que fizer atualizações no tema ou adicionar novos aplicativos (Central de Ajuda da Shopify).
- Pré-visualização no app: Se estiver usando o Navi+, visualize o mega menu de desktop e a barra móvel no editor antes de publicar a ativação definitiva.
FAQ
Can I add images to a Shopify menu without an app?
Os menus padrão gerenciados em Conteúdo > Menus na Shopify guardam apenas títulos e links como objetos Liquid (Shopify Developer Documentation). A exibição de fotos nos menus suspensos depende de o seu tema incluir blocos visuais de fábrica (Central de Ajuda da Shopify); caso o tema não ofereça isso, será necessário recorrer a um app de menu ou programar código próprio.
How many levels can a Shopify menu have?
Na estrutura de navegação da Shopify, um item principal pode conter até dois níveis de menus suspensos aninhados abaixo dele (Central de Ajuda da Shopify). Isso define uma hierarquia máxima de três níveis (Item principal > Subcategoria > Item final).
What should my desktop mega menu become on mobile?
Um mega menu de computador geralmente precisa de um layout próprio no celular, como uma gaveta lateral (drawer) com linhas expansíveis. Como navegar no celular é difícil para os usuários (Baymard Institute) e ocultar links reduz a descoberta, sites com até quatro links principais devem mantê-los visíveis (Nielsen Norman Group), por exemplo com uma barra de abas inferior fixa.
Will a custom-coded menu survive theme updates?
Todas as alterações efetuadas diretamente no personalizador visual do tema são salvas e mantidas nas atualizações do tema (Central de Ajuda da Shopify). Já para código inserido diretamente nos arquivos do tema, você deve sempre salvar uma cópia antes de atualizar e pode precisar reaplicá-lo ao tema atualizado.
Should I copy the image exactly?
Não. É recomendável adotar a distribuição de espaços, a divisão de colunas e o fluxo de interação, mas usando fotos, logotipos e fontes da sua própria marca. Além disso, certifique-se de que os textos atinjam o contraste mínimo de 4.5:1 (W3C WCAG 2.2) e organize os links em blocos coerentes com o tamanho real do seu inventário (Nielsen Norman Group).
Sources
- Shopify Help Center — Drop-down menus: https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
- Shopify Help Center — Menus and links: https://help.shopify.com/en/manual/online-store/menus-and-links
- Shopify Help Center — Updating themes: https://help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes
- Shopify Developer Documentation — Link Liquid object: https://shopify.dev/docs/api/liquid/objects/link
- Shopify Developer Documentation — Theme app extensions: https://shopify.dev/docs/apps/build/online-store/theme-app-extensions
- Nielsen Norman Group — Mega Menus Work Well: https://www.nngroup.com/articles/mega-menus-work-well/
- Nielsen Norman Group — Hamburger Menus and Hidden Navigation: https://www.nngroup.com/articles/hamburger-menus/
- Baymard Institute — Navigation Menu Usability: https://baymard.com/mcommerce-usability/benchmark/mobile-page-types/navigation-menu
- W3C Web Accessibility Initiative — Contrast Minimum (WCAG 2.2): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- W3C Web Accessibility Initiative — Flyout Menus Tutorial: https://www.w3.org/WAI/tutorials/menus/flyout/
- Shopify App Store — Navi+ Navigation Design: https://apps.shopify.com/pronavi-navigation-design
Explore os temas
Este guia traz links para artigos específicos — aprofunde-se em cada um.