How to
How to make a Sticky product image while scrolling with a maximum limit until it hit the Proofo: Photo Reviews App?
Topic summary
A user seeks to make product images sticky while scrolling on a Shopify Supply theme, but wants the stickiness to stop when reaching a specific app (Proofo: Photo Reviews) rather than extending to the footer.
Solution Provided:
- A community member shares CSS code to implement sticky product images
- Instructions include: navigating to Shopify admin → Online Store → Edit Code → adding specific CSS to the
theme.scss.liquidfile - The code uses
position: stickywith media queries for screens wider than 769px
Additional Requests:
- Another user asks if the solution works for the Minimog theme, specifically for mobile where variants cause the main image to remain visible while scrolling through 30-40 variant options
- A third user reports the code doesn’t work on the Debutify theme
Status: The original poster confirms the solution works for their Supply theme case. Questions about compatibility with other themes (Minimog, Debutify) remain partially addressed, with one user offering to help check specific store URLs.
Looks like this is what you want. See this example.
https://abouolia.github.io/sticky-sidebar/examples/basic.html
and here is the source code and instructions.
2 Likes
@Henry_dev Thanks!
Looks helpful, although I don’t want it to be sticky all the way to the footer.
I was looking for something more like this: https://community.shopify.com/c/Shopify-Design/Fixed-Sticky-Product-Imaged-on-Page-scroll-VENTURE-theme/td-p/705004
@KetanKumar @dmwwebartisan @Kinjaldavra @oscprofessional Top 4 most Liked Authors, can you help on this?
You can try this code:
Follow below steps.
-
Go to your shopify admin.
-
Left side bar click on the online store.
-
You will see the list of theme. On live theme click on “action”. and click on “edit code”.
-
Now you will see the list of file. find the file “theme.scss.liquid” open this file and add below code very bottom the file.
@media screen and (min-width: 769px) {
#ProductSection .large--two-fifths {
position: -webkit-sticky;
position: sticky;
top: 100px;
margin-bottom: 120px;
}
}
3 Likes
Amazing work @Henry_dev
You are a new member performing better than old experts in this lovely community. Much appreciated.
1 Like
Hi @egyptiful you’re welcome
2 Likes
Hey, will it work on your Minimog theme? I have been trying to get this done via the minimog support but unfortunately they keep telling me that it’s not possible until the dev team makes an update, but I feel it can be done with a little editing to the code.
Hi @Living_Waters This is possible, what is your store url? I will help you check.
Hey, thank you for replying. Here is the url of the product:
https://www.livingwaters.co.in/products/the-van-gogh-classic-tote?variant=43847877132513
I want to make the main image of the product sticky, on the mobile, so as when the visitors are going through the variants the main image is still in view and keeps on changing. The variants will go upto 30-40 at times and it’s a pain for the visitors to keep scrolling up and checking the main image. Is it something which can be done?
Hey Brian, can you please help me out with this ?
Hi