Solution for Venture Theme:
A CSS code snippet enables sticky/fixed product images during page scrolling on Shopify’s Venture theme. Users add the code to theme.scss.liquid targeting .grid__item--medium-up-three-fifths and .grid__item--medium-up-one-half classes with position: sticky properties.
Key Updates:
overflow: visible on page containerOngoing Issues:
Other Themes:
Status: Partially resolved for Venture desktop users; mobile and cross-theme compatibility remain unaddressed.
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.
Hello, @HelpX
Thanks for post.
Please share your site URL,
So I will check and provide a solution here.
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
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;
}
}
}
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.
Hello dude,
It works perfectly.
Thank you very much 
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
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 !
@Alexis_drvcm , @Sanoj_1 , 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
How to do it for debutify theme.
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!
Has anyone solved this? I’m having the same annoying bar issue..
Hello.
The Link is broken.
DO you have a solution for Minimal theme?
This solution worked great, Thank you
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;
}
}
}
Hello, thanks for the help, this worked on the desktop version. Can you please provide a solution for MOBILE?
Thanks!
IT DIDN’T WORK MY FRIEND..
Hello,
Thanks for help but it did not work on Icon theme, can you help us too please?
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?
