Sticky Product Image

Store Design

Topic summary

A user wants to make product images sticky on the left side while scrolling through product details on the right in the Impact theme, which lacks a built-in option for this feature.

Proposed Solution:

  • Locate the product image container (class .product__media) in main-product.liquid
  • Add CSS code to base.css or custom.css:
.product__media {
  position: sticky;
  top: 100px;
}
  • Adjust the top value based on header height

Current Status:
The original poster is having difficulty locating the .product__media section in the code editor. They’ve provided their store URL (simplybuilt.co) and collaboration code (5540) to receive direct assistance with implementation. The discussion remains open as the helper prepares to access the store to complete the customization.

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