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

Solved
Highlighted
Tourist
8 1 8

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

 

1 Like
Highlighted
Shopify Partner
7523 1038 2608

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
Highlighted
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
Highlighted
Shopify Partner
7523 1038 2608

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
0 Likes
Highlighted
Tourist
8 1 8

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;
    }
  }
}
1 Like
Highlighted
Tourist
8 1 8

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

 


 

3 Likes
Highlighted
New Member
6 0 0

Hello dude,

 

It works perfectly.

Thank you very much :)

 

0 Likes
Highlighted
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
Highlighted
Tourist
4 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
Highlighted
Tourist
8 1 8

@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

1 Like