Enable Scrolling through Preview Photos in Boost theme

[melimiya]

I'm using the Boost theme and on the Product page, I have the smaller preview photos positioned to the left of the main product photo. The only issue is that if I have a lot of photos loaded in the listing, they extend far past the bottom of the main photo. I was wondering if there's a way to be able to scroll through the small preview photos on the left, so they don't extend beyond the bottom of the main photo?

[mrashid · Accepted solution]

@melimiya  add code in style.css file 

@media only screen and (min-width: 768px) {
.product-detail__thumbnails {
    padding-top: 35px !important;
}
img.a-right1 {
    top: 0px !important;
    transform: rotate(274deg);
    width: 30px !important;
    height: 30px !important;
    left: 50px !important;
}
img.a-left1 {
    z-index: 1;
    bottom: 0 !important;
    top: unset !important;
    width: 30px !important;
    height: 30px !important;
    transform: rotate(271deg);
    left: 50px !important;
}
}

[mrashid]

@melimiya store url?

[melimiya]

kittie-treats.com

[mrashid]

@melimiya first add this cdn in theme.liquid under head tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

then i will check further.

[melimiya]

Ok, I pasted the code under the head tag. I just included a screenshot to make sure I put it in the right place.

[mrashid]

@melimiya 

[mrashid]

@melimiya 

<!-- Slick CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>

<!-- Slick JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

[mrashid]

@melimiya paste code at the end in theme.liquid

<script>
  $(document).ready(function(){
    // Check if the window width is greater than 768px (desktop)
    if ($(window).width() > 768) {
      // Initialize Slick slider
      $('.product-detail__thumbnails').slick({
        slidesToShow: 5, // Adjust the number of visible slides as needed
        slidesToScroll: 4,
        vertical: true, // Enable vertical mode
        verticalSwiping: true, // Allow vertical swiping
        prevArrow: '<button type="button" class="slick-prev">Previous</button>', // Custom previous arrow
        nextArrow: '<button type="button" class="slick-next">Next</button>', // Custom next arrow
        responsive: [
          {
            breakpoint: 768, // Adjust this breakpoint as needed
            settings: {
              vertical: false, // Disable vertical mode on smaller screens
              verticalSwiping: false // Disable vertical swiping on smaller screens
            }
          }
        ]
      });
    }
  });
</script>

[melimiya]

Awesome! Looks like the code worked! I was wondering if it's possible to be able to scroll using arrows or the mouse wheel instead of having to drag the photos up and down?

[mrashid]

@melimiya yes possible

[mrashid]

@melimiya can i send you a collaborator request?

[mrashid]

@melimiya remove code bottom

[melimiya]

Sure

[mrashid]

@melimiya  share code 

[melimiya]

7972

[mrashid]

@melimiya 

[mrashid · Accepted solution]

@melimiya  add code in style.css file 

@media only screen and (min-width: 768px) {
.product-detail__thumbnails {
    padding-top: 35px !important;
}
img.a-right1 {
    top: 0px !important;
    transform: rotate(274deg);
    width: 30px !important;
    height: 30px !important;
    left: 50px !important;
}
img.a-left1 {
    z-index: 1;
    bottom: 0 !important;
    top: unset !important;
    width: 30px !important;
    height: 30px !important;
    transform: rotate(271deg);
    left: 50px !important;
}
}

[mrashid · Accepted solution]

@melimiya add code in theme.liquid at the bottom

<script>
$(document).ready(function(){
    // Check if the window width is greater than 768px (desktop)
    if ($(window).width() > 768) {
      // Initialize Slick slider
      $('.product-detail__thumbnails').slick({
        slidesToShow: 5, // Adjust the number of visible slides as needed
        slidesToScroll: 4,
        vertical: true, // Enable vertical mode
        verticalSwiping: true, // Allow vertical swiping
        prevArrow:"<img class='a-left1 control-c prev slick-prev' src='https://cdn.shopify.com/s/files/1/0572/4353/3448/files/g_1.png?v=1654894514'>",
  nextArrow:"<img class='a-right1 control-c next slick-next' src='https://cdn.shopify.com/s/files/1/0572/4353/3448/files/g.png?v=1654894514'>",
        responsive: [
          {
            breakpoint: 768, // Adjust this breakpoint as needed
            settings: {
              vertical: false, // Disable vertical mode on smaller screens
              verticalSwiping: false // Disable vertical swiping on smaller screens
            }
          }
        ]
      });
    }
  });
</script>

[melimiya]

Awesome! That looks perfect! Thank you so much Mrashid! 

[mrashid]

@melimiya Welcome 

Don't forget to like