Tudo sobre topo e rodapé

A aba de Topo e rodapé dentro do Editor visual conta com diversas opções de personalização que podem deixar a sua loja muito mais profissional e atrativa.

Ambas as seções são importantes e funcionam como espécies de colunas que sustentam uma casa, fornecendo, ainda, estrutura e organização.

Conheça mais detalhes sobre esses espaços e como eles podem ser importantes na sua loja virtual.

Topo

O Topo pode tornar a navegação pela sua loja mais eficiente, sendo o local ideal para incluir menus de navegação e facilitando a busca de produtos por parte dos usuários. Aliás, é importante contar com uma barra de pesquisa por aqui, combinado?

Além disso, esse é o espaço perfeito para incluir logotipo, slogan e informações de contato da sua loja virtual, ajudando a estabelecer a identidade da marca.

Lembre-se: uma navegação eficiente melhora a experiência do usuário.

Você pode editar o topo do seu site clicando em Loja virtual > Editor visual > Mais ações > Editor avançado.

Selecione a opção Cabeçalho, onde verá todas as configurações.

Aparência

• Estilo do conteúdo: Define se o conteúdo que compõe o cabeçalho será centralizado ou adaptável a largura da tela.
• Estilo do cabeçalho: Define onde onde ficará a posição da logo e do menu de sua loja.
  Ao optar pelas opções: Logo centralizado/ menu abaixo, Logo na esquerda/ menu ao lado e Logo centralizado / menu escondido a barra de pesquisa não ficará visível em seu site.
  Optando pela opção Logo na esquerda / menu ao lado, a barra de pesquisa será visível.

• Inverter cores: Inverter as cores do cabeçalho significa trocar as cores de fundo e de texto do cabeçalho. Por exemplo, se o cabeçalho original tem um fundo branco com texto preto, após inverter as cores, o fundo será preto e o texto será branco.
• Exibir a busca de produtos: Define se exibirá a barra de busca.
• Transparência do cabeçalho: Define o grau de visibilidade do fundo do cabeçalho. Transparência pode ser usada para permitir que parte do conteúdo ou imagem atrás do cabeçalho seja visível através dele.
• Intensidade da borda: Define as características visuais da borda, pode ser configurada para ser mais ou menos visível.
• Imagem de fundo do cabeçalho: Se optar por inserir uma imagem ao invés de cor.
• Cor de fundo: Define a cor de fundo do cabeçalho.
• Cor primária: Define a cor do menu departamentos.
• Cor de destaque: Define a cor dos ícones padrão.
• Cor de borda: Define as cores das bordas como por exemplo da barra de pesquisa.

Cabeçalho mobile

• Estilo do cabeçalho mobile: Ao optar pela opção Busca em tela cheia, exibe apenas o ícone da lupa. Ao optar pela opção Busca sempre visível, é exibido uma barra de busca.
• Exibir dropdown de carrinho: Permite aos usuários ver uma prévia dos itens adicionados ao carrinho de compras sem precisar ir diretamente à página do carrinho. Essa funcionalidade está inativa, mesmo ativando não surtirá nenhum efeito.
• Exibir cabeçalho fixo: Define se ao navegar no site pelo mobile, será exibido o cabeçalho fixo.

Cabeçalho Fixo

• Tamanho máximo do logo do cabeçalho fixo em px: Ao definir o tamanho da logo no cabeçalho fixo, o cabeçalho aumentará proporcionalmente conforme o tamanho da logo.
• Estilo do cabeçalho fixo: A opção Simplificada torna o cabeçalho fixo mais intuitivo para os clientes, exibindo elementos como a barra de buscas e outras informações úteis. Já a opção Minimalista reduz a quantidade de informações exibidas, focando principalmente na logo. Por fim, a opção Estilo de Cabeçalho mantém o cabeçalho fixo exatamente como ele está configurado no site.
• Inverter cores do cabeçalho fixo: Inverter as cores do cabeçalho fixo significa trocar as cores de fundo e de texto do cabeçalho.
• Logo aplicado em fundo claro: É utilizado quando a logo escura é posicionada sobre superfícies claras.
• Logo aplicado em fundo escuro: É utilizado quando a logo clara é posicionada sobre superfícies escuras.

Logos

• Logo aplicado em fundo claro: É utilizado quando a logo escura é posicionada sobre superfícies claras.
• Logo aplicado em fundo escuro: É utilizado quando a logo clara é posicionada sobre superfícies escuras.
• Logo mobile: Logo que será exibida em dispositivos móveis.
• Tamanho máximo do logo em px: Define o tamanho da logo no cabeçalho.
• Tamanho máximo do logo mobile em px: Define o tamanho da logo nos dispositivos móveis.

Ícones customizados

• Ícone de carrinho claro/escuro: Local para fazer upload da imagem ícone de carrinho, seja para fundo claro ou escuro.
• Ícone de usuário claro/escuro: Local para fazer upload da imagem do ícone de usuário, seja para fundo claro ou escuro.
• Ícone de busca claro/escuro: Local para fazer upload da imagem do ícone de busca, seja para fundo claro ou escuro.

Texto de Alerta

