How can I make a product image static on desktop?

Hi, I want to make this image static(only for desktop) when you scroll down on the page until the description is done..I ve search on google and I found I need to put on some div. The line code: position: relative; but it doesnt work.Anyone can help me?:slight_smile:

i let there the product page:

https://aiciavem.ro/collections/exoticwhip-640g-n2o/products/exoticwhip-640g-n2o

Hey @sao
Moeed here from Shopify Community,

Can you elaborate your problem further so that I can give you the best solution for your website?

Hi Moeed,yes for sure I can,thanks for help :slightly_smiling_face: .If u access the link I give you from a desktop you ll see when you scroll down the page the image will not stay on screen until we get another element on screen…I want to be like on that website : https://xmall.ro/products/vesta-lunga-vb60-carina-2xl-6xl-khaki

You see,if u access from desktop when you scroll down the image stays on the screen so the screen doesnt look so empty

Hi @sao

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file theme.css

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

.product-gallery–viewer.product-gallery–has-media

{

position: sticky !important;

z-index: 1;

top: 50px;

}

.product-gallery–navigation {

position: sticky !important;

z-index: 1;

top: 500px;

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

Thanks Victor, I really appreciate your help! :smiling_face_with_sunglasses: ?? :handshake: Right now Im not home,but when I arrive back first thing I will try your solution :smiley:

1 Like

Yeah, don’t Worry @sao . Hope it helps for you.

Hi back Victor :slightly_smiling_face: :D..The code works almost ok.. I let you a review to see that It have some bugs..I need a little bit of help pls :grinning_face_with_smiling_eyes:

https://vw1to7nk600es2vr-17291935808.shopifypreview.com

Hello @sao ,

It’s GemPages support team and glad to support you today.

I would like to give you a recommendation to support you so kindly follow 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 @GemPages ,the solution works perfectly,thanks a lot guys for taking your time for me.. :slightly_smiling_face: I remain indebt to all repliers with one beer :grinning_face_with_smiling_eyes:

1 Like

Thank you for your response!

Hello I have the same question, unfortunatelly your solution doesnt work for my theme Motion. I need the same photos that are slide with description while scrolling, like in example https://knightzodiac.com/products/custom-art-frame-real-moon-phase-for-mothers-day-gift

in desctope version of website. Could you help me with it? Maybe i need to add some code in custom css in customization?