Skip to main content

Menu Mobile


O que é?​

O menu mobile é um drawer* cujo conteúdo é composto de blocos adicionados à sua seção. Cada tipo de bloco dará origem a um modelo de layout diferente. Este menu fica escondido na lateral esquerda do site e só se torna visível quando acionado via clique ou toque no botão destinado a ele.

Drawer em tradução literal significa gaveta

Visualização dos blocos nas configurações da seção:


Objetivo​


O objetivo de termos um menu drawer funcionando no mobile é possibilitar o melhor uso de espaços do site, separando itens de categorização e destaques e, além disso, seguir o padrão de experiência e interfaces atuais do mercado.

Configurações​

Atualmente temos 5 tipos de elementos (blocos) disponíveis para compor o Menu Mobile.



O bloco do tipo Menu Dropdrown possui apenas uma configuração, na qual é selecionado um Link list a partir dos menus disponíveis na aba Navegação do Shopify. Esse será o menu com a categorização principal dos produtos no mobile, sendo composto de agrupamentos com submenus do tipo dropdown, revelados ou ocultos com o clique do usuário.



CTA Box​

O bloco do tipo CTA Box é composto de um título e um texto de CTA, estilizado como link, que ao ser clicado leva a alguma URL. Nesse bloco, portanto, temos as configurações:

  • Título ou HTML: input de html para o título que possibilita uso de SVG;
  • Texto: input de texto para descrição do CTA;
  • Link: URL para a qual o usuário é direcionado ao clicar no CTA


Por fim, é possível adicionar um banner dentro do drawer utilizando o bloco Banner, para o qual podem ser configurados:

  • Imagem do banner: seletor de imagem para o banner
  • Link do banner: URL para a qual o usuário é direcionado ao clicar na imagem
  • Banner Crossbranding: para sinalizar se ele redireciona para a outra loja contendo os itens de carrinho já adicionados pelo usuário;


O bloco do tipo Link é composto de um texto com link, tendo as configurações:

  • Texto ou HTML: input de texto ou html para possibilitar uso de SVG;
  • Link: URL para a qual o usuário é direcionado ao clicar no texto';
  • Cor do link: para setar a cor desejada do texto de link;


Botão​

O bloco do tipo Botão funciona com um botão com layout fixo, tendo as configurações:

  • Texto: input de texto;
  • Link: URL para a qual o usuário é direcionado ao clicar no botão;