Como criar um carrossel de produtos

Para este exemplo utilizaremos o Swiper (https://swiperjs.com/demos), no entanto é possível utilizar qualquer plugin de carrossel de sua preferência.

Inicialmente adicionaremos os arquivos do plugin junto ao tema. Provavelmente um arquivo CSS e um JavaScript.

Após isso, devemos localizar o arquivo responsável por listar os produtos, em geral esse arquivo é o 'showcase.html'. Nesse arquivo altere a estrutura HTML para estrutura abaixo:

HTML

showcase.html

{% if products|length > 0 %}
   <div class="showcase list-slide">
      <h2>
         <small>{{ Translation('confira_tambem') }}</small>
         <strong>{{ showcaseTitle }}</strong>
      </h2>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          {% for product in products %}
            <div class="swiper-slide">
               {% element 'snippets/product' {"product": product} %}
            </div>
          {% endfor %}
        </div>
      </div>
      <div class="arrow prev">
      	<svg width="30" heigth="30" viewBox="0 0 451.847 451.847"><path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0   c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744   c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"></path></svg>
      </div>
      <div class="arrow next">
      	<svg width="30" heigth="30" viewBox="0 0 451.846 451.847"><path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744   L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284   c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"></path></svg>
      </div>
   </div>
{% endif %}

JavaScript

if(jQuery('.list-slide').length){

    new Swiper('.list-slide .swiper-container', {
        slidesPerView : 4,
        preloadImages : false,
        loop          : true,
        navigation: {
            nextEl: '.list-slide .next',
            prevEl: '.list-slide .prev'
        },
        lazy :{
            loadPrevNext: true,
        },       
        breakpoints: {
            0: {
                slidesPerView: 2
            },
            550: {
                slidesPerView: 3
            },
            992: {
                slidesPerView: 4
            }
        }
    });

}

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