Solved

Can I make product images sticky in the Debut Theme on Shopify?

mb_18
Excursionist
30 0 15

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

Accepted Solution (1)

Hardik29418
Shopify Partner
2858 407 1073

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%;
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 34 (34)

satsinghrana
Shopify Partner
331 19 41

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!

 

 

 

banned

KetanKumar
Shopify Partner
36839 3635 11972

@mb_18 

https://codepen.io/clairecodes/pen/bvWKdr

https://codepen.io/lryan/pen/OvdOJL

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Hardik29418
Shopify Partner
2858 407 1073

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%;
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Hardik29418
Shopify Partner
2858 407 1073

Thank you for the update.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Ninthony
Shopify Partner
2329 350 1023

Haha I was literally just working on this and I refreshed and it was working : )

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
mb_18
Excursionist
30 0 15

Thank you very much to all 🙂

spurs123
Excursionist
43 1 9

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

Screen Shot 2021-08-24 at 1.36.24 PM 2.png

KetanKumar
Shopify Partner
36839 3635 11972

@spurs123 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spurs123
Excursionist
43 1 9

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!

KetanKumar
Shopify Partner
36839 3635 11972

@spurs123 

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?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spurs123
Excursionist
43 1 9

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? 

KetanKumar
Shopify Partner
36839 3635 11972

@spurs123 

thanks for more details 

yes i have also check this its working fine 

sorry  for that 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spurs123
Excursionist
43 1 9

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!

KetanKumar
Shopify Partner
36839 3635 11972

@spurs123 

can you pleas sent your safari and your pc OS Details 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spurs123
Excursionist
43 1 9

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.

 

KetanKumar
Shopify Partner
36839 3635 11972

@spurs123 

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;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spurs123
Excursionist
43 1 9

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

KetanKumar
Shopify Partner
36839 3635 11972

@spurs123 

yes i have check doesn't show me issue 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spurs123
Excursionist
43 1 9

@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

KetanKumar
Shopify Partner
36839 3635 11972

@spurs123 

if possible to remote your system and i have check

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spurs123
Excursionist
43 1 9

@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;}

KetanKumar
Shopify Partner
36839 3635 11972

@spurs123 

thanks for code but doesn't any idea what issue on your systerm 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spurs123
Excursionist
43 1 9

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.

KetanKumar
Shopify Partner
36839 3635 11972

@spurs123 

sorry but how can i fix without your checked issue 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spurs123
Excursionist
43 1 9

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. 

KetanKumar
Shopify Partner
36839 3635 11972

@spurs123 

thanks for update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Ian_at_SMEgear
Visitor
2 0 0

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.

Ian_at_SMEgear
Visitor
2 0 0

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.

 

 

SebFourault
Visitor
2 0 1

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;
}
}

 

KetanKumar
Shopify Partner
36839 3635 11972

@SebFourault 

if any issue?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
modernite
Visitor
1 0 1

This is not working for me. Website URL : 

 

https://www.skinworks.in/collections/masks-scrubs/products/coffee-clay-mask

@KetanKumar - Any idea why ?

KetanKumar
Shopify Partner
36839 3635 11972

@modernite 

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;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
maaz0938
New Member
4 0 0

Hi        

Benny97
New Member
7 0 0

Hello, is it possible to exclude a single product?