How to make a product photo sticky in Ritual theme?

Store Design

Topic summary

A user rebuilding their website wants to make product images sticky on product listing pages in the Ritual theme. Shopify support confirmed this requires custom coding, which the user lacks experience with.

Current Status:

  • Multiple community members offered assistance
  • One user noted that the media gallery is already sticky by default in Ritual’s product page section, suggesting the issue may be insufficient content height to trigger the sticky behavior
  • A preview link was requested to diagnose the specific issue

Proposed Solution:
A detailed CSS code snippet was provided to add to the theme’s styles.css file:

  • Navigate to Online Store → Theme → Edit code
  • Locate styles.css
  • Add custom CSS targeting the product gallery with position: sticky properties

The discussion remains open pending confirmation of whether the suggested solutions resolved the issue.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I’m in the process of rebuilding our website and i’m just about done after days and days of work. I was wanting to make the product image on the product listing page sticky and after talking with shopify support, they informed me that the Ritual theme doesn’t have that as an option unless I do some coding. I don’t know anything about coding and was wondering if anyone would be willing to help me figure this out?

Thank you!

2 Likes
2

Hi @StephanieH95

Please attach your store url & password (if applicable) each time you post a question to let me check then give you the solution

3

Hello @StephanieH95
Thank you for getting back to me. I’m happy to hear that it worked for you. Should you need any further help, please don’t hesitate to reach out. If you found the post helpful, kindly consider giving it a like.

4

Hmm, actually, the “media gallery” part of the product page section (product media block) is already sticky – you just need to have your info part to be taller to see that.

Are your product infos tall enough to see it?

Sharing a (preview?) link to a page in question would definitely help. (and a storefront password if not live yet)

Screenshot 2025-05-28 at 1.09.17 PM.png
Screenshot 2025-05-28 at 1.09.17 PM.png522×346 28.1 KB

5

Hey there Stephanie @StephanieH95 I suggest you give the following steps a try and let me know how it goes for you

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css.

Step 3: Paste the below code at bottom of the file → Save

.product-gallery.product-gallery__thumbnails–false.product-gallery–media-amount-10.slideshow-transition–fade.product-gallery–bottom-thumbnails.display-arrows–false {

position: sticky !important;

z-index: 1111;

top: 0;

}