Skip to main content

Header Principal

O que é?​



O menu principal do site possui responsividade para as versões desktop e mobile, adaptando os conteúdos de acordo com o tamanho da tela do usuário.

Ele conta com os itens de principais interações do site, como:

  • Logotipo com link para home;
  • Formulário de Busca;
  • Link de Encontre uma Loja;
  • Link para o Quiz da Pele;
  • Botão para o Minha Sallve;
  • Ícone de Minha Conta;
  • Ícone do Carrinho;

Objetivo​

Como em todos os sites, o header é uma seção padrão e obrigatória se tratando de interface, experiência e SEO;

O cabeçalho do seu site, também chamado de header, costuma ser a primeira coisa que alguém vê ao acessar a sua página. Por isso é importante que ele seja bem-estruturado e adequado para o seu site.

Entenda mais sobre a importância de um header

Configuração​

A configuração do Header Principal pode ser encontrada na pagina principal do Customize do Shopify, dentro do grupo Header. Nele, temos uma gama de tipos de blocos (elementos) que podemos adicionar para incrementar nossa section. Em seguida vamos conhecer cada tipo e suas possíveis configurações.


Busca​

Nada mais é que o formulário de buscar do header.

  • Lado de exibição: direito ou esquerdo do menu;

Carrinho​

Se trata do ícone de carrinho de compras que tem por objetivo abrir o Carrinho com o touch ou click. Este também é composto de um balão com contador de quantidade de itens já adicionados na cesta do usuário.

  • Lado de exibição: direito ou esquerdo do menu;

Drawer Button​

Se trata do ícone exibido em telas menores (tablets e mobiles) que tem por objetivo abrir o Menu Mobile com o touch. Esse ícone também é conhecido como menu hamburger.

  • Lado de exibição: direito ou esquerdo do menu;

Minha Conta​

É o ícone que faz referencia ao usuário e possui um dropdown com links de Minha Conta. Esses links são: entrar, cadastrar, minha sallve e consultar pedidos.

  • Lado de exibição: direito ou esquerdo do menu;

Botões​

São itens criados para serem exibidos ao lado direito ou esquerdo do menu com identidade de botão do site. Em suas configurações temos:


  • Lado de exibição: direito ou esquerdo do menu;
  • Texto ou HTML: que irá dentro do botão, podendo inserir svg de ícones;
  • URL: link de redirecionamento com o click caso haja;
  • Cor do botão;
  • Cor do texto;
  • Cor do botão ao passar o mouse;
  • Cor do texto ao passar o mouse;

Bem como os botões, são itens criados para serem exibidos ao lado direito ou esquerdo do menu. Em suas configurações temos:

  • Lado de exibição: direito ou esquerdo do menu;
  • Texto ou HTML: que irá dentro do botão, podendo inserir svg de ícones;
  • URL: link de redirecionamento com o click caso haja;
  • Cor do link;
  • Cor do link ao passar o mouse;