How to make a product page image sticky when scrolling?

Shopify Discussion
1

Hello,

I’m trying to make the image on my product page sticky so that the image stays visible when you scroll. Currently, the left column is sticky, so when I try to do ‘position: sticky’ for the image, the image drops, even if I delete ‘position: sticky’ for the left column.

Screenshot 2023-12-11 164610.png
Screenshot 2023-12-11 164610.png1892×919 154 KB

Any help with this is greatly appreciated.

https://coffeeinboxes.com/products/coffee-box-of-6

2

What theme are you using?

3

Hi @SantosBaez ,

You can try use css property: position: fixed and use responsive and js to control the sticky image. I try use this code and it works but it have to be customed more.

    position: fixed;
    top: 150px;
    max-width: 605px;
    max-height: 605px;
4

Thank you for looking into this. This works, but now the image is sticky all the way through to the bottom, overlapping other elements.

5

Hello! I’m using Origin.