Pular para o conteúdo
GloboGlobo Docs
Instalar app
Português (Brasil)

Adicionar uma posição personalizada para o menu

Exiba o menu exatamente onde você quiser adicionando seu próprio contêiner ao código do tema.

Guia prático Todos os planos 2 min de leitura

Use quando o seu tema não tem um elemento de menu onde você quer o menu ou quando o cabeçalho é personalizado demais para as outras opções de Posição. Você adiciona um contêiner vazio ao código do tema e depois aponta Exibir o menu neste seletor CSS para ele.

Adicione os contêineres e aponte o app para eles

  1. Abra o código do tema

    Vá em Loja virtual > Temas, clique em … no tema e escolha Edit code.

  2. Adicione os contêineres do menu

    Cole um contêiner vazio onde cada menu deve aparecer e depois clique em Salvar. Qualquer ID funciona; estes são exemplos:

    <div id="GloboDesktopMenu"></div>
    <div id="GloboMobileMenu"></div>
    • Desktop: normalmente no arquivo da seção de cabeçalho (por exemplo, sections/header.liquid), onde a navegação deve ficar.
    • Celular: normalmente no arquivo do menu lateral do seu tema ou em layout/theme.liquid.

  3. Informe os contêineres no app

    No editor de menu, abra a aba Configurações e escolha Exibir o menu neste seletor CSS em Posição. Informe #GloboDesktopMenu em Seletor CSS do seu menu principal e #GloboMobileMenu em Seletor CSS do seu menu para celular.

    Informe os IDs dos seus contêineres nos dois campos de seletor CSS

  4. Salve, publique e confira

    Clique em Salvar e depois publique o menu. Confira sua vitrine no desktop e no celular.

Bom saber

  • Apenas um layout — adicione um único contêiner e deixe o outro campo vazio.
  • O conteúdo existente é substituído — o app preenche cada contêiner e substitui tudo o que estiver dentro dele.
  • O menu do seu tema permanece — oculte-o ou remova-o no código ou nas configurações do tema se você não quiser os dois.
  • Por tema — as edições de código valem apenas para o tema que você editou. Adicione os contêineres novamente se você trocar ou atualizar o tema.

Solução de problemas

O menu para celular não aparece

Seu tema pode montar o menu lateral mais tarde com JavaScript. Mova o contêiner do celular para um código que esteja sempre na página, como layout/theme.liquid.

Nada aparece

Confirme que a incorporação do app está ativada neste tema. No console do navegador, verifique se document.querySelector('#GloboDesktopMenu') encontra o seu contêiner.

Esta página foi útil?

Relatar um problema