Product Image and thumbnail slider Shopify

Hi, Doesn’t your theme have a product image slider or featured product thumbnail slider? do not worry I am here to provide a reliable and patent solution for this issue. I have written so many other codes that are very useful for a Shopify store owner or a developer. You can now easily change your Shopify store custom font and can add an announcement slider into it to make it more unique if you are looking to provide support to your customers I have written a code on how to add a floating WhatsApp support button which is useful for any type of Shopify theme. Let’s start the procedure to add the thumbnail slider to the Shopify product.

follow the below steps carefully.

First, open your Shopify store dashboard.

Then click on the “Online Store” button.

on the right side, you will see the published Shopify theme just create a backup of it by clicking on three dots. Then click on Duplicate to create a backup.

Now again click on three dots and click on “Edit Code” then click on “Snippets” under this click on “add a new snippet”.

Give the name “featured-thumbs” and save it. Then open this link copy all of the code and paste it inside the “featured-thumbs” snippet.

 {{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'slick-theme.css' | asset_url | stylesheet_tag }}
{{ 'latest-jquery.js' | asset_url | script_tag }}
{{ 'slick.js' | asset_url | script_tag }}
<style>
  .slick-prev:before, .slick-next:before{
    color:#000;
  }
  .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    color: transparent;
    outline: none;
    background: #ffffffbf;
}
.slick-next, .slick-prev {
    right: 25px;
    background: #fff;
    border-radius: 100px;
    height: 40px;
    width: 40px;
      box-shadow: 0px 0px 18px #0000002b;
    }
  .slick-next {
    right: 25px;
    }
  .slick-prev {
    left: 25px;
        z-index: 999;
}
.slick-slide img {
    width: 100%;
}
  .slick-initialized .slick-slide{
    margin:10px;
  }
.slideshow-item p{
  margin:0px;
}
</style>


<div class="container">
  <div class="carousel-main">
    {% for image in product.images %}
      <div class="carousel-cell">
  <img data-lazy="{{ image | img_url:''}}" />
      </div>
{% endfor %}
      
      
      
  </div>
  <div class="carousel-nav">
    {% for image in product.images %}
      <div class="carousel-cell">
  <img data-lazy="{{ image | img_url:'450x'}}" />
      </div>
{% endfor %}
  </div>

</div>
<script>
 $('.carousel-main').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: '.carousel-nav',
   lazyLoad: 'progressive',
    adaptiveHeight: true
});
$('.carousel-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.carousel-main',
  arrows: true,
  centerMode: true,
  focusOnSelect: true,
  lazyLoad: 'progressive',
   adaptiveHeight: true,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
        slidesToScroll:2
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
		
</script>

Then click on the assets folder and upload all of these files after downloading

slick.css

slick-theme.css

slick.js

latest-jquery.js 

Now hide code as per tutorial using comment liquid tag and then {% include ‘featured-thumbs’ %} use this code to make your product thumbnail visible and working.