COLLECTION TEMPLATE PRODUCT CARD GRID SLICK SLIDER SHOPIFY

 

-------------------------------------------------------------------------------------------------------------------

READ MORE:

https://chrome.google.com/webstore/detail/simple-allow-copy/aefehdhdciieocakfobpaaolhipkcpgc/related

https://www.youtube.com/watch?v=cbp37QeRFHw

https://www.youtube.com/watch?v=xLqWHnS2E5s

https://shopifyjs.blogspot.com/2021/04/add-slickslider-for-product-image.html

-------------------------------------------------------------------------------------------------------------------

ADD AUTOPLAY TRUE AND OWN ARROW PNG IN CALL FUNCTION

-------------------------------------------------------------------------------------------------------------------

autoplay: true,

arrows: true,

nextArrow:"<img class='slick-next' src='https://image.flaticon.com/icons/png/512/892/892535.png'>",

prevArrow:"<img class='slick-prev' src='https://image.flaticon.com/icons/png/512/892/892519.png'>",

 ------------------------------------------------------------------------------------------------------------------------

STEP :1

FIND THIS LINE IN SECTION FOLDER FILE collection-template.liquid

{% include 'product-card-grid', max_height: max_height %}

AND ADD CODE

---------------------------------------------------------------------------------------------------------------------------

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
<style>
/* CODE IS TAKEN FROM slick-theme.css  
AND CHANGE
*/
.slider{
width: 200px;
height: 200px;
margin: 0 auto;
}
.slick-slide {
width: 200px;
height: 200px;
}
.slick-dots {
position: absolute;
bottom:32px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top:60%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: yellow;
border: none;
outline: none;
background: red;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: yellow;
outline: none;
background: red;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
•
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
•
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
•
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -23px;
}
.slick-next
{
right: -23px;
left: auto;
}.slick-slide img {
border: 5px solid #fff;
display: block;
width: 200px;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: #f1030300;
border: 0;
outline: none;
background: Bisque;
}
.slick-dots li.slick-active button:before
{
color:Red;
}
</style> 
<div class="slider fade">
{% for image in product.images %}  
<a href="{{ product.url | within: collection }}">
<div class="image"> 
<img src="{{image | img_url: '200x200' }}" alt="{{ image.alt }}">
</div>
</a>
{% endfor %}        
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fade').slick({
dots: true,
infinite: true,
speed: 500,
arrows: true,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
<a href="{{ product.url | within: collection }}">
<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
</a>
{% include 'product-price', variant: product %}
---------------------------------------------------------------------------------------------------------------------------