É essencial um site ter um bom visual, com imagens de qualidades e uma estética bem elaborada. Aqui na Tray, você pode utilizar o Banner JavaScript como forma de divulgação de seus produtos e promoções.

Mas o que seria Banner JavaScript? Este é o famoso banner rotativo, ou banner giratório ou até mesmo, banner carrossel. Ao utilizar está ferramenta, é possível adicionar até 6 imagens para a exibição rotativa entre elas. 

É muito simples habilitar este recurso, e neste artigo, estarei te ensinando a como configurar o Banner JavaScript para exibição no seu e-commerce. Vamos lá?

Acesse: Marketing >> Banners da Loja.

bannersdaloja_.PNG

Ao acessar o item Banners da Loja, clique em Cadastrar Banner.

Agora será necessário que na opção "Deseja cadastrar banner Javascript?" marque "Sim", conforme visualizado abaixo:

extra2.PNG

Importante: Poderão ser inseridas até 6 imagens para que seja feita a troca entre elas. O tamanho máximo do arquivo é de 350 kbs. Os formatos que poderão ser utilizados para upload das imagens são: JPG, PNG e JPEG.

Para apresentar a opção para adicionar mais imagens, basta clicar em [incluir mais fases].

Em Local de Exibição, selecione a opção "Banner Home (Exibido somente na página inicial do site. Antes dos produtos)". Via de regra o banner principal deve ser cadastrado como Banner Home, porém, caso em sua loja não esteja sendo apresentado, valide este artigo para correção.

No item Exibição do banner, você conseguirá 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".

exibi__o.PNG

Agora será necessário configurar o "Tipo de exibição", que contem as seguintes opções:

  • Blind: Troca da imagem de forma horizontal em faixas verticais, sendo o inicio do centro para as laterais do banner.
  • Block: Troca da imagem de forma horizontal em faixas verticais, sendo o inicio do lado esquerdo com término no lado direito do banner.
  • Cube: Troca da imagem de forma horizontal em pequenas partes da imagem no formato de cubos, sendo início do canto superior esquerdo com término no canto inferior direito;
  • Cube Spread: Troca da imagem de forma aleatória em pequenas partes da imagem no formato de cubos;
  • Fade (padrão): Troca de imagens por com efeito de esmaecer;
  • Fade Four: Troca de imagens por com efeito de esmaecer utilizando a imagem do banner;
  • Glass Cube: Troca da imagem de forma horizontal em pequenas partes da imagem no formato de cubos, sendo início do canto esquerdo com término no canto direito;
  • Horizontal: Troca da imagem de forma vertical em faixas horizontal, sendo o inicio do lado direito com término no lado esquerdo;
  • Tube: Troca da imagem de forma aleatória em faixas verticais.

tipoexibi__o.PNG

No item "Tipo de navegação", deverá selecionar como será a navegação entre as imagens.

tiponavega__o.PNG

"Possibilitar play/pause no banner": É possível permitir que o cliente pause o banner, para que o cliente tenha mais tempo para analisar melhor o banner.

possibilitar.PNG

Em "Pausa na apresentação ao passar o mouse", caso o cliente passe o mouse sobre o banner, se a configuração estiver "SIM" , as transições irão parar, e o cliente poderá verificar melhor o banner.

pausanaaprese.PNG

Na configuração "Exibir barra de progresso", mostrará uma barra de progresso até que o banner altere a imagem e em seguida inicia uma nova barra de progresso.

barradeprogresso.PNG

Para definir a duração (permanência) de exibição de cada faixa de imagem, basta selecionar o tempo no item "Tempo de permanência do slide- intervalo de transição".

tempodeperman.PNG

Em "Velocidade da animação por fase do banner", você definirá o tempo da animação por fase do banner.

animacao.PNG

Por fim, deve-se definir onde o banner será exibido. É possível definir em categorias específicas ou em marcas específicas, para isso basta definir a opção que desejar.

seleciona1111.PNG

Feitas essas configurações, basta clicar na opção Salvar.

Após Salvar, você irá visualizar o banner criado e poderá Editar ou Remover, clicando nos itens em Ações, conforme abaixo: 

banners.PNG

Importante: Algumas configurações podem alterar de acordo com o tema publicado em sua loja virtual. Essas configurações se encontram em: Minha loja >> Design da loja >> Editar tema.

bannerhome.PNG

Caso queira saber mais sobre Banners da Loja, acesse este artigo.

Viu como é fácil habilitar este recurso? Agora basta criar seus banners e inserir na loja virtual.

 

Boas vendas!

Equipe Tray.

Vanderson Servilha 
Tem mais dúvidas? Envie uma solicitação

Comentários

  • giuliana girioli
    1

    Porque vocês limitam a 300kbs quando o banner é java e quando o banner é fixo (não java) não limitam? Minha loja é de MODA, tenho muito investimento em fotos boas e de alta qualidade para na hora de subir o banner ser obrigada a baixar a resolução da foto, muitas vezes o produto fica irreconhecível (brincos, colares etc).

  • Marcia Maria Silva Amador
    1

    Concordo com giuliana girioli ...! Está difícil ter um banner com boa resolução em 300kbs....

  • CKF Store
    0

    Preciso colocar banner em minhas categorias, porém já tenho 6 banners Extra1 em minha Home, como faço para Inserir os banners?

  • PEDRO NOGUEIRA DE GOES
    1

    300kbs é realmente muito pouco !

  • DOLCE PIMENTA MODAS
    1

    Concordo. 300kbs está deixando os banners com cara de material amador, sem qualidade.

  • bazar97
    0

    Porque eles não respondem às perguntas?

  • Vinicios Frasson
    1

    Em 2019 tu é obrigado a cadastrar um banner com 300K ? Que lixo, bando de inuteis, pra nao falar outra coisa,  não merecem o minimo de respeito.

    Daqui a pouco vão pedir pra salvarmos num disquete e mandar por carta pra eles cadastrar, 

     

    VARZEA 

  • bazar97
    1

    Se habilitassem pelo menos extensões webp ou jpeg2k o tamanho diminuiria muito.

    Artigos nessa seção

    Desenvolvido por Zendesk