Sticky Product Image

Store Design
1

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?

2 Likes
2

@bigjimmy15 ,

Steps:1. Go to Online Store > Themes > Edit Code

  1. Open main-product.liquid

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

  3. 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.

3

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?

4

@bigjimmy15 , not to this one but to .product__media

5

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

6

@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

7

Yes how do i give you access to my store?

8

@bigjimmy15 ,

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

9

Hi,

Are you still available to help?
Here is link: simplybuilt.co
Collab code is: 5540