Sticky product image on mobile in the Dawn theme?

Store Design

Topic summary

A user seeks to make product images sticky on mobile devices in Shopify’s Dawn theme (version 15.0.0). Initial attempts using various CSS solutions found in community forums failed to work.

Attempted Solutions:

  • Tried code from similar threads involving theme.liquid modifications, but couldn’t locate thumbnail-related code
  • Applied CSS to .product__media-wrapper with position: sticky and top: 0, which didn’t function as expected

Working Solution:
Another user provided CSS that successfully made images sticky:

.product__media-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
}

Final Implementation:

  • The original poster adjusted z-index from 1000 to 1 to prevent the sticky image from covering the main navigation menu
  • For thumbnail images appearing below the main image, they found a solution through their personalization app
  • Issue marked as resolved with the combined CSS adjustment and app-based thumbnail handling
Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,

I want to make the product image sticky on mobile in the Dawn theme. I tried multiple codes and CSS, but nothing worked.

Can someone help?

Thank you in advance!

2

Hello there @Ivana749 welcome to the community. I came across a thread with a reply marked as a solution here https://community.shopify.com/post/1922917 for an issue similar to yours and I want you to confirm if you’ve tried out the whole process there yet.

3

I tried variations of that one. First I can’t find anything related to thumbnails in the theme.liquid file.

I think some change needs to be here: assets/section-main-product.css

I used this one (doesn’t work):

.product__media-wrapper { position: sticky; top: 0; }

4

Please share with the community.

5

  1. I’m using Dawn 15.0.0

  2. I have a few changes in the code. I added the code for Google Tag Manager, and some changes about subscription button for newsletters. Also, added some code for title tag-not to show my store name.

  3. Honestly, I tried everything I found here on forum.

6

Hi @Ivana749

Please share your store URL

Best,

Daisy

7

Hi Ivana749,
Can you please try the below css? Thanks!

.product__media-wrapper {
    padding-left: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}
8

Thank you @Code-Crafting

This seems to work, but is there a way that just the main image stays sticky?

Ivana749_0-1735489698759.png
Ivana749_0-1735489698759.png1170×2532 319 KB

9

Hello @DaisyVo

Store URL is https://rymemories.com/

10

I just used z-index: 1 because with 1000 my main menu was also behind the image.

For thumbnail images below the main image, I found a solution in the app I use for personalization.

Thanks again, everyone!

1 Like