Como usar?

Mega Menu é um dos tipos de menu mais populares e eficazes, especialmente em desktop. Os usuários naturalmente esperam encontrar um Mega Menu logo abaixo do cabeçalho do site. No entanto, o menu padrão do Shopify geralmente é simples, carece de uma estrutura forte e oferece pouco ou nenhum suporte a imagens. É por isso que você deve usar o Navi+ Mega Menu.

Principais Benefícios:

  • Substitui completamente o menu mega simples padrão do Shopify
  • Oferece múltiplos estilos de apresentação com imagens, grades e layouts multinível para uma experiência rica e profissional
  • Funciona perfeitamente tanto em dispositivos móveis quanto em desktop para uma experiência consistente

FAQ:

1. Eu ainda não decidi se vou usar a versão gratuita ou paga. Posso experimentar os modelos de menu profissional?

Absolutamente! Os grupos de menu são principalmente para ajudar iniciantes a evitar se sentir sobrecarregados com recursos avançados no Navi+ 😄. A melhor maneira é experimentar os menus profissionais para explorar todos os recursos e opções de layout. Mais tarde, você pode simplesmente excluir qualquer menu que não precise ou que considere inadequado.

2. Criar um menu aqui faz com que ele apareça no meu site imediatamente?

Ainda não. Você precisará publicar o menu correto para que ele apareça no seu site. Não se preocupe — é fácil!

3. E se eu escolher o modelo errado ou cometer um erro?

Sem problemas. Você pode excluí-lo e criar um novo a qualquer momento. Se você estiver testando um menu e quiser experimentar outro modelo, pode salvar o atual como um arquivo de backup e reabri-lo mais tarde. Você pode até copiar e colar partes entre menus (abrindo duas abas do navegador) para manter seu trabalho anterior. Sinta-se à vontade para experimentar!

4. Devo criar apenas um menu ou vários?

Você deve criar vários menus. Apenas o menu ativo será exibido no seu site, mas você pode preparar muitas versões — selecionando diferentes modelos ou clonando menus. Os menus podem ser configurados para mostrar/ocultar com base no tipo de página (início, produto, coleção...), dispositivo (móvel ou desktop) ou palavras-chave da URL. Então, vá em frente e construa menus que se encaixem em cada situação!

Passo 1: Edite a árvore do menu

1.1. Entendendo a Árvore do Menu

A árvore do menu é a parte mais importante de qualquer menu — ela define a estrutura.

Aqui está um exemplo de uma árvore de menu de um mega menu completo para desktop:

[+] Menu  
[+] Categorias
[+] Alfabeto  
Skateboarding  
   - Componentes (Nome do grupo)  
   - Mesas
   - Trucks
   - Mais (link azul para detalhes..)   
   - Completes      
        - Chapéus (Nome do grupo)
        - Burton Lunchlap Earflap Hat           
        - Volcom Ramp Stone Adjustable Hat
        - ...
[+] Acessórios  
[+] Blogs  
[+] Suporte
[+] Mais

Esta é uma árvore de menu de 3 níveis. O nível 1 inclui Menu, Categorias, Alfabeto, Skateboarding… e Mais... Skateboarding tem 5 submenus de nível 2: Componentes, Mesas, Completes (Consiste em alguns submenus de nível 3: Chapéus, Burton Lunchlap Earflap Hat…)

Você passará a maior parte do seu tempo construindo esta árvore de menu para o seu site, ajudando os clientes a encontrar o conteúdo que estão procurando.

Catalog: A level 1 menu item, displayed as a tab on the tab bar. All-Mountain: Level 2 menu item that appears when you tap on Catalog.
Cruise Flex, Balance Ride: Level 3 menu item that appears when you tap on All-Mountain.

1.2. Interações Básicas com a Árvore do Menu

Você pode arrastar e soltar itens de menu para cima e para baixo ou para a esquerda e para a direita para mudar sua posição e relacionamentos pai-filho na árvore do menu.

Quando você passa o mouse sobre qualquer item de menu, verá opções adicionais: editar os detalhes do item, excluí-lo da árvore do menu ou copiá-lo e colá-lo em outro lugar.

