Solved

How can I make product images sticky on desktop while scrolling?

matthewalker
Excursionist
21 1 4

Hi,

 

I am trying to make my product images sticky on desktop when scrolling. Would anyone know of an app or code needed to add to make this possible?

 

www.bestfurnitureonline.co.uk

 

Thanks

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1785 3079

This is an accepted solution.

Hi @Midnightlibrary,

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

@media(min-width:767px){
#site-main:has([data-product-wrapper] article .product-gallery){
overflow:unset !important
}
#site-main [data-product-wrapper] article .product-gallery{
    position: sticky;
    top: 95px;
    height: fit-content;
}

}

PageFlyVictor_0-1678457731110.png

 

 



Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

View solution in original post

Reply 1 (1)

PageFly-Victor
Shopify Partner
7865 1785 3079

This is an accepted solution.

Hi @Midnightlibrary,

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

@media(min-width:767px){
#site-main:has([data-product-wrapper] article .product-gallery){
overflow:unset !important
}
#site-main [data-product-wrapper] article .product-gallery{
    position: sticky;
    top: 95px;
    height: fit-content;
}

}

PageFlyVictor_0-1678457731110.png

 

 



Hope my solution works perfectly for you!

Best regards,

Victor | PageFly