Blog

How to Create a Custom Product Slider in Shopify Home Page Without App | Easy & Recommended Way

1. Go to Themes -> Actions -> Edit code -> Sections

2. Create new file collection-slider.liquid in Sections

Copy the code of collection.liquid file and paste complete code to new file collection-slider.liquid

3. Replace this code:

 {%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

Replace with below:

 {%- assign product_limit = 12 -%}

4. Replace this code:

<ul class="grid grid--uniform grid--view-items">

Replace with below:

<ul data-slides={{section.settings.grid}} class="grid grid--uniform grid--view-items collection-slider">

5. Add below CDN of slick slider and jQuery in theme.liquid file at the end before close body tag 


<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

6. Add below CSS on top of collection-slider.liquid file:

<style>
.collection-slider .slick-track {
    display: flex;
}

.collection-slider .product-card {
    width: 100%;
}

.collection-slider .slick-prev {
    left: 10px;
    z-index: 999;
}

.collection-slider .slick-next {
    right: 10px;
    z-index: 999;
}

.collection-slider {
    padding: 25px;
    overflow: hidden;
}
.collection-slider .slick-prev:before, .collection-slider .slick-next:before {
	background: red;
    border-radius: 50%;
    padding: 5px;
}
.collection-slider .slick-slide {
	padding-right: 10px;
}
.collection-slider .slick-prev, .collection-slider .slick-next {
  	top: 40%;
}
</style>

7. Add below JavaScript code at last line of collection-slider.liquid file

<script>
$(document).ready(function() {
    $(".collection-slider").each(function() {

        var num_slides = 2;
        if(window.innerWidth >= 750) {
            var num_slides = $(this).data("slides");
        }
        $(this).slick({slidesToShow: num_slides});
    })
})
</script>

8. Find below text and rename it:

Featured collection

Replace with below:

Collection slider
Hire Me
Tags: , , ,

Leave a Reply