Sticky Image in Product Page

SantosBaez
Tourist
9 0 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

 

Any help with this is greatly appreciated.

 

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

Replies 4 (4)

ShopDoc
Shopify Partner
35 1 0

What theme are you using?

SantosBaez
Tourist
9 0 1

Hello! I'm using Origin.

BSS-Commerce
Shopify Expert
3380 448 499

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;

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

SantosBaez
Tourist
9 0 1

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