Hey all, I’m trying to make the product images sticky so they move with scrolling on the Streamline Theme by Archetype Themes: https://archetypethemes.co/products/shopify-theme-streamline
I’ve tried a ton of different scripts but can’t seem to make it work, it seems like they are using some sort of weird wrapper I can’t figure out the reference too for the photo/media section.
Our website is here: https://ish.guitars/collections/in-stock-now/products/prs-se-mccarty-594-singlecut-electric-guitar-black-gold-burst
Any thoughts?
Try adding the following CSS
.grid__item.medium-up–three-fifths {
position: sticky;
top: 0;
}
1 Like
This worked! I also added
@media only screen and (min-width: 769px)
otherwise it was messing up our mobile theme and overlapping the photos.
Only problem is now:
- Page loads correctly, all photos visible (first screenshot)
- When I scroll down to the bottom of the page (and the entire thing loads) when I scroll back up, the images disappear (second screenshot) when the scroll bar touches the bottom of the header area.
I messed with the top px number but it doesn’t help.
Any ideas how to fix this?
Well, this is a JavaScript related stuff related to show the element when it comes into the screen as an animation for a better looking experience.
Try this CSS and let me know how things worked.
[data-animate_images=true] .image-wrap img:not([role=presentation]) {
opacity: 1;
}
1 Like
This worked! You’re the best! Weirdly the product images sort of flash now when scrolling down (after going to the bottom of the page, and back to the top first) but I would much rather have that than them disappearing. I’ll screw with it more later but this works great for now. Thanks again!
Glad it worked, good luck with your stuff.
Thanks for the code - this worked perfectly (albeit with the same weird flashing). It’s honestly ridiculous that Archtype Themes have not implemented this ticky gallery as an option in their templates.
Been using an older version with my custom code that worked for these years but it’s finally time to upgrade and this new code worked great.
1 Like
