How To Make A Sticky Product Image While Scrolling Informations In Dawn Theme

Store Design
, , , ,
1

On my product page, Im trying to make the product images sticky when scrolling on the right side (all informations of the product), so the customer can read the description while still viewing the product images.

Im using Dawn Theme 15.2.0 and this is my store: https://bipperly.com/

Thanks !

2

Hey @Bipperly,

In order to make the product media Sticky in the latest version of Shopify Dawn theme, then you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> base.css

In the end of base.css paste the following code that shared below.

@media screen and (min-width: 990px) {
  .product--stacked .product__media-wrapper,
  .product--large-media .product__media-wrapper {
    position: sticky;
    top: 80px; /* Adjust based on header height */
    height: fit-content;
  }
}

Let me know if this works for you.

3

Hey !

Thanks for your reply,

I pasted the code in base.css but it doesn’t seem to be working; the images are still scrolling.

Here is the link : Alarme connectée – Bipperly

4

Hey @The_ScriptFlow

Could there be an error in my code base.css?

Let me know and thanks again for your help !

6

@The_ScriptFlow

Is that this link ? ukzrjq-qt.myshopify.com

7

Ah, Sorry I requires your store collab code.

9

Yes it is. I just send you request. Please accept it.

10

@Bipperly - please delete your collab code post, as it should not be made public, and send it to @The_ScriptFlow in messages option.