LOJA VIRTUAL
Editor Visual
Como personalizar o Cabeçalho da loja virtual
Publicado em: 4/5/2021, 3:35:00 PM
Dentro do Menu Loja Virtual você pode personalizar o cabeçalho de sua loja virtual. Configure-o conforme as instruções abaixo.

Importante!

O Cabeçalho é uma configuração padrão, portanto, as edições definidas serão inseridas igualmente em todas as páginas de sua loja.
O Cabeçalho e Rodapé são as únicas seções fixas e não disponíveis para ordenação em seu site.
Assista o tutorial em vídeo:
Ou, se preferir, siga as instruções abaixo para configurar o cabeçalho da sua loja virtual:

Como editar o cabeçalho

1º Acesse o menu de Loja Virtual e clique em Meus temas.
2º Clique em Personalizar.
3º Clique em Cabeçalho, faça as edições desejadas e, para finalizar, clique em Salvar.

Como configurar a aparência do Cabeçalho

Você pode configurar a Aparência do cabeçalho conforme as instruções abaixo.
Clique na aba de Aparência e faça as edições no cabeçalho.
  • Estilo do conteúdo: Defina se o conteúdo do cabeçalho ficará centralizado ou adaptável a largura da tela.
  • Estilo do cabeçalho: Defina se o cabeçalho será com o Logo na esquerda/menu abaixo, Logo centralizado/menu abaixo, Logo na esquerda/menu ao lado ou Logo centralizado/menu escondido.
  • Inverter cores: Selecione essa opção para que as cores de fundo e de ícones do cabeçalho sejam invertidas.
  • Exibir a busca de produtos: Selecione essa opção para definir a exibição ou não do ícone de pesquisa de produtos.
  • Transparência do cabeçalho: Defina o nível de transparência do seu cabeçalho.
  • Intensidade da borda: Defina o nível de intensidade da borda do cabeçalho.
  • Imagem de fundo do cabeçalho: Caso desejar, aqui você pode inserir uma imagem para o fundo do cabeçalho.
  • Cor de fundo: Selecione uma cor para o fundo do cabeçalho.
  • Cor primária: A cor primária define qual a cor dos botões nos ícones de carrinho de compras e do menu de minha conta.
  • Cor de destaque: A cor de destaque define as cores dos botões nos ícones de pesquisa de produtos, login e quantidade de produtos no carrinho de compras.
  • Cor de borda: Defina qual a cor da borda do cabeçalho.

Como configurar o Cabeçalho Mobile

Na aba de Cabeçalho Mobile defina como será a exibição do cabeçalho através de dispositivos móveis.
Clique na aba de Cabeçalho Mobile e faça as edições.
  • Estilo do cabeçalho mobile: Defina se a busca aparecerá apenas em tela cheia ou se ela ficará sempre visível.
  • Exibir dropdown de carrinho: Ao ativar esta opção, será exibido para o usuário um resumo do carrinho com o botão de finalizar compra. Ao manter a opção desativada, o usuário é redirecionado direto para o carrinho quando clica em "comprar" no seu site.
  • Exibir cabeçalho fixo: Defina se o cabeçalho da versão mobile será fixo ou acompanhará a rolagem da tela.

Como configurar o Cabeçalho Fixo

As configurações de Cabeçalho Fixo definem como o cabeçalho será exibido quando estiver fixado na tela.
Clique na aba de Cabeçalho Fixo e faça as edições no Cabeçalho Fixo.
  • Tamanho máximo do logo do cabeçalho fixo em px: Defina o tamanho máximo do logo inserido no cabeçalho.
  • Estilo do cabeçalho fixo: O cabeçalho fixo aparece quando você rola a tela da loja e ele permanece no topo, você pode definir o estilo dele. Simplificado: uma versão simplificada do cabeçalho, onde fica visível o logo da loja, campo de busca e ícones de Minha Conta e Carrinho, ou Minimalista: onde não aparece o campo de busca.
  • Inverter cores do cabeçalho fixo: Selecione essa opção para que as cores de fundo e de ícones do cabeçalho fixo sejam invertidas.
  • Logo aplicado em fundo claro: Insira um logo para ser aplicado nos fundos claros do cabeçalho fixo.
  • Logo aplicado em fundo escuro: Insira um logo para ser aplicado nos fundos escuros do cabeçalho fixo.

