Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
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%;
}
}
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 :
<style>
.fixedElement {
background-color: #c0c0c0;
position:fixed;
top:0;
width:100%;
z-index:100;
}
</style>
<script>
$(window).scroll(function(e){
var $el = $('.fixedElement');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 200 && !isPositionFixed){
$el.css({'position': 'fixed', 'top': '0px'});
}
if ($(this).scrollTop() < 200 && isPositionFixed){
$el.css({'position': 'static', 'top': '0px'});
}
});
</script>
Or if you need any other help feel free to contact on the below email thanks!
Have a great day!
https://codepen.io/clairecodes/pen/bvWKdr
https://codepen.io/lryan/pen/OvdOJL
This is an accepted solution.
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?
thanks for more details
yes i have also check this its working fine
sorry for that
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
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
.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
if possible to remote your system and i have check
@KetanKumar How do we do that?
By the way, this is the code we have added to date, to make the product image sticky/ fixed, which is still giving us the black box - Maybe when you see it like this you'll have more chance figuring out the issue? (For now we have taken this off the site given how it looks 😞
@media only screen and (min-width: 750px) {
.drawer-page-content {
overflow: unset;
}
.product-single__media-group {
position: -webkit-sticky;
position: sticky;
top: 7%;
}
}
.product-single--medium-media .medium-up--one-half {background: #ffffff;}
thanks for code but doesn't any idea what issue on your systerm
We have removed this code from the site and now the black box has disappeared (as we knew it would), but we still have zero acceptable solution for the fixed product image on the product page unfortunately.
sorry but how can i fix without your checked issue
Hi @KetanKumar - Unfortunately as it's taken a while to try and resolve the issue (and we thank you so much for trying to assist!), we've decided it's best for now for us to scrap the idea of having a fixed product image, given we've been unable to find a working solution.
thanks for update
Thanks for the tip but I couldn't get it to work!
I have a file called theme.scss.liquid I added the code at the end and made no difference. Since deleted in case the additional lines upset another part of the site.
Hope you can help.
I'm afraid that didn't work for me, also there is a message saying that SCSS is being retired?
As a complete novice I don't know if this solution is no longer valid, any help would be appreciated.
Code to make it work for the theme EMPIRE (Just had to adapt the class names, and to fix a flex parameter)
/* Make product images sticky on desktop while reading product description */
@media only screen and (min-width: 750px) {
.product--container {
overflow: unset;
}
.product-gallery {
position: -webkit-sticky;
position: sticky;
top: 7%;
}
.product--outer{
align-items: flex-start;
}
}
if any issue?
This is not working for me. Website URL :
https://www.skinworks.in/collections/masks-scrubs/products/coffee-clay-mask
@KetanKumar - Any idea why ?
yes, please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
/* Make product images sticky on desktop while reading product description */
@media only screen and (min-width: 750px) {
.page-container {
overflow: visibility;
}
.product-single__media-group {
position: -webkit-sticky;
position: sticky;
top: 30px;
}
}
Hi
Hello, is it possible to exclude a single product?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024