Step-by-Step Guide to Adding a Slick Slider in Shopify

In Shopify many themes don’t have built-in slider in it and sometime you want to add custom slider for product images or in any other section like testimonial section, brand logo section etc. In this post I will explain how to implement slick slider in Shopify in easy way.

A Slick Slider allow you to showcase images, products, and content in an interactive and engaging manner.

It’s always best to duplicate your theme file before adding any custom work. First of all, we will load jQuery and Slick Slider CDN files in our theme. You can add them in the theme.liquid file.

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

Once you’ve added the CDN files to your theme file, the next step is to start the slider. This means getting the slider ready to show pictures or content on your website. It’s like pressing a button to make it work.

<!-- Custom HTML -->
<div class="slick-slider">
  <div class="slider-item"><img src="{{ image_url }}" alt="Slide 1"></div>
  <div class="slider-item"><img src="{{ image_url }}" alt="Slide 2"></div>
  <!-- Add more slides if you want -->
</div>

<!-- Custom CSS -->
<style>
  .slick-slider {
    width: 100%;
  }
  .slider-item img {
    max-width: 100%;
    height: auto;
  }
</style>

<!-- Custom JavaScript -->
<script>
  $(document).ready(function(){
    $('.slick-slider').slick({
      dots: true, // Show navigation dots
      autoplay: true, // Pictures move automatically
      // You can add more settings if you like
    });
  });
</script>

You can make the slider do what you want by changing or adding different settings. This helps you decide how the slider looks and works on your website. You can also make it work well on different devices by adding points where the slider adjusts for different screen sizes. This way, it looks good and functions properly on phones, tablets, and computers.

$(document).ready(function(){
      $('.slick-slider').slick({
        slidesToShow: 5,
        slidesToScroll: 1,
        arrows: true,
        dots: true,
        speed: 300,
        infinite: true,
        autoplaySpeed: 5000,
        autoplay: true,
        responsive: [
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
        }
      }
    ]
      });
    });

By following these easy steps and using the example code, you can add a fun and attractive slideshow to your Shopify store. This can make your store more interesting for people who visit, and maybe even help them decide to buy things from you!