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:
{% 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 %}
Após isso o carrossel de produtos será exibido na listagem de produtos.
PreviousComo adicionar o botão comprar na listagem dos produtosNextComo inserir um vídeo na home da loja
Last updated
Was this helpful?