Olá pessoal neste tutorial vou mostrar como podemos usar melhor o uma das opções de topo da loja da Brasil na Web, o TOPO MODERNO.

Antes de mostrar os recursos deste topo vamos entender como funciona este conceito. Na Brasil na Web cada loja pode ter um topo diferente combinando suas cores da logo, assim cada loja pode ser única com diversas combinações, hoje temos disponíveis 10 tipos de topos diferentes para poder escolher e montar seu layout.

Cada um tem sua particularidade e layout diferente que pode ser combinado com suas cores, neste artigo vamos falar do TOPO MODERNO

Neste topo usamos o conceito de “mobile first” ou seja, pensamos primeiro na parte mobile mesmo em telas grandes que chamamos de “desktops”, este topo totalmente responsivo (adaptável a telas grandes e pequenas) segue uma tendência crescente do mercado e com ele é preciso de alguns ajustes finos para usar todo o seu potencial, vamos juntos aqui mostrar o passo a passo e como ele funciona.

Habilitando o Topo

Para habilitar este e qualquer outro, basta irmos no painel e lá no menu: Customização > Personalizar ao  entrar vamos na aba superior Configurações de Páginas e nas abas laterais vamos em Modelos de Topo  aqui basta rolar e clicar sobre o topo para selecionar e depois só salvar.

Personalizando cores

As cores podem ser personalizadas usando o mapa de cores, na aba superior Cores por áreas aqui basta seguir as cores como desejar, uma observação a cor do menu ficará tanto no menu principal (que fica escondido) quanto no menu secundário.

Feito as modificações você pode salvar.

Configurando o menu secundário

Você deve ter notado que temos um menu secundário neste topo, ele é feito de forma dinâmica com os itens que comumente são usados pelos ecommerces. 

Este menu secundário você pode usar para melhorar a conversão de suas vendas, colocando promoções, links de categorias, produtos ou páginas que julgue adequada para isso, por isso deixamos que você mesmo possa trocar esse menu, mas sempre terá a opção de “todos” que é onde abrirá o menu principal.

Após ativar o topo, temos uma nova posição no layout ativado, para saber mais sobre layouts e posições veja este treinamento aqui, essa nova posição se localiza ali no menu secundário.

Uma boa forma de suar é criar uma Área Personalizada (menu: Customização > Áreas Personalizadas ), ao adicionar um novo note que no item “Posição” temos agora Menu Destaque  e é aqui que vamos colocar nossos novos itens de menu

Agora na edição dos itens, para manter um layout organizado e limpo use a opção de lista com links, assim de forma automática os itens ficaram um do lado do outro, veja o exemplo abaixo:

Depois da lista com links prontas, basta agora marcar a opção de exibir título como não e em layout deixe para Todas as Páginas e Salvar

Comparação

Veja agora como era o topo

e como ficou

Agora mesmo em telas maiores temos um topo mais fluído e enxuto, se deixar a logo menor ainda ganhamos mais espaço ali no topo, agora só fazer uns ajustes de cores e pronto, temos um topo moderno!

Possíveis problemas – Clientes com CSS avançado

Alguns de nosso clientes possuem ajustes avançados de código que modificam o topo, ou tem um topo customizado (contratação de manutenção) nestes casos pode haver um conflito na hora de usar este topo, caso isso ocorra volte a opção do topo que estava antes e contate nossa equipe de suporte para lhe orientar e ajudar.

Em caso de dúvidas não deixe de acionar nossa equipe de suporte, até a próxima!