Fixed/Sticky Product Imaged on Page scroll. VENTURE theme.

[HelpX]

Hi Friends!

Here's how you can make product images sticky on scroll on Venture template.

1- Click on Online store => Actions => Edit code => theme.scss.liquid

2- At the very bottom of the code paste the following code:

@include media-query($medium-up) {
  .template-product .page-container {
 	 overflow: visible;
    .grid__item.medium-up--three-fifths {
      position: -webkit-sticky;
      position: sticky;
      top: 100px;
    }
  }
}

3- Click save! And it should work.

[KetanKumar]

Hello, @HelpX 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

[san5]

How to do it for debutify theme.

[Sanoj]

Hello

It works but only for product with 2 or more pictures.

Do you know what to add to the code to make it sticky if there is only one picture ?

Thanks

[KetanKumar]

Hello, @Sanoj 

can you please try this 

https://codepen.io/ikhwanb/pen/VwZKLOw

[enrique00]

Hello.

The Link is broken.

DO you have a solution for Minimal theme?

[maaz0938]

Hi          

[HelpX]

Here's the updated code, that will work for products with one photo and multiple photos. 
Please, try and let me know if it worked.

@include media-query($medium-up) {
  .template-product .page-container {
    overflow: visible;
    padding-top: 1px;
    .grid__item.medium-up--three-fifths, .grid__item.medium-up--one-half {
      position: -webkit-sticky;
      position: sticky;
      top: 100px;
    }
  }
}

[Sanoj]

Hello dude,

It works perfectly.

Thank you very much 🙂

[HelpX · Accepted solution]

UPDATED VERSION FOR PRODUCTS WITH ONE AND MORE PHOTOS

Here's how you can make product images sticky on scroll on Venture template.

1- Click on Online store => Actions => Edit code => theme.scss.liquid

2- At the very bottom of the code paste the following code:

@include media-query($medium-up) {
  .template-product .page-container {
 	 overflow: visible;
    .grid__item.medium-up--three-fifths, .grid__item.medium-up--one-half {
      position: -webkit-sticky;
      position: sticky;
      top: 100px;
    }
  }
}

3- Click save! And it should work.

---

[Sanoj]

 Hello dude,

I changed my them for Turbo 5.0 and I wanted to repeat this.

Unfortunately, it didn't work.

Any idea how to stick the picture on the product description of Turbo 5 ?

THANKS A LOT.

Jason

[Djovan23]

Hey HelpX

Thanks a lot! Works great for me, that you so much! Can't thank you enough! Just one thing which I would love you to help me with, please!

After adding the code a very strange bar appeared. (the bar pushes down my content on the bottom of the page to under the page so now visitors need to scroll down) I would love if I could just get it away as it was before the sticky scroll. Please will you help me? Thank you so much! 

[SOLGLPK]

Has anyone solved this? I'm having the same annoying bar issue..

[Marwisniewski]

Add to the bottom of your theme.scss.liquid and see if it works.

@include media-query($medium-up) {

  .template-product .page-container {

  overflow: visible;

  padding-top: 1px;

    .grid__item.medium-up--three-fifths, .grid__item.medium-up--one-half {

      position: -webkit-sticky;

      position: sticky;

      top: 100px;

    }

  }

}

[AshokDaga]

IT DIDN'T WORK MY FRIEND..

[jordancharm1994]

Hello, thanks for the help, this worked on the desktop version. Can you please provide a solution for MOBILE?

Thanks!

[Luksteks]

Hello,

Thanks for help but it did not work on Icon theme, can you help us too please?

[Kenza55]

Hi Im using debutify theme and i cannot find ' theme.scss.liquid " i looked at the theme 'Sense ' just to see if it's there but it's not could you please give me any help?

[Alexis_drvcm]

Hi can you help me on my theme it is different from yours but i need exactly the same thing on my product page, thanks for your help !

[HelpX]

@Alexis_drvcm , @Sanoj  , guys please post your request as separate topic on the forum and we will help you! This topic is made specifically for VENTURE theme 😃 Have a grate time

[Jason-Evans]

This solution worked great, Thank you