Hello everyone,
I’m using the Debut Theme and I want my product images to be sticky. If you scroll down the product thumbnails should always be visible until another element / section comes up there. How can I do that?
Website: https://customhunters.myshopify.com/products/car-artwork PW: blieff
Hi @mb_18
To make the product images sticky we need to add JS code to detect the page scroll, Also to set a parameters on which stage we need to make them sticky as well.
It required CSS and Javascript code to do this. Following is the pretty basic code to achieve this :
Or if you need any other help feel free to contact on the below email thanks!
Have a great day!
Please place this code at the end of theme.scss
@media only screen and (min-width: 750px) {
.drawer-page-content {
overflow: unset;
}
.product-single__media-group {
position: -webkit-sticky;
position: sticky;
top: 7%;
}
}
Thank you for the update.
Haha I was literally just working on this and I refreshed and it was working : )
Thank you very much to all 
Hi there we tried adding this code and it works! (per the sticky part and scrolling) but, unfortunately gives a black shadow all around the product picture when hovering on it. We really would appreciate any help. We don’t know what we are doing wrong…plz help!
thanks in advance
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hi @KetanKumar - thanks for this. URL is www.aleweston.com . I’ve just looked at it again on this product https://www.aleweston.com/collections/all-products/products/flower-cz-ear-cuff , it seems to happen more so when hovering towards the top of the image and also seems to be more of an issue on safari rather than chrome. Any help would be great, as we like the functionality change, but obviously the black box is a bit of a mess! Thanks again!
We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?
This is happening on desktop in safari. It strangely seems to be okay in chrome and on mobile. Any thoughts? Or perhaps we should strip out the code and try something else entirely?
Hi @KetanKumar , given it looks unprofessional on safari and we cannot legislate for which browser customers would choose to browse from we’ll need to remove the code as it simply doesn’t look good. Is there alternative code we could try to still give us what we need? Thanks!
can you pleas sent your safari and your pc OS Details
We are on working on Mac not PC.
Here is the OS info: We have macOS Mojave version 10.14.6 as well as macOS Catalina version 10.15.7.
Further, we have Safari Version 14.0.2 and Safari version 14.0.3.
So as you can see even using different OS and Safari versions the problem continues to arise.
thank for perfect details i can see issue and also find solution can you please add this code
.product-single--medium-media .medium-up--one-half {background: #ffffff;}
@KetanKumar Thanks for this. Unfortunately this is still not working. Though the black is less prominent, it is now running right the way down the product image to the bottom of the thumbnail on the entire right hand side of the image?? https://www.aleweston.com/collections/all-products/products/flower-cz-ear-cuff
Any thoughts?
yes i have check doesn’t show me issue
@KetanKumar Please see attached screenshot. This is what we are getting our end still only in safari is not the case in chrome. So most of the black is gone now, only a line remains in between the product photo and info in the right side shows black (please see photo for reference) Any thoughts or suggestions?
Thanks again