How can I make product images sticky on my ecommerce site?

Topic summary

A user seeks help making product images remain fixed (sticky) on their ecommerce site as customers scroll down the page.

Solutions Proposed:

Two app support teams offered CSS-based approaches:

  • GemPages Team suggested:

    • Navigate to Online Store > Theme > Edit code
    • Open the theme.liquid file
    • Insert custom markup code before the </head> tag
    • Included a reference image for guidance
  • PageFly Team recommended:

    • Access Online Store > Theme > Edit code
    • Locate Assets > Theme.scss.css
    • Add CSS targeting .Product .Product__Wrapper .Product__Gallery with position: sticky !important and top: 0 !important
    • Apply only on screens wider than 1200px using a media query

Both solutions involve theme code customization. The discussion remains open with no confirmation from the original poster on which approach was implemented or successful.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.

Hello,

I was wondering if anyone could help me. I’m trying to make my media images sticky so that as you scroll down the product images will follow.

website: gripmags.com

Hello @GripMags ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

  1. Open your theme.liquid theme file

  2. Paste the below code before


Let us know how it works for you.

Best regards,
GemPages Support Team

Hi @GripMags

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Theme.scss.css

@media (min-width: 1200px){
.Product .Product__Wrapper .Product__Gallery {
    position: sticky !important;
    top: 0 !important;
}
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly