Os banners são uma excelente maneira de atrair a atenção dos clientes, promovendo novos produtos, campanhas e promoções, além de incluir links para sua loja ou outros sites.

    Neste artigo, você aprenderá como cadastrar um banner comum e também um banner JavaScript, conhecido como banner rotativo, carrossel ou giratório, ideal para destacar suas ofertas de forma dinâmica.

Como cadastrar banner

• Em seu Painel Administrativo, acesse "Marketing >> Banners";
• No canto superior direito, clique em “Cadastrar Banner”:

• Em seguida, uma nova tela será exibida. Nela, você poderá configurar o banner. Abaixo, vamos detalhar cada item passo a passo:

  • Nome do Banner: para fins de identificação, deverá inserir o nome desejado para o banner;
  • Deseja cadastrar carrossel de imagens?: O carrossel de imagens é também conhecido como "Banner Rotativo", àquele que apresenta imagens alternadas. Nele, é possível cadastrar até 6 imagens. Veja mais sobre, clicando neste link;
  • Imagem do Banner: neste local haverá um botão para selecionar um arquivo (imagem) para cadastrar no banner (valide o tamanho da imagem no link em "Local de Exibição" pouco mais abaixo). Os tipos de arquivos suportados são JPG, GIF, PNG e JPEG;
  • Local de exibição: essa configuração deverá ser feita de acordo com cada tema. Caso não tenha o manual do seu tema, acesse este link para ter acesso. Após localizar, acesse a parte que específica os locais de exibição. Por exemplo, "Banner Home", "Extra 1", "Extra 2", "Banner Baixo", entre outros. O banner principal (home) sempre será configurado como Banner Home;
  • Exibição do Banner: é possível selecionar uma data inicial e data final de exibição das imagens cadastradas para exibir na loja, ou se preferir, poderá habilitar a opção "por tempo indeterminado":

• Ao inserir uma imagem, você pode fazer algumas definições:
  • Título da Imagem: configure a mensagem que deseja que o seu cliente veja ao passar o mouse sobre a imagem;
  • Link: defina a página de destino do banner, ou seja, para qual endereço o cliente deve ser direcionado ao clicar no link. Este campo não se limita a links internos da plataforma; você pode incluir links externos, como um site institucional ou blog;
  • Abrir link em: escolha se o link será aberto em uma nova janela ou na mesma janela:

• Em "Selecione as categorias abaixo", você pode optar por exibir o banner em todas as categorias automaticamente ou selecionar manualmente as categorias desejadas. Essa opção é válida apenas para banners nas páginas de categorias
• Já em "Exibição do banner nas marcas", você pode selecionar todas as marcas de forma automática ou escolher manualmente as que preferir. Essa configuração se aplica exclusivamente a banners exibidos nas páginas de marcas.

    Com as configurações já feitas, não esqueça de salvar!

Como cadastrar banners rotativos

• Em seu Painel Administrativo, acesse "Marketing >> Banners";
• No canto superior direito, clique em “Cadastrar Banner”
• Na opção "Ativar carrossel de imagens?", marque a opção "Sim":

    Observe que, ao selecionar "sim", a plataforma permite a inclusão de 2 banners automaticamente. No entanto, clicando em "Adicionar mais imagens", você poderá adicionar até 6 imagens:

• Em "Local de Exibição", selecione a opção "Banner Home" (exibido apenas na página inicial, antes dos produtos). O banner principal deve ser cadastrado como "Banner Home". Caso ele não esteja aparecendo na sua loja, consulte este artigo para correção
• No item "Exibição do Banner", você pode definir uma data de início e fim para a exibição das imagens cadastradas. Se preferir, é possível habilitar a opção "por tempo indeterminado"

    Agora, é necessário configurar os "Efeitos do Carrossel", que oferece as seguintes opções:

• Blind: A imagem troca de forma horizontal em faixas verticais, começando do centro para as laterais do banner
• Block: A troca da imagem ocorre horizontalmente, começando pelo lado esquerdo e terminando no lado direito do banner
• Cube: A imagem troca de forma horizontal em pequenos blocos, começando no canto superior esquerdo e terminando no canto inferior direito
• Cube Spread: A troca da imagem é feita de maneira aleatória, em pequenas partes no formato de cubos
• Fade (padrão): As imagens trocam com um efeito de esmaecimento
• Fade Four: As imagens trocam com um efeito de esmaecimento, utilizando a imagem do banner
• Glass Cube: A troca da imagem ocorre horizontalmente em pequenos blocos, começando no canto esquerdo e terminando no canto direito
• Horizontal: A imagem troca de forma vertical em faixas horizontais, começando do lado direito e terminando no lado esquerdo
• Tube: A troca da imagem é feita de maneira aleatória em faixas verticais

• Na opção "Definir estilo de navegação do carrossel", você deve selecionar como será a navegação entre as imagens: nenhum, número de transição - alinhado à esquerda no topo do banner (padrão), marcadores (dots) - alinhado à esquerda na parte debaixo do banner

• Em "Incluir opções de play/pause?", é possível permitir que o cliente pause o banner, proporcionando mais tempo para que ele possa analisar melhor as informações apresentadas
• Em "Pausar imagem ao passar o mouse?", se a configuração estiver definida como "Sim", ao passar o mouse sobre o banner, as transições serão pausadas, permitindo que o cliente visualize melhor as informações
• Na "Mostrar barra de progresso do carrossel?", uma barra de progresso será exibida até que o banner altere a imagem, e em seguida, uma nova barra de progresso será iniciada
• Em "Duração de exibição de cada imagem (segundos)", basta selecionar o tempo desejado;
• Já em "Velocidade de transição entre as imagens (segundos)", você pode definir o tempo da animação por fase do banner.

    Por fim, deve-se configurar onde o banner será exibido. 

Boas Vendas!

Equipe Tray.