Pular para o conteúdo
GloboGlobo Docs
Instalar aplicação
Português (Portugal)

Barra de navegação inferior para telemóvel

Adicione uma barra fixa de ícones, ao estilo de uma aplicação, com ligações e ações rápidas para os seus clientes.

Guia prático Pro Navigation 10 min de leitura

A barra fica no ecrã enquanto os clientes se deslocam pela página, como a barra de separadores de uma aplicação móvel, e dá acesso com um toque à página inicial, ao menu, ao carrinho, à pesquisa, ao chat ou a uma chamada telefónica. Um item também pode abrir um pequeno submenu, como um item Mais com ligações para a conta, o contacto e as perguntas frequentes.

O editor da barra inferior: separadores de definições (1) e pré-visualização em tempo real (2). Mude o dispositivo da pré-visualização com os botões no canto inferior esquerdo da pré-visualização.

Os separadores de definições são Menu items, General, Typography, Colors, Position, Advanced e Version history (itens de menu, geral, tipografia, cores, posição, avançado e histórico de versões).

Criar uma barra inferior

  1. Crie a barra

    Na página Home (página inicial) da aplicação, clique em Add bottom navigation (adicionar navegação inferior), ou no Menu manager (gestor de menus) clique em Create menu e escolha Mobile bottom bar.

    Home: (1) ações rápidas para criar ou importar um menu, (2) o botão que ativa a incorporação da aplicação

  2. Configure os itens

    Em Menu items, edite os itens predefinidos e adicione os seus. Consulte Adicionar e editar itens.

    O editor da barra inferior: separadores de definições (1) e pré-visualização em tempo real (2). Mude o dispositivo da pré-visualização com os botões no canto inferior esquerdo da pré-visualização.

  3. Defina o estilo da barra

    Ajuste os separadores General, Typography e Colors. Consulte Definir o estilo da barra.

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

  4. Escolha onde aparece

    Em Position, escolha os dispositivos e a posição no ecrã. Consulte Escolher onde a barra aparece.

    Ative a barra no telemóvel (1) e no computador (2) e escolha uma posição.

  5. Guarde e publique

    Clique em Save e, depois, em Publish no canto superior direito. Consulte Publicar a barra.

Adicionar e editar itens

  1. Mostre as ações do item

    Em Menu items, passe o rato por cima de um item para ver Edit, Duplicate e Delete (editar, duplicar e eliminar). Arraste um item pela pega para o reordenar.

    Passe o rato por cima de um item para o editar, duplicar ou eliminar.

  2. Adicione itens e submenus

    Clique em Add item (adicionar item) para adicionar um item a esse nível ou em Add submenu num item para aninhar itens por baixo dele. Os itens aninhados abrem como submenu, até três níveis.

  3. Defina o ícone, o título e a ligação

    Clique em Edit para abrir Edit menu item. Escolha um Icon (clique em Change), introduza um Title e clique no campo Link.

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

  4. Escolha uma ação

    Em Select link, clique em Select ao lado de uma ação (1). A caixa Link (2) recebe o início da ligação, por exemplo /collections/ para Products by collection. Complete-a como indicado na coluna Syntax, por exemplo /collections/summer-sale, e clique em Update (3).

    Clique em Select (1), complete a ligação (2) e clique em Update (3).

Definições do item

Icon (ícone)
Clique em Change para escolher um ícone ou carregar uma imagem.
Title (título)
O texto por baixo do ícone.
Link (ligação)
O que acontece ao tocar. Clique para abrir Select link (consulte Ações dos itens).
Open in new tab (abrir num novo separador)
Abre a ligação num novo separador do navegador.
Description (descrição)
Texto curto opcional apresentado com o item.
Icon size (tamanho do ícone)
Tamanho do ícone em px.
Box > Border radius (raio do canto)
Arredonda os cantos da caixa do item, de 0 a 100 px.
Box > Box padding (espaçamento interno)
Espaço dentro da caixa do item, de 0 a 100 px.
Box > Position (posição)
Desloca o item para a esquerda (negativo) ou para a direita (positivo), de -100 a 100 px.
Color (cor)
Cores do texto, do ícone, do fundo do ícone e do fundo apenas para este item, cada uma com uma cor ao passar o rato. Clear settings repõe as cores da barra.
Badge (etiqueta)
Uma pequena etiqueta no item, com Title, Badge text color e Badge background color.
Visibility (visibilidade)
Oculta o item em alguns dispositivos ou para alguns clientes, ou mostra-o apenas entre duas datas. Consulte Regras de apresentação.
Advanced (avançado)
Extra classname adiciona uma classe CSS para CSS personalizado. Divide adiciona uma linha divisória ao lado do item.

Ações dos itens

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

1. Link to your store internal pages (páginas internas da loja)
Exact short url /[your-url], Home page /, All products /collections/all, Products by collection /collections/[collection-handle], A product detail /products/[your-product-shorturl], All blog posts /blogs/news, A blog posts detail /blogs/news/[your-blog-shorturl], A page detail /pages/[your-page-shorturl], Cart page /cart, Search page /search, Contact form /pages/contact.
2. Open panels (Compatible with popular themes) (abrir painéis)
Open Menu (mobile) gm-open:MobileMenu, Open Cart gm-open:Cart, Open Search gm-open:Search.
3. Open other applications (E.g. Shopify inbox...) (abrir outras aplicações)
Open Chatbox gm-open:Inbox abre o chat do Shopify Inbox.
4. Scroll on page (deslocar na página)
Scroll to top gm-scroll:Top, Scroll to bottom gm-scroll:Bottom, Scroll to a on-page element gm-scroll:OnPage(htmlElement).
5. Call javascript function (chamar uma função JavaScript)
gm-javascript:Function executa uma função JavaScript no seu site.
6. Support tools (ferramentas de apoio)
Make a phone call tel:, Send a SMS message sms:, Send an email mailto:, Chat with Messenger, Whatsapp, Telegram, Line ou Zalo.
7. Share (partilhar)
Copy current URL gm-share:CopyUrl, Share to Facebook gm-share:Facebook, Share to X (Twitter) gm-share:X.
8. Link to extend websites (sites externos)
Full url (qualquer endereço web completo), Don’t redirect #.
Secções 2 a 4: abrir painéis, outras aplicações e deslocamento.
Secções 5 e 6: JavaScript e ferramentas de apoio.
Secções 7 e 8: partilha e ligações externas.

