Sticky Product Image

[bigjimmy15]

I’m trying to make the product images (on the left side) stay sticky while scrolling the product details on the right. I’m using the Impact theme, but it doesn’t have a built-in option for this. Can someone help me figure out how to add the sticky feature?

[shahrozbabar5]

@bigjimmy15,

Steps:

1. Go to Online Store > Themes > Edit Code

2. Open main-product.liquid

3. Find the product image container (usually has a class like .product__media)

4. Add this CSS in your theme’s base.css or custom.css file:

.product__media {
  position: sticky;
  top: 100px;
}

Adjust top: 100px; based on your header height.

Now, the images will stay sticky while scrolling the product details.

If it resolves your issue, please mark my answer as a solution, or if you want me to fix this, contact me here.

[bigjimmy15]

Hi, thank you for the help. I am still a little confused. Do you mean in this place... or can you direct me to which line i would add it to?

[shahrozbabar5]

@bigjimmy15, not to this one but to .product__media

[bigjimmy15]

Hi, I can not find that section in code editor. Can you help me find it?

[shahrozbabar5]

@bigjimmy15 , to do this, I'll be needing your store access, or you can simply go to your theme edit code, then base.css and then find for .product_media block

[bigjimmy15]

Yes how do i give you access to my store?

[shahrozbabar5]

@bigjimmy15,

Please share your store URL and collaboration request code with me so I can send request for access