Configurar menus suspensos na loja virtual

Você pode criar menus suspensos para agrupar produtos, coleções ou páginas e facilitar a experiência de navegação dos clientes. Por exemplo, se você tem muitos produtos, vale a pena adicioná-los a coleções e usar um menu suspenso no menu principal para organizar essas coleções, pois isso ajuda os clientes a encontrar o tipo de produto que querem.

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

Observação

Menus de rodapé exibem apenas itens de nível superior, ou seja, não podem ser usados no rodapé da loja virtual.

Você pode visualizar e alterar os menus da sua loja virtual em Conteúdo > Menus no seu admin da Shopify.

Observação

Na maioria dos casos, é necessário criar um item antes de poder vinculá-lo. Por exemplo, você precisa criar uma coleção antes de adicioná-la a um menu.

Aninhar itens de menu para criar menus suspensos

É possível gerar menus suspensos criando ou movendo itens de menu para que apareçam abaixo de um item de nível superior. O item de nível superior é exibido no menu principal da loja virtual e os itens de menu embutidos são exibidos em um menu suspenso. O item de nível superior pode ter até dois níveis de menus suspensos embutidos.

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.

Na loja virtual, o menu principal e os menus suspensos aparecem em diferentes locais 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 ali existe um menu suspenso.

Observação

Atualize o tema para que ele mostre todos os três níveis de menu na loja virtual.

Adicionar um menu suspenso no menu principal

Em qualquer item do menu principal, é possível adicionar um menu suspenso.

Etapas:

Desktop

1. No admin da Shopify, acesse Conteúdo > Menus.

2. Clique no título do menu principal.

3. Escolha um dos itens do menu principal para servir de cabeçalho do menu suspenso ou, se preferir, adicione um novo item de menu. Se você não quiser vincular o cabeçalho a nada, insira # no campo Pesquisar ou colar um link para o item de menu do cabeçalho.

4. Para adicionar um item de menu e incluir no menu suspenso, conclua as seguintes tarefas:

   1. Clique em Adicionar item ao menu.
   2. No campo Nome, insira um nome para o item de menu.
   3. No campo Pesquisar ou colar um link, insira ou selecione um destino para o item de menu.

5. Clique em Adicionar e, depois, clique em para mover o item de menu e aninhá-lo abaixo do item de menu do cabeçalho.

6. Clique em Salvar menu.

iPhone

1. No app da Shopify, toque no ícone .

2. Toque em Conteúdo > Menus.

3. Toque no título do menu principal.

4. Escolha um dos itens do menu principal para servir de cabeçalho do menu suspenso ou, se preferir, adicione um novo item de menu para ser o cabeçalho. Se você não quiser vincular o cabeçalho a nada, insira # no campo Pesquisar ou colar um link para o item de menu do cabeçalho.

5. Para adicionar um item de menu e incluir no menu suspenso, conclua as seguintes tarefas:

   1. Toque em Adicionar item de menu.
   2. No campo Nome, insira um nome para o item de menu.
   3. No campo Pesquisar ou colar um link, insira ou selecione um destino para o item de menu.

6. Toque em Adicionar e, em seguida, toque na opção para mover o item de menu e aninhá-lo abaixo do item de menu do cabeçalho.

7. Toque em Salvar.

Android

1. No app da Shopify, toque no botão .

2. Toque em Conteúdo > Menus.

3. Toque no título do menu principal.

4. Escolha um dos itens do menu principal para servir de cabeçalho do menu suspenso ou, se preferir, adicione um novo item de menu para ser o cabeçalho. Se você não quiser vincular o cabeçalho a nada, insira # no campo Pesquisar ou colar um link para o item de menu do cabeçalho.

5. Para adicionar um item de menu e incluir no menu suspenso, conclua as seguintes tarefas:

   1. Toque em Adicionar item de menu.
   2. No campo Nome, insira um nome para o item de menu.
   3. No campo Pesquisar ou colar um link, insira ou selecione um destino para o item de menu.

6. Toque em Adicionar e, em seguida, toque na opção para mover o item de menu e aninhá-lo abaixo do item de menu do cabeçalho.

7. Toque em ✓.

Observação

Na maioria dos temas, você pode editar as configurações na seção Cabeçalho para alterar o menu-padrão principal.

Integração do menu de rodapé

Menus suspensos também podem ser implementados em menu de rodapé.

Etapas:

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

Considerações sobre compatibilidade de temas

Leia as seguintes considerações para adicionar menus suspensos ao seu tema:

• A maioria dos temas aceita até dois níveis de menus suspensos aninhados. Verifique a documentação do seu tema ou teste o item aninhado para confirmar a compatibilidade.
• Pode ser que alguns temas exijam ajustes de CSS para melhorar a usabilidade em dispositivos móveis. Não personalize o tema se você não tiver familiaridade com o código dele. Saiba mais sobre como personalizar o tema.

Como determinar se o seu tema é compatível com o menu suspenso aninhado

É possível usar os seguintes recursos para determinar a compatibilidade do tema com os níveis de menu suspenso aninhado que você quer implementar:

1. Verifique a documentação do tema. Para isso, revise a documentação do tema e confira algumas informações específicas sobre os recursos do menu e os níveis compatíveis de aninhamento.
2. Teste o item aninhado: crie uma estrutura de menu teste com a quantidade desejada de níveis aninhados e verifique se a exibição está correta no desktop e no dispositivo móvel.

A maioria dos temas aceita até dois níveis de menus suspensos aninhados. Se você estiver enfrentando problemas com menus suspensos, verifique se o seu tema aceita a quantidade de níveis aninhados a ser implementada, pois alguns temas podem exigir personalizações adicionais para que haja vários níveis de aninhamento.

Práticas recomendadas para menus suspensos

Confira as práticas recomendadas abaixo para criar uma estrutura de menu eficiente e compatível com todos os tipos de dispositivos.

• Use etiquetas descritivas, como "Loja por categoria", para itens de menu de nível superior com links #.
• Garanta que os menus estejam otimizados no dispositivo móvel. Você pode testar os menus em dispositivos móveis para verificar se os menus suspensos se expandem conforme o esperado.
• Adicione sete ou menos itens de nível superior no menu para evitar superlotação.
• Use títulos de links transparentes e descritivos. Por exemplo, "Coleções" e "Vestidos de verão".
• Cada menu pode ter até 10.000 itens, e sua loja pode ter até 1.000 menus no total.

Como solucionar problemas comuns

Revise as seguintes soluções para problemas comuns que você pode encontrar ao configurar menus de navegação:

• Redirecionamentos do menu móvel: se um link de menu de nível superior estiver redirecionando para uma nova página ao ser carregado, acesse o admin da Shopify e verifique se o campo de link do menu é #.

• Problemas de visibilidade: se os itens aninhados não estiverem aparecendo, verifique se eles foram arrastados corretamente para baixo do item de cabeçalho e estão devidamente recuados na interface de Menus. Confirme se o seu tema atende ao número de níveis aninhados que você configurou.

• Compatibilidade do tema: se você estiver tendo problemas com menus suspensos, verifique se o seu tema é compatível com a quantidade de níveis aninhados para implementação. Alguns temas podem precisar de personalização adicional para compatibilidade com vários níveis de aninhamento.

Personalizar o código do tema para menus suspensos

Para temas que exigem uma personalização mais profunda, você pode considerar a personalização do código.

Aviso

Personalize o código do seu tema apenas se você tiver familiaridade com Liquid, HTML, CSS e JavaScript. Alterações incorretas podem prejudicar a funcionalidade da sua loja.