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.
- Acesse o painel de controle de sua loja;
- Quando a página se abrir, clique na aba Conteúdo e em Gerenciador de Imagens;
- Clique no botão Enviar Imagens… e na janela que se abrir escolha as imagens que deseja utilizar no seu banner rotativo;
- Após selecionar todas as imagens, clique em Enviar e espere o upload ser finalizado;
- 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;
- Clique na aba superior de sua loja, chamada Templates e quando a página se abrir clique no botão Ver arquivos do layout;
- 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);
- 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);
- Procure agora pelos dizeres Imagem 1 e altere para o tÃtulo da imagem que deseja exibir em sua loja;
- 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;
- 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:
Â
Â
- Para inserir um link em determinada imagem, altereremovendo o sÃmbolo # e inserindo o link para a página.
- Para alterar a largura de cada imagem, altere width=”580″ para a altura que desejar. Por exemplo: width=”300″ para uma largura de 300px.
- Para alterar a altura de cada imagem, altere height=”360″ para a altura que desejar. Por exemplo: height=”150″ para uma altura de 150px.
Como criar um Banner Rotativo em sua loja?
Este artigo foi útil?
(96 de 96 pessoas acharam este artigo útil.)