• Exibir texto: Ao marcar essa opção, o texto de alerta será exibido no topo do seu site. Caso você desmarque a opção, o alerta deixará de ser exibido.
• Exibir texto de alerta mobile: Ao marcar essa opção, o texto de alerta será exibido no topo do site em dispositivos móveis.
• Cor de fundo: Define a cor de fundo do texto de alerta.
• Cor de texto: Define a cor de texto do texto de alerta.

Menus

• Menu topo: O menu selecionado nessa opção será exibido na parte superior do cabeçalho, posicionado acima dos ícones.
• Menu principal: O menu selecionado nessa opção será exibido em formato de lista no cabeçalho.
• Menu departamentos: O menu selecionado nesta opção será exibido como três barrinhas no canto do cabeçalho, indicando a presença de um menu suspenso de navegação.
• Inverter cores: Inverter as cores significa trocar as cores de fundo e de texto dos menus.
• Exibir o Dropdown de menu em lista: Ao ativar essa opção, uma lista de opções aparece ao clicar ou passar o mouse sobre os itens do menu.
• Fundo do menu: Define a cor de fundo do menu
• Cor do menu: Define a cor do texto do menu.
• Fundo de departamento: Define a cor do fundo do menu departamento (três barrinhas).
• Cor de departamento: Define a cor das três barrinhas.

Informações de contato

Ao clicar em Adicionar bloco, você poderá escolher quais opções de contato deseja exibir no cabeçalho, como Telefone, WhatsApp, Skype, E-mail, Horário e Telegram. Isso permite que você personalize quais informações de contato serão facilmente acessíveis para os visitantes do seu site.

Rodapé

O Rodapé da sua loja virtual também é um espaço interessante para adicionar informações importantes, como políticas de privacidade, termos de serviço, informações de contato e bandeiras de pagamento aceitas.

Um Rodapé bem estruturado também contribui para o desempenho da sua loja em relação aos motores de busca, ou seja, sua loja pode ganhar boas posições nas pesquisas por ter essa seção bem configurada.

Além disso, esse espaço contribui para profissionalizar a aparência da sua loja, atuando como uma assinatura elegante no final de uma carta e dando a sensação de conclusão e confiança.

No editor avançado, selecione a opção Rodapé, onde verá todas as configurações.

Aparência

• Estilo do conteúdo: Define se o conteúdo que compõe o cabeçalho será centralizado ou adaptável a largura da tela.
• Estilo do rodapé: Define a quantidade de seções e menus que serão exibidos no rodapé do site.

• Inverter cores: Inverter as cores do rodapé significa trocar as cores de fundo e de texto. Por exemplo, se o rodapé original tem um fundo branco com texto preto, após inverter as cores, o fundo será preto e o texto será branco.
• Imagem de fundo do rodapé: Se desejar, pode fazer upload de uma imagem para definir de fundo no rodapé.
• Cor de fundo: Define a cor de fundo do rodapé.
• Cor primária: Define a cor de ícones como pagamentos, segurança e central de atendimento.
• Cor secundária: Define a cor dos ícones de redes sociais e botão do newsletter.
• Cor de borda: Define as cores das bordas como por exemplo do newsletter.
• Intensidade da borda: Define as características visuais da borda, pode ser configurada para ser mais ou menos visível.
• Margem de cima de cada seção: Define o tamanho da margem de cima do rodapé.
• Margem de baixo de cada seção: Define o tamanho da margem debaixo do rodapé.

Logos

• Logo aplicado em fundo claro: É utilizado quando a logo escura é posicionada sobre superfícies claras.
• Logo aplicado em fundo escuro: É utilizado quando a logo clara é posicionada sobre superfícies escuras.
• Logo mobile: Logo que será exibida em dispositivos móveis.
• Tamanho máximo do logo em px: Define o tamanho da logo no cabeçalho.
• Tamanho máximo do logo mobile em px: Define o tamanho da logo nos dispositivos móveis.

Menus

Define os menus de acordo com o estilo de rodapé selecionado.

Títulos

Local onde pode alterar os títulos exibidos no rodapé, como de newsletter, atendimento, pagamento, segurança e certificado.

Bandeiras de Pagamento

Define quais bandeiras de pagamento serão exibidas no rodapé e se elas serão mostradas com cores ou em preto e branco.

Selos de segurança

Define quais selos de segurança serão exibidos no rodapé.

Certificados

Local onde você pode inserir o código de um certificado que possui, garantindo que ele seja exibido no seu site.

Texto do rodapé

Local onde pode alterar o texto exibido no rodapé.

Logo de parceiro

Local onde você pode inserir a logo de um parceiro e adicionar o link para o site dele. Isso permitirá que os visitantes cliquem na logo e sejam redirecionados diretamente para o site do parceiro.

Atendimento

Ao clicar em Adicionar bloco, você poderá escolher quais opções de contato deseja exibir no rodapé, como Telefone, WhatsApp, Skype, E-mail, Horário e Telegram. Isso permite que você personalize quais informações de contato serão facilmente acessíveis para os visitantes do seu site.

Após aprender a configurar o topo e o rodapé do seu site, você está pronto(a) para personalizá-lo de acordo com as necessidades do seu negócio. Lembre-se de que essas seções são fundamentais para a experiência do usuário e podem impactar diretamente na navegabilidade e na percepção da sua marca. Portanto, dedique um tempo para ajustar cada detalhe, garantindo que o design e as informações estejam alinhados com a identidade visual da sua loja!