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

Barra de navegação inferior no mobile

Adicione uma barra fixa de ícones, no estilo de app, com links e ações rápidas para seus compradores.

Guia prático Pro Navigation 10 min de leitura

A barra fica na tela enquanto os compradores rolam a página, como a barra de abas de um app, dando acesso com um toque a início, menu, carrinho, pesquisa, chat ou uma ligação. Um item também pode abrir um pequeno submenu, como um item Mais com links de conta, contato e perguntas frequentes.

O editor da barra inferior: abas de configurações (1) e pré-visualização ao vivo (2). Troque o dispositivo da pré-visualização com os botões no canto inferior esquerdo dela.

As abas de configurações são Itens do menu, Geral, Tipografia, Cores, Posição, Avançado e Histórico de versões.

Crie uma barra inferior

  1. Crie a barra

    Na página Início do app, clique em Adicionar navegação inferior — ou, no Gerenciador de menu, clique em Criar menu e escolha Barra inferior no mobile.

    Início: (1) ações rápidas para criar ou importar um menu, (2) o botão que ativa a incorporação do app

  2. Configure os itens

    Em Itens do menu, edite os itens padrão e adicione os seus. Veja Adicione e edite itens.

    O editor da barra inferior: abas de configurações (1) e pré-visualização ao vivo (2). Troque o dispositivo da pré-visualização com os botões no canto inferior esquerdo dela.

  3. Estilize a barra

    Ajuste as abas Geral, Tipografia e Cores. Veja Estilize a barra.

    Configurações gerais, incluindo a posição do submenu e o estilo de abertura.

  4. Escolha onde ela aparece

    Em Posição, escolha os dispositivos e a posição na tela. Veja Escolha onde a barra aparece.

    Ative a barra no celular (1) e no desktop (2) e escolha uma posição.

  5. Salve e publique

    Clique em Salvar e depois em Publicar no canto superior direito. Veja Publique a barra.

Adicione e edite itens

  1. Mostre as ações do item

    Em Itens do menu, passe o mouse sobre um item para mostrar Editar, Duplicar e Excluir. Arraste um item pela alça para reordená-lo.

    Passe o mouse sobre um item para editá-lo, duplicá-lo ou excluí-lo.

  2. Adicione itens e submenus

    Clique em Adicionar item para adicionar um item nesse nível, ou em Adicionar submenu em um item para aninhar itens abaixo dele. Os itens aninhados abrem como um submenu, em até três níveis.

  3. Clique em Editar para abrir Editar item do menu. Escolha um Ícone (clique em Alterar), digite um Título e clique no campo Link.

    Clique no campo Link para escolher a ação do item.

  4. Escolha uma ação

    Em Selecionar link, clique em Selecionar ao lado de uma ação (1). A caixa Link (2) recebe o início do link, por exemplo /collections/ para Produtos por coleção. Complete como mostrado na coluna Sintaxe, como /collections/summer-sale, e clique em Atualizar (3).

    Clique em Selecionar (1), complete o link (2) e clique em Atualizar (3).

Configurações do item

Ícone
Clique em Alterar para escolher um ícone ou enviar uma imagem.
Título
O texto abaixo do ícone.
Link
O que acontece ao tocar. Clique nele para abrir Selecionar link (veja Ações do item).
Abrir em nova aba
Abre o link em uma nova aba do navegador.
Descrição
Texto curto opcional exibido junto com o item.
Icon size
Icon size em px.
Box > Border radius
Arredonda os cantos da caixa do item, de 0 a 100 px.
Box > Box padding
Espaço dentro da caixa do item, de 0 a 100 px.
Box > Position
Move o item para a esquerda (negativo) ou para a direita (positivo), de -100 a 100 px.
Cor
Cores de texto, ícone, fundo do ícone e fundo somente deste item, cada uma com uma cor ao passar o mouse. Limpar configurações volta às cores da barra.
Selo
Um pequeno rótulo no item, com Título, Cor do texto do selo e Cor de fundo do selo.
Visibilidade
Oculta o item em alguns dispositivos ou para alguns compradores, ou o mostra somente entre duas datas. Veja Regras de exibição.
Avançado
Nome de classe extra adiciona uma classe CSS para o CSS personalizado. Divisor adiciona uma linha divisória ao lado do item.

Ações do item

O Selecionar link agrupa as ações em oito seções. Clique no ícone de informação ao lado de uma ação para ver um exemplo.

1. Link to your store internal pages
URL curta exata /[your-url], Página inicial /, Todos os produtos /collections/all, Produtos por coleção /collections/[collection-handle], Um detalhe do produto /products/[your-product-shorturl], Todas as postagens do blog /blogs/news, Um detalhe de postagens de blog /blogs/news/[your-blog-shorturl], Um detalhe de página /pages/[your-page-shorturl], Página do carrinho /cart, Página de pesquisa /search, Formulário de contato /pages/contact.
2. Open panels (Compatible with popular themes)
Abrir menu (celular) gm-open:MobileMenu, Abrir carrinho gm-open:Cart, Abrir pesquisa gm-open:Search.
3. Open other applications (E.g. Shopify inbox...)
Abrir caixa de chat gm-open:Inbox abre o chat do Shopify Inbox.
4. Scroll on page
Role para cima gm-scroll:Top, Role para baixo gm-scroll:Bottom, Role até um elemento na página gm-scroll:OnPage(htmlElement).
5. Call javascript function
gm-javascript:Function executa uma função JavaScript no seu site.
6. Support tools
Fazer uma ligação tel:, Enviar uma mensagem SMS sms:, Enviar um e-mail mailto:, Chat com Messenger, WhatsApp, Telegram, Line ou Zalo.
7. Share
Copiar URL atual gm-share:CopyUrl, Compartilhar no Facebook gm-share:Facebook, Compartilhar no X (Twitter) gm-share:X.
8. Link to extend websites
URL completa (qualquer endereço web completo), Não redirecione #.
Seções 2 a 4: abrir painéis, outros apps e rolagem.
Seções 5 e 6: JavaScript e ferramentas de suporte.
Seções 7 e 8: compartilhamento e links externos.