Dica: Você pode copiar um item de menu de um menu para outro abrindo o aplicativo Navi+ em duas abas do navegador.

1.3. IMPORTANTE! Exclua os itens de menu de exemplo e mantenha apenas a estrutura que você deseja.

Esta é uma situação comum ao criar um menu com o Navi+. Quando você cria um novo menu, incluímos um exemplo completo com itens de menu populares para mostrar ideias de layout e permitir que você copie/cole conforme necessário. No entanto, se você é novo no Navi+ e está usando o plano Starter, verá muitos avisos vermelhos (i) para recursos que não estão disponíveis, como fazer upload de imagens ou usar interações avançadas.

Se você gosta desses recursos avançados, considere atualizar para um plano Business ou Elite. Mas se você quiser continuar com o plano Starter, por favor, encontre e exclua os itens de menu com avisos vermelhos (i).

Dica Importante: Quando a confirmação de exclusão aparecer, ative “Não perguntar novamente na próxima vez” para excluir mais rápido.

1.4. Adicione itens de menu à Árvore do Menu

Para adicionar um item de menu, você tem duas opções:

Opção 1 **(Não recomendado se você é novo no Navi+)**: Clique em “Adicionar menu” para inserir um item de menu em branco no final da árvore do menu. Este método requer um bom entendimento das configurações do item de menu, que abordaremos abaixo. Pode parecer esmagador no início, então você pode explorar isso mais tarde.

Opção 2 (Recomendada): Já preparamos muitos modelos de itens de menu bem projetados para você. Basta copiá-los e colá-los no lugar certo. Depois de terminar sua árvore de menu, basta excluir os modelos não utilizados.

1.5. IMPORTANTE! O atributo “É item de menu de várias colunas” (disponível apenas para Desktop e para Mega menus).

Este é um recurso altamente especializado projetado especificamente para Mega Menus de desktop. É usado quando você precisa de um item de menu em tela cheia com várias colunas. Cada coluna pode ser configurada com larguras personalizadas (por exemplo, 3/12, 4/12, 6/12…). O item de menu de várias colunas é extremamente poderoso e flexível para construir layouts de menu complexos adaptados às suas necessidades.

Se você não precisa de layouts complexos como itens de menu de várias colunas — ou planeja usá-los mais tarde — pode excluí-los com segurança dos seus itens de menu de nível 1.

Veja instruções detalhadas sobre como usar o atributo “É item de menu de várias colunas”.

Quando um item de menu de nível 1 é definido como “É item de menu de várias colunas”, ele será destacado em amarelo claro na Árvore do Menu, e seus itens de menu de nível 2 serão automaticamente convertidos em Colunas (com um ícone vermelho), independentemente de quaisquer outros atributos que você atribua.

Para esses itens de menu de nível 2 Coluna, o único atributo utilizável é Largura do layout. Todos os itens de submenu sob essa coluna serão então organizados dentro de uma única coluna.

Você acha esse tipo de menu difícil de usar? Você está certo! Mas os resultados que você obtém com esse atributo são realmente UAU.

Se você remover o “É item de menu de várias colunas” atributo do item de menu de nível 1, tudo voltará ao estado original.

Por que você precisa do atributo “Largura do dropdown quando expandido”?

Por padrão, ao usar o “É item de menu de várias colunas” atributo, o submenu (dropdown) se expande para a largura total da tela (ou com base no tamanho do contêiner, geralmente 1280, 1366, 1440 ou 100% — configurável na aba Avançado). No entanto, com uma área tão ampla, você pode não ter sempre conteúdo ou ideias suficientes para preencher o espaço.

Neste caso, você pode limitar a largura do submenu (individualmente para cada item de menu de várias colunas) para evitar uma aparência vazia ou desequilibrada.

Exemplo: Você pode criar um menu com uma largura de 700px e duas colunas de 6/12 cada. Dessa forma, você ainda obtém um layout espaçoso sem desperdiçar muito espaço na tela.