Exemplos:

  • gm-scroll:Top(150): desloca até ao topo, deixando uma margem de 150 px.
  • gm-scroll:OnPage(#page-title): desloca até ao 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 um chat do WhatsApp. Use o indicativo do país, sem +.

Definir o estilo da barra

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

Main menu (nível 1)

Menu rounded (cantos do menu)
Raio dos cantos da barra, de 0 a 50 px.
Item spacing (espaço entre itens)
Espaço entre os itens, de 0 a 50 px.
Padding inline · Padding block (espaçamento interno)
Espaço horizontal e vertical dentro de cada item, de 0 a 100 px.
Use box shadow (usar sombra)
Adiciona uma sombra à volta da barra.

Submenu (níveis 2 e 3)

Submenu position (posição do submenu)
Left, Right, Center ou Full (largura total).
Submenu open style (estilo de abertura do submenu)
Dropdown (pendente) ou Slideout (painel deslizante).
Submenu width (largura do submenu)
De 100 a 900 px.
Padding inline · Padding block (espaçamento interno)
Espaço horizontal e vertical dentro de cada item do submenu, de 0 a 100 px.

Icon & text (ícone e texto)

Icon size · Submenu icon size (tamanhos dos ícones)
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 texto e ícone)
Espaço entre o ícone e o texto, de 0 a 50 px.

Advanced (avançado)

Hide menu text (ocultar o texto do menu)
Apenas ícones na barra.
Hide submenu text (ocultar o texto do submenu)
Apenas ícones nos submenus.
Hide submenu description (ocultar a descrição do submenu)
Oculta as descrições dos itens nos submenus.

Escolher onde a barra aparece

  1. Escolha os dispositivos

    Em Position, ative Display on mobile (1) (mostrar no telemóvel), Display on desktop (2) (mostrar no computador) ou ambos.

    Ative a barra no telemóvel (1) e no computador (2) e escolha uma posição.

  2. Escolha uma posição

    Clique num esquema por baixo de cada interruptor:

    • Telemóvel: Bottom, Top, Center left, Center right, Bottom left ou Bottom right.
    • Computador: Bottom center, Bottom left, Bottom right, Bottom full width, Center left ou Center right.

  3. Ocultar durante o deslocamento (opcional)

    Selecione Hide when scrolling down (ocultar ao deslocar para baixo) para que a barra não tape o conteúdo enquanto o cliente se desloca para baixo.

Definições avançadas

Market availability (disponibilidade por mercado)
Mostra a barra apenas nos mercados selecionados. Consulte Mostrar menus por mercado.
Menu z-index
Ordem de sobreposição. Aumente-a se outros elementos taparem a barra; reduza-a se a barra tapar janelas pop-up.
Menu opacity (opacidade do menu)
Transparência da barra, de 0 a 100%.
Bottom margin (margem inferior)
Espaço entre a barra e a parte inferior do ecrã.
Stylesheet / CSS (folha de estilos)
CSS personalizado para a barra.
JavaScript
JavaScript personalizado para a barra.

Regras de apresentação

Onde Definição Efeito
Separador Position Display on mobile, Display on desktop Mostra ou oculta toda a barra por dispositivo.
Separador Advanced Market availability Mostra toda a barra apenas nos mercados selecionados.
Item > Visibility Hide on desktop, Hide on mobile Oculta um item num dispositivo.
Item > Visibility Hide when logged in, Only show when logged in Mostra um item apenas a visitantes ou apenas a clientes com sessão iniciada.
Item > Visibility Schedule publishing Mostra um item apenas entre Date starting e Date ending.

Publicar a barra

  1. Publique

    Clique em Save e, depois, em Publish no canto superior direito, escolha o tema e confirme. A janela funciona como para um mega menu (consulte Publicar um menu). O estado passa de Draft para Active.

    Janela Publish menu: (1) Choose theme, (2) Preview e Publish

  2. Verifique a loja online

    Abra a loja online num telemóvel ou numa janela estreita do navegador.

Alterar ou remover

  • Retirar da loja online: clique em Disable no topo do editor.
  • Restaurar uma versão anterior: abra o separador Version history. Consulte Histórico de versões.

Resolução de problemas

A barra não aparece na loja online

A barra é carregada através da incorporação da aplicação, como todos os menus. Confirme que a incorporação da aplicação está ativada nesse tema; consulte Ativar a incorporação da aplicação.

Uma ação Open panels não faz nada

As ações Open panels abrem a gaveta do menu, a gaveta do carrinho ou a pesquisa do próprio tema, por isso funcionam com temas populares. Se nada acontecer no seu tema, ligue antes para a página (por exemplo Cart page /cart) ou contacte-nos.

A barra sobrepõe-se a um botão de chat ou a uma faixa de cookies

Aumente Bottom margin ou altere Menu z-index no separador Advanced, ou escolha outra posição no separador Position.

Esta página foi útil?

Comunicar um problema