Adicionar uma posição personalizada para o menu

Guia prático Todos os planos 2 min de leitura

Use esta opção quando o tema não tem nenhum elemento de menu onde quer o menu, ou quando o cabeçalho é demasiado personalizado para as outras opções de Position (posição). Adicione um contentor vazio ao código do tema e indique-o em Show menu on this CSS selector (mostrar o menu neste seletor CSS).

Cuidado

Duplique o tema antes de editar o código (Loja online > Temas > … > Duplicar). Não se sente à vontade com código? Contacte-nos e instalamos o menu gratuitamente por si.

Adicionar os contentores e indicá-los na aplicação

1. Abra o código do tema

   Aceda a Loja online > Temas, clique em … no tema e escolha Editar código.

2. Adicione os contentores do menu

   Cole um contentor vazio onde cada menu deve aparecer e clique em Guardar. Qualquer ID serve; estes são exemplos:

   <div id="GloboDesktopMenu"></div>
   <div id="GloboMobileMenu"></div>

   • Computador: normalmente no ficheiro da secção do cabeçalho (por exemplo sections/header.liquid), onde deve ficar a navegação.
   • Telemóvel: normalmente no ficheiro da gaveta do menu do tema ou em layout/theme.liquid.

3. Introduza os contentores na aplicação

   No editor de menu, abra o separador Settings (definições) e escolha Show menu on this CSS selector em Position. Introduza #GloboDesktopMenu em CSS selector of your main menu e #GloboMobileMenu em CSS selector of your mobile menu.

   

   Introduza os IDs dos contentores nos dois campos de seletor CSS

4. Guarde, publique e verifique

   Clique em Save e, depois, publique o menu. Verifique a loja online no computador e no telemóvel.

Bom saber

• Apenas um esquema: adicione um único contentor e deixe o outro campo vazio.
• O conteúdo existente é substituído: a aplicação preenche cada contentor e substitui o que estiver lá dentro.
• O menu do tema mantém-se: oculte-o ou remova-o no código ou nas definições do tema se não quiser os dois.
• Por tema: as alterações ao código aplicam-se apenas ao tema que editou. Adicione novamente os contentores se mudar ou atualizar o tema.

Resolução de problemas

O menu para telemóvel não aparece

O tema pode criar a gaveta mais tarde com JavaScript. Mova o contentor para telemóvel para código que esteja sempre na página, como layout/theme.liquid.

Não aparece nada

Confirme que a incorporação da aplicação está ativada neste tema. Na consola do navegador, verifique se document.querySelector('#GloboDesktopMenu') encontra o seu contentor.

Páginas relacionadas

• Mostrar o menu num seletor CSSColoque o menu em elementos exatos do tema introduzindo os respetivos seletores CSS.
• Publicar um menuPublique o menu num tema e escolha onde aparece na sua loja online.
• CSS personalizadoAcrescente o seu próprio CSS para afinar o aspeto do menu.

Esta página foi útil?

Comunicar um problema