- Seção
FC 15047 :: Como usar vídeos em produtos?
Aumente as vendas exibindo vídeos na home, na lista de produtos e na página de detalhes do produto.
Se uma imagem vale mais do que mil palavras, um vídeo pode valer mais do que mil imagens! Pelo menos é o que as estatísticas têm mostrado, com o aumento das vendas dos produtos com vídeos caprichados.
A principal vantagem do vídeo é mostrar o produto em diversos ângulos. O vídeo atrairá a atenção do visitante para o produto, mesmo que ele esteja em uma lista de produtos.
Veja o exemplo abaixo, que contém vários produtos mas apenas um utiliza vídeo. Estatisticamente este produto venderá mais:
O vídeo não deve interferir no design e na usabilidade da loja. Para isto, ele precisa utilizar a mesma área destinada à imagem do produto. Além disso, ao acessar a loja por tablet e celular o vídeo não tocará automaticamente, melhorando a performance da loja e a experiência do usuário.
Para implantar vídeo no produto, siga os procedimentos abaixo, que consideram que a loja utiliza o modelo 2 atualizado. Fale com nossa equipe de suporte se sua loja utiliza outro modelo ou tem design personalizado.
Veja como implementar:
1º Passo
Para hospedar o vídeo, escolha um serviço consagrado e que ofereça garantias de performance e estabilidade (ex: Amazon S3). Para testes, hospede gratuitamente no Catbox.moe, seguindo o procedimento abaixo:
• Clique em Select or drop your file(s) e envie o vídeo.
• Após enviar o arquivo uma URL é criada dinamicamente.
• Copie da URL somente o nome do arquivo que está em negrito: https://files.catbox.moe/q2atwy.mp4
OBS: Cada vídeo tem um nome próprio. Repita as etapas acima para obter o nome de cada vídeo.
2º Passo
No menu esquerdo da administração, clique em Dados da loja. Na seção Produtos cadastre um filtro chamado video:
Preencha os campos do filtro da seguinte forma:
• O nome do filtro video deverá ser escrito em minúsculo e sem acento.
• No campo Tipo selecione a opção Geral.
• Nos campos Pedido e Loja selecione a opção Não exibe.
• Marque o campo Ativo e clique em Incluir.
• Após cadastrar o filtro video, selecione o filtro video à esquerda e clique em Ver itens.
• No campo Item, cole o nome do vídeo sem a extensão .mp4 e clique em Incluir.
• Após cadastrar os vídeos no filtro, acesse a ficha do produto.
• Na seção filtros, selecione o vídeo e clique em Adicionar.
• Clique no botão verde Alterar no final da página para salvar o produto.
Veja como implementar na lista de produtos
1º Passo
Insira as linhas abaixo no final do arquivo lojasite.css:
/* Video and Image Product */
.videoProd{max-width:180px;max-height:200px;}
2º Passo
Acesse o arquivo lojalib.js e cole o script no final do arquivo:
// Video and Image Product
function fnShowVideoNew(IDProduto,oProdFilters,sImagemProdPri,sNomeProd){
var sVideo="";
if(oProdFilters.length>0){
var iFiltroVideo=oProdFilters[0].pFilNames["video"];
if(iFiltroVideo!=undefined)sVideo=oProdFilters[0].pFil[iFiltroVideo].value;
}
fnVideoImageNew(IDProduto,sVideo,sImagemProdPri,sNomeProd);
}
function fnVideoImageNew(IDProduto,videoProduct,ImagemProdPri,NomeProd){
var replaceNomeProd = NomeProd.replace(/-/g,' ');
if (videoProduct==""){
document.getElementById("id-video-image"+IDProduto).innerHTML="<div class='ImgCapaListProd DivListproductStyleImagemZoom'><img src="+ ImagemProdPri +" alt=\""+ replaceNomeProd +"\" onerror='MostraImgOnError(this,0)'></div>";
}else{
document.getElementById("id-video-image"+IDProduto).innerHTML = "<video id=prodVideo"+ IDProduto +" class='videoProd' preload=auto onmouseover=this.play() src='https://files.catbox.moe/"+ videoProduct +".mp4' autoplay loop muted playsinline></video>";
}
}
3º Passo
Acesse o arquivo estiloproduto.htm. Dentro da tag <ProdLista> e altere de:
<div class="prodBox">
<FormProd>
<div class="DivListProd" <DataAttribute> id="DivProd<prodId>">
<div class="DivProductListProd">
<div class="DivProductListImagemProd" id="DivImagemProdDouble<prodId>" onclick="fcSpy$.openSmartModal('<URLProd>');"></div>
<div class="DivProductListNomeProd" id="DivProductListNomeProd<prodId>" onclick="fcSpy$.openSmartModal('<URLProd>');">
<span class="ProductListNomeProd text-overflow font-regular"><prodName></span>
</div>
<div class="DivProductListPriceProd" id="DivProductListNomeProd<prodId>" style="white-space:nowrap;" onclick="fcSpy$.openSmartModal('<URLProd>');">
<div id="idProdPrice<prodId>"></div>
<div class="PriceAVistaLista" id="ProdDesc<prodId>"></div>
</div>
<div class="prodlist-spy-details-container">
<div class="DivProdListDetails" onclick="fcSpy$.openSmartModal('<URLProd>');"><img src="<storePath>images/icon-more-details.svg?cccfc=1" loading="lazy" width="25" height="25" alt="Fast Preview"></div>
<div class="ProductList-wishlist"><wishlist></div>
</div>
</div>
<div id="zFProdSoldOut<prodId>"></div>
<script>IDProdutoPai=<prodId>;var iEstoqueSubs=0;var bTemSubs=false;</script>
<sub>
<script>iEstoqueSubs=iEstoqueSubs+<prodStock>;bTemSubs=true;</script>
</sub>
</div>
</FormProd>
<script>
sF$.fnProd("<prodImgMain>","<prodImgDet>","<URLProd>",<prodId>,"<prodNameFU>",<prodPriceNum>,<prodPriceOri>,"<prodRef>",<prodMaxInstallmentNum>,<prodStock>);
</script>
</div>
<div class="prodBox">
<FormProd>
<div class="DivListProd" <DataAttribute> id="DivProd<prodId>">
<div class="DivProductListProd">
<div id="id-video-image<IDProduto>"></div>
<script>fnShowVideoNew(<IDProduto>,[<ProdFiltersJS>],'<ImagemProdPri>',"<NomeProdUA>");</script>
<div class="DivProductListNomeProd" id="DivProductListNomeProd<prodId>" onclick="fcSpy$.openSmartModal('<URLProd>');">
<span class="ProductListNomeProd text-overflow font-regular"><prodName></span>
</div>
<div class="DivProductListPriceProd" id="DivProductListNomeProd<prodId>" style="white-space:nowrap;" onclick="fcSpy$.openSmartModal('<URLProd>');">
<div id="idProdPrice<prodId>"><PrecoSimples></div>
<div class="PriceAVistaLista" id="ProdDesc<prodId>"></div>
</div>
<div class="prodlist-spy-details-container">
<div class="DivProdListDetails" onclick="fcSpy$.openSmartModal('<URLProd>');"><img src="<storePath>images/icon-more-details.svg?cccfc=1" loading="lazy" width="25" height="25" alt="Fast Preview"></div>
<div class="ProductList-wishlist"><wishlist></div>
</div>
</div>
<div id="zFProdSoldOut<prodId>"></div>
<script>IDProdutoPai=<prodId>;var iEstoqueSubs=0;var bTemSubs=false;</script>
<sub>
<script>iEstoqueSubs=iEstoqueSubs+<prodStock>;bTemSubs=true;</script>
</sub>
</div>
</FormProd>
</div>
Veja como implementar na página principal da loja (Home)
1º Passo
Se existir o estilo abaixo não é necessário incluir.
Insira as linhas abaixo no final do arquivo lojasite.css:
/* Video and Image Product */
.videoProd{max-width:180px;max-height:200px;}
2º Passo
Se existir o script abaixo não é necessário incluir.
Acesse o arquivo lojalib.js e cole o script no final do arquivo:
// Video and Image Product
function fnShowVideoNew(IDProduto,oProdFilters,sImagemProdPri,sNomeProd){
var sVideo="";
if(oProdFilters.length>0){
var iFiltroVideo=oProdFilters[0].pFilNames["video"];
if(iFiltroVideo!=undefined)sVideo=oProdFilters[0].pFil[iFiltroVideo].value;
}
fnVideoImageNew(IDProduto,sVideo,sImagemProdPri,sNomeProd);
}
function fnVideoImageNew(IDProduto,videoProduct,ImagemProdPri,NomeProd){
var replaceNomeProd = NomeProd.replace(/-/g,' ');
if (videoProduct==""){
document.getElementById("id-video-image"+IDProduto).innerHTML="<div class='ImgCapaListProd DivListproductStyleImagemZoom'><img src="+ ImagemProdPri +" alt=\""+ replaceNomeProd +"\" onerror='MostraImgOnError(this,0)'></div>";
}else{
document.getElementById("id-video-image"+IDProduto).innerHTML="<video id=prodVideo"+ IDProduto +" class='videoProd' preload=auto loop src='https://files.catbox.moe/"+ videoProduct +".mp4' autoplay loop muted playsinline></video>";
function execVideoEvents(){
var oVideo=document.getElementById("prodVideo"+IDProduto);
if(FCLib$.isOnScreen(oVideo))oVideo.play();
}
execVideoEvents();
FCLib$.AddEvent(document,"scroll",execVideoEvents);
}
}
3º Passo
Acesse o arquivo estiloprodutoout.htm e altere de:
<p255>
<div class="DivHomeProd" <DataAttribute> id="DivProd<prodId>">
<div class="DivHomeImagemProd" id="DivImagemProdDouble<prodId>" onclick="fcSpy$.openSmartModal('<URLProd>');" tabIndex="0"></div>
<div class="DivHomeNomeProd" id="DivHomeNomeProd<prodId>" onclick="fcSpy$.openSmartModal('<URLProd>');" tabIndex="0">
<span class="HomeNomeProd text-overflow font-regular"><prodName></span>
</div>
<div class="DivHomePriceProd" id="DivHomePriceProd<prodId>" style="white-space:nowrap;" onclick="fcSpy$.openSmartModal('<URLProd>');" tabIndex="0">
<div id="idProdPrice<prodId>"></div>
<div class="PriceAVistaLista" id="ProdDesc<prodId>"></div>
</div>
<div class="home-spy-details-container">
<div class="DivHomeDetails" onclick="fcSpy$.openSmartModal('<URLProd>');" tabIndex="0"><img src="<storePath>images/icon-more-details.svg?cccfc=1" loading="lazy" width="25" height="25" alt="Fast Preview - <prodId>" title="Fast Preview"></div>
<div class="DivHome-wishlist"><wishlist></div>
</div>
</div>
<script>
FCLib$.onReady(function(){sF$.fnProdOut("<prodImgMain>","<prodImgDet>","<URLProd>",<prodId>,"<prodNameFU>",<prodPriceNum>,<prodPriceOri>,"<prodRef>",<prodMaxInstallmentNum>)});
</script>
</p255>
Para:
<p255>
<div class="DivHomeProd" <DataAttribute> id="DivProd<prodId>">
<div id="id-video-image<IDProduto>"></div>
<script>fnShowVideoNew(<IDProduto>,[<ProdFiltersJS>],'<ImagemProdPri>',"<NomeProdUA>");</script>
<div class="DivHomeNomeProd" id="DivHomeNomeProd<prodId>" onclick="fcSpy$.openSmartModal('<URLProd>');" tabIndex="0">
<span class="HomeNomeProd text-overflow font-regular"><prodName></span>
</div>
<div class="DivHomePriceProd" id="DivHomePriceProd<prodId>" style="white-space:nowrap;" onclick="fcSpy$.openSmartModal('<URLProd>');" tabIndex="0">
<div id="idProdPrice<prodId>"><PrecoSimples></div>
<div class="PriceAVistaLista" id="ProdDesc<prodId>"></div>
</div>
<div class="home-spy-details-container">
<div class="DivHomeDetails" onclick="fcSpy$.openSmartModal('<URLProd>');" tabIndex="0"><img src="<storePath>images/icon-more-details.svg?cccfc=1" loading="lazy" width="25" height="25" alt="Fast Preview - <prodId>" title="Fast Preview"></div>
<div class="DivHome-wishlist"><wishlist></div>
</div>
</div>
</p255>
Dicas para vender mais com vídeos
- Escolha seus melhores produtos
- Tamanho máximo de 2MB por vídeo
- Evite vídeos tremidos
- Nunca utilize áudio
- Coloque background transparente ou branco
- Extensão .mp4
ATENÇÃO: O Catbox.moe é um serviço gratuito e pouco conhecido para hospedagem de arquivos. Sugerimos que ele seja utilizado somente para testes. Para hospedar seus vídeos de produtos, escolha um serviço consagrado e que ofereça garantias de performance e estabilidade, como por exemplo o Amazon S3.
|
