- Seção
FC 14333 :: Como inserir um banner na loja com rodízio de imagens?
Utilize o recurso de slideshow para divulgar as promoções e novidades da loja.
Veja o passo a passo para inserir os banners rotativos:
1º Passo
Inclua as linhas abaixo no início do arquivo Home.htm:
<link rel="stylesheet" type="text/css" href="/js/MagicToolbox/MagicSlideshowV2/magicslideshow.css" /> <script type="text/javascript" src="/js/MagicToolbox/MagicSlideshowV2/magicslideshow.js"></script>
Envie as imagens dos banners para a pasta IMAGES da loja.
3º Passo
Escolha um dos exemplos de banner rotativo listados abaixo. Defina em qual local deseja inserí-lo (BarraTopo.htm, rodape.htm, home.htm etc). Neste arquivo, insira as linhas do exemplo escolhido, alterando as dimensões (width e height), a URL e o nome das imagens.
Obs: Caso as imagens não estejam aparecendo no slide pedimos que realize um dos procedimentos abaixo:
1º Acesse o arquivo no qual o código de um dos exemplos foi inserido e adicione o Script "<script>sF$.fnCopyContentTop();FCLib$.execLazyLoad();</script>", logo abaixo da div com as imagens do seu slide, segue exemplo:
<div class="MagicSlideshow" data-options="width:100%;height:235px;"> <a href="http://www.SeuEnderecoLojaVirtual.com.br"><img src="<BaseLoja>images/FC14333IMG1.jpg" /></a> <a href="http://www.SeuEnderecoLojaVirtual.com.br"><img src="<BaseLoja>images/FC14333IMG2.jpg" /></a> <a href="http://www.SeuEnderecoLojaVirtual.com.br"><img src="<BaseLoja>images/FC14333IMG3.jpg" /></a> </div> <script>sF$.fnCopyContentTop();FCLib$.execLazyLoad();</script> |
Obs: Caso tenha adicionado o código no arquivo Banners.htm utilize o código abaixo para correção:
<div class="MagicSlideshow" data-options="width:100%;height:235px;"> <a href="http://www.SeuEnderecoLojaVirtual.com.br"><img src="<BaseLoja>images/FC14333IMG1.jpg" /></a> <a href="http://www.SeuEnderecoLojaVirtual.com.br"><img src="<BaseLoja>images/FC14333IMG2.jpg" /></a> <a href="http://www.SeuEnderecoLojaVirtual.com.br"><img src="<BaseLoja>images/FC14333IMG3.jpg" /></a> </div> <script>FCLib$.execLazyLoad();</script> |
Após inserir grave, depois apague o cache da loja e verifique.
2º Caso o que foi passado como 1º opção ainda não funcione, procure no arquivo no qual o código de um dos exemplos foi inserido, o trecho de script mostrado abaixo, exclua o mesmo e grave, depois apague o cache da loja e verifique, mas não desfaça o que foi passado no 1º.
- R$ 4,68Utilize um efeito tridimensional para navegar entre as imagens de vários ângulos do produto.
|


