How to make a product page image sticky when scrolling?

[SantosBaez]

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.

Any help with this is greatly appreciated.

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

[ShopDoc]

What theme are you using?

[SantosBaez]

Hello! I'm using Origin.

[BSS-Commerce]

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;

[SantosBaez]

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