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

Store Design
, , ,
1

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.

2

Hi @Chrystel078 ,

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

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

Thanks, seems like I’m almost there.

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

Scherm­afbeelding 2025-02-01 om 17.50.44.png
Scherm­afbeelding 2025-02-01 om 17.50.44.png2768×1380 310 KB

4

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

5

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;
}
6

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