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

Solved
HelpX
Tourist
7 1 13

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.

 

Screen Shot 2019-10-04 at 4.14.30 pm.png

 

KetanKumar
Shopify Partner
17039 1848 6375

Hello, @HelpX 

Thanks for post.

Please share your site URL,
So I will check and provide 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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Sanoj
New Member
6 0 0

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

0 Likes
KetanKumar
Shopify Partner
17039 1848 6375

Hello, @Sanoj 

can you please try this 

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

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
HelpX
Tourist
7 1 13

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;
    }
  }
}
HelpX
Tourist
7 1 13

This is an 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.

 

Screen Shot 2019-10-04 at 4.14.30 pm.png

 


 

Sanoj
New Member
6 0 0

Hello dude,

 

It works perfectly.

Thank you very much :)

 

0 Likes
Sanoj
New Member
6 0 0

 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

0 Likes
Alexis_drvcm
Tourist
5 0 1

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 !

0 Likes
HelpX
Tourist
7 1 13

@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