Para este exemplo utilizaremos o slick carrossel, no entanto é possível utilizar qualquer plugin de carrossel de sua preferência.

Inicialmente adicionaremos os arquivos do plugin junto ao tema.

Após isso, devemos localizar o arquivo responsável por listar os produtos, num geral esse arquivo é o ` showcase.html`

Nesse arquivo altere a estrutura HTML para a abaixo:

{% if products|length > 0 %}
<div class="showcase">
<h2>
<small>{{ Translation('confira_tambem') }}</small>
<strong>{{ showcaseTitle }}</strong>
</h2>
<div class="row carrossel">
{% for product in products %}
{% set ranking = product.ranking %}
<div>
{% element 'snippets/product' {"product": product} %}
</div>
{% endfor %}
</div>
</div>
{% endif %}

Feito isso, escolhemos um dos modelos que carrossel do slick, no caso, utilizaremos o responsive, para isso, adicione o código javascript abaixo em um de seus arquivos javascripts aplicados ao tema: 

 jQuery('.carrossel').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});

Após isso o carrossel de produtos será exibido na listagem de produtos

Taynara Sene 
Tem mais dúvidas? Envie uma solicitação

Comentários

    Artigos nessa seção

    Powered by Zendesk