Configurar menus suspensos na loja virtual

É possível usar menus suspensos para agrupar produtos, coleções ou páginas e facilitar a navegação dos clientes na loja virtual. Por exemplo, se você tiver muitos produtos, poderá adicioná-los a coleções e, em seguida, usar um menu suspenso no menu principal para organizar as coleções. Isso pode ajudar os clientes a encontrar o tipo de produto que procuram.

Também é possível adicionar, remover ou editar itens de menu em menus suspensos ou nos menus-padrão.

É possível visualizar e alterar os menus da loja virtual em Conteúdo > Menus no admin da Shopify.

Aninhar itens de menu para criar menus suspensos

É possível criar menus suspensos ao criar ou mover itens de menu para que fiquem aninhados sob um item de nível superior. O item de nível superior é exibido no menu principal da loja virtual, e os itens de menu aninhados aparecem em um menu suspenso. O item de nível superior pode ter até dois níveis de menus suspensos aninhados.

Todos os temas exibirão itens aninhados como menus suspensos no menu principal, e alguns temas exibirão itens aninhados como menus suspensos em outros locais.

O menu principal e os menus suspensos são exibidos em locais diferentes na loja virtual, dependendo do tema. Alguns temas exibem um ícone ao lado do nome de um menu suspenso no menu principal para ajudar os clientes a reconhecer que há um menu suspenso ali.

Adicionar um menu suspenso do menu principal

É possível adicionar um menu suspenso a partir de qualquer item do menu principal.

Etapas:

Integração do menu de rodapé

Os menus suspensos também podem ser implementados nos menus de rodapé.

Etapas:

1. No admin da Shopify, acesse Conteúdo > Menus.
2. Opcional: siga os mesmos princípios de aninhamento usados para os menus principais, como arrastar os itens de menu para baixo de um item de cabeçalho para criar uma estrutura suspensa clicando em e arrastando-os para o lugar.
3. Insira # no campo Link para itens de cabeçalho que não devem direcionar a uma página (por exemplo, cabeçalhos “Atendimento” ou “Explorar”).

Considerações sobre a compatibilidade de temas

Analise as considerações a seguir para adicionar menus suspensos ao tema:

• A maioria dos temas é compatível com até dois níveis de menus suspensos aninhados. Consulte a documentação do tema ou teste os itens aninhados para confirmar a compatibilidade.
• Alguns temas podem exigir ajustes de CSS para melhorar a usabilidade em dispositivos móveis. Não personalize o tema se não tiver familiaridade com o código dele. Saiba mais sobre como personalizar o tema.

Como determinar se o tema é compatível com menus suspensos aninhados

Para determinar se o tema atual é compatível com o número máximo de níveis de menus suspensos aninhados que você quer implementar, use os seguintes recursos:

1. Consultar a documentação do tema: analise a documentação do tema para ver informações específicas sobre as funcionalidades de menu e os níveis de aninhamento compatíveis.
2. Testar os itens aninhados: crie uma estrutura de menu de teste com o número de níveis aninhados desejado e verifique se ela é exibida corretamente em desktops e dispositivos móveis.

A maioria dos temas é compatível com até dois níveis de menus suspensos aninhados. Caso encontre problemas com menus suspensos, verifique se o tema é compatível com o número de níveis aninhados que você está tentando implementar, pois alguns podem exigir personalização adicional para aceitar vários níveis de aninhamento.

Práticas recomendadas para menus suspensos

Analise as práticas recomendadas a seguir para criar uma estrutura de menu útil que funcione bem em todos os dispositivos:

• Use etiquetas descritivas, como “Comprar por categoria”, para itens de menu de nível superior com links #.
• Confirme se os menus estão otimizados para dispositivos móveis. É possível testar os menus em dispositivos móveis para confirmar que os menus suspensos se expandem como esperado.
• Adicione sete ou menos itens de menu de nível superior para evitar sobrecarga de informações.
• Use títulos de link claros e descritivos. Por exemplo, “Coleções” e “Vestidos de verão”.
• Cada menu pode ter até 10.000 itens, e a loja pode ter até 1.000 menus no total. Qualquer item de menu com subitens em um menu suspenso conta como um menu separado para esse limite.

Acessibilidade de menus suspensos

A maioria dos temas implementa os cabeçalhos de menus suspensos como botões, em vez de links clicáveis. Trata-se de um design de acessibilidade intencional que ajuda os clientes que usam tecnologia assistiva a entender a estrutura de navegação.

Quando um item de menu de nível superior controla um submenu suspenso, ele funciona como um botão para expandir o menu, e não como um link para uma nova página. Essa abordagem garante que os clientes que usam leitores de tela ou outras tecnologias assistivas consigam navegar corretamente pelo sistema de menus da loja.

Se você quiser que os clientes acessem uma página da categoria principal (como “Todos os produtos” ou “Todas as coleções”), adicione-a como o primeiro item no próprio menu suspenso, em vez de tornar o cabeçalho clicável.

Solução de problemas comuns

Analise as soluções a seguir para problemas comuns que podem ocorrer durante a configuração de menus de navegação:

• Redirecionamentos de menus em dispositivos móveis: se um link de menu de nível superior for redirecionado para uma nova página quando você tocar nele, verifique o menu no admin da Shopify para confirmar se o campo de link do menu é #.

• Problemas de visibilidade: se os itens aninhados não forem exibidos, verifique se eles foram arrastados totalmente para baixo do item de cabeçalho e se estão recuados na interface de Menus. Confirme se o tema é compatível com o número de níveis aninhados que você configurou.

• Compatibilidade do tema: se você estiver com problemas nos menus suspensos, verifique se o tema é compatível com o número de níveis aninhados que está tentando implementar. Alguns temas podem exigir personalização adicional para serem compatíveis com vários níveis de aninhamento.

• Criação de menu aninhado bloqueada: se você encontrar o erro “O menu não pode conter menus aninhados. Ative o recurso de navegação aninhada para usar”, talvez seja necessário ativar o recurso de navegação aninhada na loja. Isso geralmente afeta as lojas criadas antes de 2018. Entre em contato com o Atendimento ao cliente da Shopify se encontrar esse erro.

• Exibição do menu incorreto: se houver vários links de navegação que apontam para a mesma página (como a página inicial), o tema poderá exibir o submenu incorreto. Verifique se cada seção de navegação tem um link para uma página exclusiva para evitar confusão.

• Desaparecimento de itens do menu: se os links do menu desaparecerem sem terem sido excluídos, verifique se você excluiu os produtos, as coleções ou as páginas vinculados aos itens do menu. A exclusão do recurso vinculado também remove o item do menu.

Personalização do código do tema para menus suspensos

Para temas que exigem personalização mais aprofundada, considere personalizar o código do tema.