O banner rotativo é uma combinação de imagens que se alternam durante um determinado período de tempo. Essa funcionalidade permite que sua loja se torne mais dinâmica e que seu cliente possa ver as promoções ofertadas por sua loja de maneira rápida e eficáz.

Esse artigo pode parecer um pouco complicado, no entanto, basta ler com atenção pois é mais fácil do que parece. Siga todos os passos e você conseguirá inserir seu banner rotativo em apenas alguns minutos.

1. Acesse o painel de controle de sua loja;
2. Quando a página se abrir, clique na aba Conteúdo e em Gerenciador de Imagens;
3. Clique no botão Enviar Imagens… e na janela que se abrir escolha as imagens que deseja utilizar no seu banner rotativo;
4. Após selecionar todas as imagens, clique em Enviar e espere o upload ser finalizado;
5. Guarde o nome de todas as imagens que serão utilizadas e de preferência utilize nomes fáceis. O nome das imagens está localizado logo acima de cada uma delas;
6. Clique na aba superior de sua loja, chamada Templates e quando a página se abrir clique no botão Ver arquivos do layout;
7. Uma nova janela se abrirá. Procure pelo código %%Discount.FreeShippingEligibility%% e cole abaixo dele (e em cima de %%Banner.TopBanner%%), o código apresentado após o passo 11 desse artigo (dentro da campo cinza);
8. No código copiado, altere o nome imagem1.jpg para o nome da primeira imagem que deseja exibir, com a respectiva extensão (.gif, .jpg, .png e etc);
9. Procure agora pelos dizeres Imagem 1 e altere para o título da imagem que deseja exibir em sua loja;
10. Logo após o título, há os dizeres da descrição, que estão como Descrição Imagem 1. Isso ocorre pois é necessário inserir os acentos da descrição com caractéres especiais. Veja aqui a lista de caractéres especiais para cada letra. Altere todos os acentos da Descrição e do Título com esses símbolos para que o banner rotativo reconheça os acentos. Faça isso para todas as imagens que deseja inserir. Imagem 1, Imagem 2, Imagem 3 e assim por diante;
11. Por fim, clique em Salvar e veja o resultado em sua loja.

Código

<br/>
<script type=”text/javascript” src=”javascript/jquery.js”></script>
<script type=”text/javascript”>

$(document).ready(function() {
slideShow();
});

function slideShow() {

$(‘#gallery a’).css({opacity: 0.0});
$(‘#gallery a:first’).css({opacity: 1.0});
$(‘#gallery .caption’).css({opacity: 0.7});
$(‘#gallery .caption’).css({width: $(‘#gallery a’).find(‘img’).css(‘width’)});
$(‘#gallery .content’).html($(‘#gallery a:first’).find(‘img’).attr(‘rel’))
.animate({opacity: 0.7}, 400);

//Tempo de exibicão da imagem. Cada 1 segundo é igual a 1000. O padrão é 6 segundos, portanto 6000. Altere como desejar.
setInterval(‘gallery()’,6000);

}

function gallery() {
var current = ($(‘#gallery a.show’)? $(‘#gallery a.show’) : $(‘#gallery a:first’));
var next = ((current.next().length) ? ((current.next().hasClass(‘caption’))? $(‘#gallery a:first’) :current.next()) : $(‘#gallery a:first’));
var caption = next.find(‘img’).attr(‘rel’);

next.css({opacity: 0.0})
.addClass(‘show’)
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass(‘show’);

$(‘#gallery .caption’).animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: ‘1px’}, { queue:true, duration:300 });
$(‘#gallery .caption’).animate({opacity: 0.7},100 ).animate({height: ‘100px’},500 );
$(‘#gallery .content’).html(caption);

}

</script>
<style type=”text/css”>
body{
font-family:arial
}

.clear {
clear:both
}

#gallery {
position:relative;
margin: 0 auto;
height:300px;
width:780px;
}

#gallery a {
float:left;
position:absolute;
}

#gallery a img {
border:none;
}

#gallery a.show {
z-index:500
}

#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}

#gallery .caption .content {
margin:5px
}

#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}

</style>
<div id=”gallery”>

<a href=”#” class=”show”>
<img src=”/product_images/uploaded_images/imagem1.jpg” alt=”” width=”630″ height=”300″ title=”” alt=”” rel=”Descrição Imagem 1″/>
</a>

<a href=”#”>
<img src=”/product_images/uploaded_images/imagem2.jpg” alt=”” width=”630″ height=”300″ title=”” alt=”” rel=”Descrição Imagem 2″/>
</a>

<a href=”#”>
<img src=”/product_images/uploaded_images/imagem3.jpg” alt=”” width=”630″ height=”300″ title=”” alt=”” rel=”Descrição Imagem 3″/>
</a>

<div class=”caption”><div class=”content”></div></div>

</div>

Â

Â

Caso você queira adicionar mais imagens, basta inserir o seguinte código e adaptá-lo:

<a href=”#”>
<img src=”/product_images/uploaded_images/imagem3.jpg” alt=”” width=”630″ height=”300″ title=”” alt=”” rel=”Descrição Imagem”/>
</a>

Â

Â

Opcional:

Â

Â

1. Para inserir um link em determinada imagem, altereremovendo o símbolo # e inserindo o link para a página.
   
2. Para alterar a largura de cada imagem, altere width=”580″ para a altura que desejar. Por exemplo: width=”300″ para uma largura de 300px.
3. Para alterar a altura de cada imagem, altere height=”360″ para a altura que desejar. Por exemplo: height=”150″ para uma altura de 150px.