Como configurar os Logos

Você pode inserir logos no cabeçalho, configurando conforme as instruções abaixo.
Clique na aba Logos e faça as edições desejadas.
  • Logo aplicado em fundo claro: Insira um logo para ser aplicado nos fundos claros.
  • Logo aplicado em fundo escuro: Insira um logo para ser aplicado nos fundos escuros.
  • Logo mobile: Insira o logo que será exibido no cabeçalho na versão mobile.
  • Tamanho máximo do logo em px: Defina o tamanho máximo do logo.
  • Tamanho máximo do logo mobile em px: Defina o tamanho máximo do logo mobile.

Como configurar os Ícones Customizados

Customize os ícones que serão exibidos no cabeçalho conforme as instruções abaixo.
Clique na aba de Ícones Customizado e faça as edições necessárias.
  • Ícone de carrinho escuro: Defina o ícone de carrinho para o cabeçalho escuro.
  • Ícone de carrinho claro: Defina o ícone de carrinho para o cabeçalho claro.
  • Ícone de usuário escuro: Defina o ícone de usuário para o cabeçalho escuro.
  • Ícone de usuário claro: Defina o ícone de usuário para o cabeçalho claro.
  • Ícone de busca escuro: Defina o ícone de busca para o cabeçalho escuro.
  • Ícone de busca claro: Defina o ícone de busca para o cabeçalho claro.

Como configurar o Texto de Alerta

O texto de alerta é uma configuração para que você exiba informações importantes, ou alertas, no cabeçalho de sua loja.
Clique na aba de Texto de Alerta e faça as edições desejadas.
  • Exibir texto: Selecione essa opção caso você deseja exibir o texto de alerta.
  • Texto de alerta: Insira o texto de alerta.
  • Cor de fundo: Defina aqui a cor de fundo do texto de alerta.
  • Cor de texto: Defina aqui a cor do texto de alerta.

Como configurar Menus no cabeçalho

Você pode definir a posição dos seus menus nessa aba configurando conforme as instruções abaixo.
Clique na aba de Menus e faça as edições desejadas.
  • Menu topo: Defina qual menu será exibido no menu topo.
  • Menu principal: Defina qual menu será exibido no menu principal de sua loja.
  • Menu departamentos: Defina qual menu será exibido no menu de departamentos de sua loja.
  • Inverter cores: Selecione essa opção para inverter as cores dos menus de sua loja.
  • Exibir dropdown de menu em lista: Ao ativar esta opção, será exibido na tela de navegação para o usuário um resumo do carrinho com o botão de finalizar compra. Ao manter a opção desativada, o usuário é redirecionado direto para o carrinho quando clica em "comprar" no seu site.
  • Fundo do menu: Defina a cor de fundo do menu.
  • Cor do menu: Defina qual a cor do menu.
  • Fundo de departamento: Defina a cor de fundo do menu de departamento.
  • Cor de departamento: Defina a cor do menu de departamento.

Como configurar as Informações de contato

Você pode inserir as suas informações de contato que serão exibidas no menu de rodapé da loja.
Na aba de Informações de Contato, clique em Adicionar bloco e faça as edições desejadas.
  • Tipo de atendimento: Selecione o tipo do contato que você irá inserir.
  • Contato/Informação: Insira o endereço do contato desejado.

Importante!

Lembre-se de clicar em Salvar após finalizar as edições.
Para uma guia deste tópico, valide os itens ao lado direito.