Exemplos:

  • gm-scroll:Top(150) — rola até o topo, deixando uma margem de 150 px.
  • gm-scroll:OnPage(#page-title) — rola até o elemento com o ID page-title.
  • tel:+0123456789 — liga para este número.
  • sms:+012345678?body=I need help — abre um SMS com o texto preenchido.
  • https://wa.me/0123456789 — abre uma conversa no WhatsApp. Use o código do país, sem o +.

Estilize a barra

Configurações gerais, incluindo a posição do submenu e o estilo de abertura.

Menu principal (nível 1)

Menu arredondado
Raio dos cantos da barra, de 0 a 50 px.
Espaçamento de itens
Espaço entre os itens, de 0 a 50 px.
Padding inline · Padding block
Espaço horizontal e vertical dentro de cada item, de 0 a 100 px.
Usar sombra de caixa
Adiciona uma sombra ao redor da barra.

Submenu (níveis 2 e 3)

Posição do submenu
Esquerda, Direita, Centro ou largura Completa.
Estilo de abertura do submenu
Menu suspenso ou Deslizar para fora.
Largura do submenu
De 100 a 900 px.
Padding inline · Padding block
Espaço horizontal e vertical dentro de cada item do submenu, de 0 a 100 px.

Ícone e texto

Icon size · Submenu icon size
Tamanhos dos ícones da barra e dos submenus, de 0 a 100 px.
Main menu gap: text - icon · Submenu gap: text - icon
Espaço entre o ícone e o texto, de 0 a 50 px.

Avançado

Ocultar texto do menu
Somente ícones na barra.
Ocultar texto do submenu
Somente ícones nos submenus.
Ocultar descrição do submenu
Oculta as descrições dos itens nos submenus.

Escolha onde a barra aparece

  1. Escolha os dispositivos

    Em Posição, ative Exibir no celular (1), Exibir no desktop (2) ou ambos.

    Ative a barra no celular (1) e no desktop (2) e escolha uma posição.

  2. Escolha uma posição

    Clique em um layout abaixo de cada botão:

    • Celular — Inferior, Superior, Centro à esquerda, Centro à direita, Inferior esquerdo ou Inferior direito.
    • Desktop — Centro inferior, Inferior esquerdo, Inferior direito, Largura total inferior, Centro à esquerda ou Centro à direita.

  3. Oculte ao rolar (opcional)

    Selecione Ocultar ao rolar para baixo para a barra não cobrir o conteúdo enquanto o comprador rola a página para baixo.

Configurações avançadas

Disponibilidade por mercado
Mostra a barra somente nos mercados selecionados. Veja Mostre menus por mercado.
Z-index do menu
Ordem de empilhamento. Aumente se outros elementos cobrirem a barra; diminua se a barra cobrir pop-ups.
Opacidade do menu
Transparência da barra, de 0 a 100%.
Margem inferior
Espaço entre a barra e a parte de baixo da tela.
Folha de estilo / CSS
CSS personalizado para a barra.
JavaScript
JavaScript personalizado para a barra.

Regras de exibição

Onde Configuração Efeito
Aba Posição Exibir no celular, Exibir no desktop Mostra ou oculta a barra inteira por dispositivo.
Aba Avançado Disponibilidade por mercado Mostra a barra inteira somente nos mercados selecionados.
Item > Visibilidade Ocultar no desktop, Ocultar no celular Oculta um item em um dispositivo.
Item > Visibilidade Ocultar quando estiver logado, Mostrar somente quando estiver logado Mostra um item somente para visitantes ou somente para clientes logados.
Item > Visibilidade Agendar publicação Mostra um item somente entre Data de início e Data de término.

Publique a barra

  1. Publique

    Clique em Salvar e depois em Publicar no canto superior direito, escolha o tema e confirme. A janela funciona como no mega menu (veja Publique um menu). O status muda de Rascunho para Ativo.

    Janela Publicar menu: (1) Escolha o tema, (2) Pré-visualização e Publicar

  2. Confira sua vitrine

    Abra sua vitrine em um celular ou em uma janela estreita do navegador.

Altere ou remova

  • Tirar da sua vitrine — clique em Desativar no topo do editor.
  • Restaurar uma versão anterior — abra a aba Histórico de versões. Veja Histórico de versões.

Solução de problemas

A barra não aparece na minha vitrine

A barra é carregada pela incorporação do app, como todos os menus. Confira se a incorporação do app está ativada para esse tema — veja Ative a incorporação do app.

Uma ação de Painéis abertos não faz nada

As ações de Open panels abrem o menu lateral, o carrinho lateral ou a pesquisa do seu próprio tema, então funcionam com temas populares. Se nada acontecer no seu, crie um link para a página em vez disso (por exemplo, Página do carrinho /cart) ou fale conosco.

A barra sobrepõe um botão de chat ou banner de cookies

Aumente a Margem inferior ou altere o Z-index do menu na aba Avançado, ou escolha outra posição na aba Posição.

Esta página foi útil?

Relatar um problema