Solved

Enable Scrolling through Preview Photos in Boost theme

melimiya
Excursionist
29 4 6

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?

 

Product Photo Screenshot 1.pngProduct Photo Screenshot 2.png

Accepted Solutions (2)
mrashid
Shopify Partner
169 17 15

This is an 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;
}
}
- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

View solution in original post

mrashid
Shopify Partner
169 17 15

This is an 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>
- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

View solution in original post

Replies 19 (19)

mrashid
Shopify Partner
169 17 15

@melimiya store url?

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
melimiya
Excursionist
29 4 6

kittie-treats.com

mrashid
Shopify Partner
169 17 15

@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.

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
melimiya
Excursionist
29 4 6

Theme liquid code.png

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
Shopify Partner
169 17 15

@melimiya 

mrashid_0-1718062122480.png

 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
mrashid
Shopify Partner
169 17 15

@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>
- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
mrashid
Shopify Partner
169 17 15

@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>
- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
melimiya
Excursionist
29 4 6

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
Shopify Partner
169 17 15

@melimiya yes possible

 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
mrashid
Shopify Partner
169 17 15

@melimiya can i send you a collaborator request?

 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
mrashid
Shopify Partner
169 17 15

@melimiya remove code bottom

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
melimiya
Excursionist
29 4 6

Sure

mrashid
Shopify Partner
169 17 15

@melimiya  share code 

mrashid_0-1718065329517.png

 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
melimiya
Excursionist
29 4 6

7972

mrashid
Shopify Partner
169 17 15

@melimiya 

mrashid_0-1718066682222.png

 

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
mrashid
Shopify Partner
169 17 15

This is an 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;
}
}
- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
mrashid
Shopify Partner
169 17 15

This is an 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>
- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
melimiya
Excursionist
29 4 6

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

mrashid
Shopify Partner
169 17 15

@melimiya Welcome 

Don't forget to like

- Need a Shopify developer? Chat on WhatsApp +923068683199
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution