How to keep product image fixed while scrolling down the description column

[Chrystel078]

Hi everyone,

I would like to keep my product image fixed in position while scrolling down the description.

Is there a way to do this?

https://luyendykjewelry.com/products/gedenksieraad-hanger-hart?variant=54070609379673

Thank you.

[Shipo-studio · Accepted solution]

Hi @Chrystel078 ,

Edit code => at the top inside "theme.css" file paste the code 

product-gallery.product-gallery {
    position: sticky;
    top: 0;
}

[Chrystel078]

Thanks, seems like I'm almost there.

However the header still overlaps the image somewhat while scrolling. Is there a way to counteract this?

 

[Shipo-studio]

You can keep header only static/fixed while scrolling up so that when you scrolling down header stay hidden.

[Chrystel078]

I actually found that when you fill in a X number of px, the complete image is sticky and there is no overlap. For example:

product-gallery.product-gallery { position: sticky; top: 0; }

product-gallery.product-gallery {
    position: sticky;
    top: 100 px;
}

[Shipo-studio]

Yeah you are right but this not the correct way but yeah you can use.