O banner principal é o primeiro grande destaque visual da loja, o espaço ideal para apresentar uma coleção, uma promoção ou a identidade da marca logo na página inicial. Na seção Banner principal, você define o tamanho, as imagens e a ação de cada slide.
Este é o terceiro artigo da série sobre a configuração completa do e-commerce. Se ainda não configurou o cabeçalho da loja, veja o artigo anterior antes de seguir com o banner.
Onde encontrar essa configuração
Para acessar, vá em e-commerce > personalizações > banner principal.
Tamanho do banner
Escolha a altura do banner principal da loja entre 4 opções:
- Sem banner: sem imagem no topo.
- Completo: ocupa a tela toda, 1920x1000px.
- Grande: alto impacto visual, 1920x800px.
- Médio: equilibrado, 1920x700px.
O banner se ajusta ao tamanho da tela de cada visitante, então essas medidas são uma referência, não uma garantia. Como existem infinitas combinações de tela e navegador, a imagem pode cortar um pouco nas bordas dependendo de onde for aberta, então evite colocar texto ou detalhes importantes muito perto da borda.
Imagens do banner
O banner funciona em formato de carrossel, e você pode adicionar quantos slides quiser clicando em Novo slide. Para cada slide, envie uma imagem para desktop e outra para celular, já que os dois formatos são exibidos de forma independente.
Capriche na arte para celular: a maioria dos clientes acessa a loja pelo próprio celular, então é essa versão do banner que a maior parte do público vai ver primeiro. Evite simplesmente cortar a imagem do desktop, o ideal é criar uma arte pensada para o formato vertical, com o texto e os elementos principais bem posicionados.
Texto e ação do banner
Cada slide pode receber um título, um texto de apoio e a posição em que esse conteúdo aparece sobre a imagem. Além disso, você escolhe como o slide se comporta ao ser clicado:
- Botão de ação: exibe um botão clicável sobre o banner, com texto e link próprios.
- Banner clicável: transforma o banner inteiro em um link, sem exibir nenhum botão.
Ao escolher Botão de ação, defina o texto do botão (por exemplo, “Ver coleção”), o link de destino, a cor do texto e a cor do botão.
Dica: se o botão já faz parte da arte do banner (desenhado direto na imagem, por exemplo no Canva ou Photoshop), não use a opção Botão de ação, já que isso criaria um botão duplicado sobre a imagem. Nesse caso, o ideal é usar Banner clicável, deixando toda a imagem como link, então o cliente é direcionado ao clicar em qualquer parte do banner.
Depois de configurar os slides, clique em Adicionar slide para incluir mais um, e em Salvar para aplicar as mudanças na loja.
Um banner que já direciona o cliente
Com o banner configurado, sua loja abre com um destaque visual forte e um caminho claro para onde o cliente deve ir. No próximo artigo da série, seguimos para a próxima seção da configuração do e-commerce. Alguma dúvida sobre essa seção? Fale com o nosso suporte.