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

Store Design
, , ,

Topic summary

A user wants to make product images remain fixed (sticky) while scrolling through the product description on their Shopify store.

Solution Provided:
Add CSS code to the theme.css file:

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

Issue Encountered:
The sticky header overlaps the product image when scrolling.

Workaround:
Adjusting the top value to a specific pixel amount (e.g., top: 100px;) prevents the overlap by offsetting the sticky position. While this works, it’s noted as not the ideal approach.

Alternative suggestion: Configure the header to hide when scrolling down and only appear when scrolling up.

The discussion remains open regarding the best practice for implementing this feature without header overlap.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
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.