- 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.
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 Mixtape.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://my.mixtape.moe/zjmqbn.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 fnShowVideo(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;
}
fnVideoImage(IDProduto,sVideo,sImagemProdPri,sNomeProd);
}
function fnVideoImage(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://my.mixtape.moe/"+ videoProduct +".mp4'></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 estiloproduto.htm. Dentro da tag <ProdLista> insira o script abaixo no local da tag <ImagemProd> e salve o arquivo.
<div id="id-video-image<IDProduto>"></div> <script>fnShowVideo(<IDProduto>,[<ProdFiltersJS>],'<ImagemProdPri>',"<NomeProdUA>");</script>
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 fnShowVideo(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;
}
fnVideoImage(IDProduto,sVideo,sImagemProdPri,sNomeProd);
}
function fnVideoImage(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://my.mixtape.moe/"+ videoProduct +".mp4'></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:
<a href="<URLProd>" class="ImgCapaProd"><ImagemProd></a>
Para:
<div id="id-video-image<IDProduto>"></div> <script>fnShowVideo(<IDProduto>,[<ProdFiltersJS>],'<ImagemProdPri>',"<NomeProdUA>");</script>
Como implementar na página de detalhes do produto
Existem várias maneiras de apresentar vídeo na página de detalhes de produtos. Por exemplo, o vídeo pode ser exibido junto com as imagens ampliadas do produto. Se a loja utiliza grade de produtos para mostrar variações de tamanho e cor de um produto, o vídeo poderá ser exibido de acordo com a cor escolhida. Entre em contato com nossa equipe de suporte para mais informações.
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 Mixtape.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.
|
