Como podemos ajudar?

Funciona bem também no celular, incluindo gesto (swipe) para navegar entre as imagens.

Para implantar, siga os procedimentos abaixo, que consideram que a loja utiliza o modelo 1 ou o modelo 2 atualizados. Fale com nossa equipe de suporte se sua loja utiliza outro modelo ou tem design personalizado.

1º Passo

Clique aqui para baixar um arquivo ZIP com os arquivos HTM.

No topo do site administrativo, clique em Arquivos. Acesse a pasta HTM > JS e envie o arquivo ZIP perspective3d.zip.

Ao enviar o arquivo, clique no campo Sobrescrever se arquivo já existir.

2º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo lojasite.css e clique no ícone do lápis verde ao seu lado para editar. No fim do arquivo, inclua o código abaixo:

/* Perspective 3D */
#css3dimagePager, #css3dtransparency{text-align:center;position:relative;z-index:11;padding:0 0 10px;margin:0;}
#css3dimagePager li{padding-right:2em;display:inline-block;cursor:pointer;}
#css3dimagePager li.active, #css3dtransparency.active{font-weight:bold;}
#css3dimageslider{perspective:1000;perspective-origin:50% 100px;margin:40px auto 20px auto;width:100%;height:450px;}
#css3dimageslider ul{position:relative;margin:0 auto;height:281px;width:450px;transform-style:preserve-3d;transform-origin:50% 100px 0;transition:all 1.0s ease-in-out;}
#css3dimageslider ul li{position:absolute;height:281px;width:450px;padding:0px;list-style:none;}
#css3dimageslider ul li:nth-child(1){transform:translateZ(225px);}
#css3dimageslider ul li:nth-child(2){transform:rotateY(90deg) translateZ(225px);}
#css3dimageslider ul li:nth-child(3){transform:rotateY(180deg) translateZ(225px);}
#css3dimageslider ul li:nth-child(4){transform:rotateY(-90deg) translateZ(225px);}
#css3dimageslider.transparency img{opacity:1;}
.fc-perspective-3d-image-size{width:450px;height:400px;}
@media only screen and (max-width: 640px){
.fc-perspective-3d-image-size{width:320px;height:284px;}
#css3dimagePager li{padding-right:10px;}
#css3dimageslider{margin:0px auto 20px auto;height:320px;}
#css3dimageslider ul{height:281px;width:320px;touch-action:none;}
#css3dimageslider ul li{height:284px;width:320px;}
#css3dimageslider ul li:nth-child(1){transform:translateZ(155px);}
#css3dimageslider ul li:nth-child(2){transform:rotateY(90deg) translateZ(155px);}
#css3dimageslider ul li:nth-child(3){transform:rotateY(180deg) translateZ(155px);}
#css3dimageslider ul li:nth-child(4){transform:rotateY(-90deg) translateZ(155px);}
}

3º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo rodape.htm e clique no ícone do lápis verde ao seu lado para editar. No fim do arquivo, inclua o código abaixo:

<!-- Perspective -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
function fnGrid3DPosition(){
if(FC$.Page=="Products"){
var getPositionThumbs3D = document.querySelector('#css3dimagePager');
var changePositionThumbs3D = document.getElementsByClassName('new3d');
var i;
for (i = 0; i < changePositionThumbs3D.length; i++) {
getPositionThumbs3D.appendChild(changePositionThumbs3D[i]);
}
}
}
fnGrid3DPosition();
jQuery(document).ready(function() {
jQuery("#css3dimagePager li").click(function(){
var rotateY = (jQuery(this).index() * -90);
jQuery("#css3dimageslider ul").css({"transform":"rotateY("+rotateY+"deg)"});
jQuery("#css3dimagePager li").removeClass("active");
jQuery(this).addClass("active");
});
jQuery("#css3dtransparency").click(function() {jQuery("#css3dimageslider").toggleClass("transparency");jQuery(this).toggleClass("active");});
jQuery("#fc-perspective-3d-image1").on("swipeleft",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-90deg)"});});
jQuery("#fc-perspective-3d-image2").on("swipeleft",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-180deg)"});});
jQuery("#fc-perspective-3d-image3").on("swipeleft",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-270deg)"});});
jQuery("#fc-perspective-3d-image4").on("swipeleft",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(0deg)"});});
jQuery("#fc-perspective-3d-image1").on("swiperight",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-270deg)"});});
jQuery("#fc-perspective-3d-image2").on("swiperight",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(0deg)"});});
jQuery("#fc-perspective-3d-image3").on("swiperight",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-90deg)"});});
jQuery("#fc-perspective-3d-image4").on("swiperight",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-180deg)"});});
jQuery("#fc-perspective-3d-image5").on("swipeleft",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-90deg)"});});
jQuery("#fc-perspective-3d-image6").on("swipeleft",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-180deg)"});});
jQuery("#fc-perspective-3d-image7").on("swipeleft",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(0deg)"});});
jQuery("#fc-perspective-3d-image5").on("swiperight",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-90deg)"});});
jQuery("#fc-perspective-3d-image6").on("swiperight",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(0deg)"});});
jQuery("#fc-perspective-3d-image7").on("swiperight",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-90deg)"});});
jQuery("#fc-perspective-3d-image8").on("swipeleft",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-90deg)"});});
jQuery("#fc-perspective-3d-image9").on("swipeleft",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(0deg)"});});
jQuery("#fc-perspective-3d-image8").on("swiperight",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(-90deg)"});});
jQuery("#fc-perspective-3d-image9").on("swiperight",function() {jQuery("#css3dimageslider ul").css({"transform":"rotateY(0deg)"});});
});
</script>

Qualquer dúvida entre em contato com a nossa equipe de suporte.