Listagem de produtos

A listagem de produtos é a parte onde ficam listados seus produtos lado a lado. Ela está presente principalmente na home e na página de categorias, mas também aparece em outros locais da loja.

As vitrines que irão aparecer na home e os produtos que elas irão exibir não tem relação com o tema, é configurado na sua plataforma, no visual da loja(vitrines): acesse aqui.

Quantidade de produtos por linha

Você pode escolher quantos produtos quer exibir por linha no desktop e mobile de forma individual.

var vitrineProdutos = 4;

Quantidade de produtos que serão exibidos por linha no desktop. Você pode escolher 3, 4 ou 5.


var vitrineMobile = 2;

Quantidade de produtos que serão exibidos por linha no mobile. Você pode escolher 1 ou 2.


var vitrineAutoplay = false;

Você pode ativar para que a vitrine fique passando para o lado de forma automática.

true Ativa a vitrine automática.
false Desativa a vitrine automática.


var vitrineAutoplaySpeed = 5000;

Define a velocidade em que a vitrine irá passar para o lado. Se aumentar o número ela passará mais devagar, se diminuir o número ela passará mais rápido.

Exibição dos preços

Importante: A exibição dos preços não é configurada ou feita pelo tema, ela deve ser configurada na sua plataforma: acesse aqui
Novamente, o tema não é responsável por exibir nenhum preço, seja o preço principal, parcelado ou preço à vista. Se não estão aparecendo na sua loja, é porque você não os configurou corretamente na plataforma.

Preço à vista

Você pode alterar a frase padrão que vem no preço à vista do pagamento na entrega, boleto e depósito(já desativado há 3 anos na plataforma, mas algumas lojas ainda possuem da época que ele era ativo).

var textoEntrega = 'à vista';
var textoBoleto = 'à vista';
var textoDeposito = 'à vista';


Você pode ativar ou não o ícone de boleto que fica no preço à vista.

var iconeAvista = true;

true Ativa o ícone no preço à vista.
false Desativa o ícone no preço à vista.

Adicionar aos desejos

Exibe o botão de adicionar aos desejos no produto.

var mostrarDesejos = true;

true Ativa o botão de adicionar aos desejos.
false Desativa o botão de adicionar aos desejos.

Texto da bandeira de desconto

Você pode alterar o texto que fica na bandeira de desconto, após a porcentagem de desconto. Deixe as aspas vazias se não quiser utilizar nenhum texto.

var descontoDepois = 'de desconto';

Subtítulos das listagens

Você pode alterar todos os subtítulos das listagens que ficam na home.

var tituloGeral = 'Confira nossos produtos';

Altera o subtítulo das listagens de todas as categorias colocadas em destaque que aparecem na home.


var tituloLancamentos = 'Confira nossas novidades';

Altera o subtítulo da listagem de lançamentos da home.


var tituloVendidos = 'Selecionamos produtos especiais para você';

Altera o subtítulo da listagem de mais vendidos da home.


var tituloDestaques = 'Todo mundo comprando!';

Altera o subtítulo da listagem de destaques da home.

Seletor de quantidade

O tema também trás o seletor de quantidade para os produtos que não possuem variações. A ativação dele é feita na plataforma, em Visual da loja > Botões.

Para ativar: Defina a ação deste botão > Adicionar produtos e permanecer na página.

Para desativar: Defina a ação deste botão > Qualquer outra opção

Tamanho da imagem livre

Por padrão, a plataforma fixa o tamanho das imagens em quadrados, fazendo com que sempre fiquem padronizadas, independente do tamanho de imagem que você cadastre.

Caso você queira utilizar livremente imagens de outros tamanhos na sua plataforma, como imagens retangulares(muito utilizadas em lojas de moda), adicione o código abaixo, ele irá deixar o tamanho da imagem livre. Além disso ele também centraliza os textos.

Passo 1Adicione um novo código e preencha da seguinte forma:

Descrição: Imagem livre(pode colocar o que quiser)
Local Publicação: Rodapé
Página Publicação: Todas as páginas
Tipo: HTML
Conteúdo: Copie todo o código abaixo e cole na área de conteúdo

<script>
// Remove tamanhos fixos dos produtos
function imageR(){
    $('.listagem .listagem-item .imagem-produto img').each(function(){
      $(this).attr('src', $(this).attr('src').replace('/400x400', ''));
      $(this).attr('src', $(this).attr('src').replace('/300x300', ''));
      $(this).attr('src', $(this).attr('src').replace('/800x800', ''));
    });
}

imageR();

$('.listagem .listagem-item').hover(function(){
    $('.listagem .listagem-item .imagem-produto.has-zoom').each(function () {
        $(this).find('.imagem-zoom').remove();
        var url = $(this).find(".imagem-principal").attr("data-imagem-caminho");
        $(this).append('<img src="' + url + '" class="imagem-zoom" alt="zoom">');
  });
  imageR();
});
</script>

<style>
.listagem .listagem-item {padding:5px !important}
.listagem .info-produto {padding: 20px 10px 5px 10px !important;}
.listagem .listagem-item .imagem-produto {max-width:100% !important;height: auto !important;}
.listagem .imagem-produto img {position: relative;}
.listagem .listagem-item .imagem-produto.has-zoom .imagem-zoom {position:absolute}
.menu.superior .nivel-um>li .nivel-dois.menu-com-produtos .menu-produtos .menu-produtos-inside .listagem ul li ul.menu-produto-1 li .listagem-item {padding: 30px 40px !important;padding-bottom: 10px !important;}
.menu.superior .nivel-um>li .nivel-dois.menu-com-produtos .menu-produtos .listagem .info-produto {padding:0 !important;padding-top:30px !important;}
.menu.superior .nivel-um>li .nivel-dois.menu-com-produtos .menu-produtos .listagem .listagem-item .imagem-produto {height:235px !important}
.menu.superior .nivel-um>li .nivel-dois.menu-com-produtos .menu-produtos .listagem .info-produto .preco-produto.destaque-preco {margin-top:0 !important}
.listagem .info-produto {text-align: center !important;}
@media only screen and (max-width: 767px) {
.listagem-item .acoes-produto {padding:5px;padding-top:0 !important}
}
</style>

Passo 2 – Agora clique em “Criar código”.


Passo 3Pronto!! Agora todos produtos da listagem estão centralizados e com o tamanho da imagem livre, podendo utilizar imagens retangulares e outros formatos.