Sticky product image on mobile in the Dawn theme?

[Ivana749]

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!

[Bundler-Manuel]

Hello there @Ivana749  welcome to the community. I came across a thread with a reply marked as a solution here https://community.shopify.com/c/shopify-design/product-images-sticky-on-mobile-dawn-theme/m-p/192291... for an issue similar to yours and I want you to confirm if you’ve tried out the whole process there yet. 

[Ivana749]

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; }

[Ivana749]

Please share with the community.

[Ivana749]

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.

[Code-Crafting · Accepted solution]

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

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

[Ivana749]

Thank you @Code-Crafting 

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

[Ivana749]

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!

[DaisyVo]

Hi @Ivana749 

Please share your store URL

Best,

Daisy

[Ivana749]

Hello @DaisyVo 

Store URL is https://rymemories.com/