Sticky/Fixed image on product page Brooklyn theme. How?

Highlighted
Tourist
9 0 2

Guys, I need your help because I don't have any coding experience. For the past couple of days, I've been trying to figure out how to make a fixed product image display on the product page, where the description scrolls up/down till the next section and the image on the left is fixed.

 

The reason is pretty simple. I love the thumbnails easy display and I want to avoid having white space (left) after we start scrolling down the page. If you can figure this out, you get a beer or 10. Cheers!

 

PS: This will only affect the desktop browsing, of course.

 

Highlighted
New Member
2 0 1

I'm also looking for the same solution if anyone has it!!

Highlighted
New Member
1 0 1

First, goto theme editor and then add class in gallery Div "sticky_gallery"

 

WhatsApp Image 2020-04-15 at 10.38.49 AM.jpeg

 

 

then  goto theme.scss and add its styling 

@media all and (min-width: 768px) {

.sticky_gallery{

position: sticky;

    top: 0;

}

}

WhatsApp Image 2020-04-15 at 10.38.50 AM.jpeg

 

Check it in action here: https://stnza.com/collections/men/products/short-sleeve-unisex-t-shirt

Highlighted
New Member
1 0 1

I tried to do the same changes on the theme 'Minimal' and it worked!!! Thank You very much. 

 

Just copy the following codes and paste them at the right places, as you can see on the pictures.

 

sticky_gallery

 

@media all and (min-width: 768px) {

.sticky_gallery{

position: sticky;

top: 30px;

}

}

 


Bildschirmfoto 2020-04-22 um 22.03.02.pngBildschirmfoto 2020-04-22 um 22.02.08.png

Highlighted
New Member
1 0 0

Hey, 

I tried adding the code above but it still doesn't work. Is there something I'm missing?

0 Likes
Highlighted
Tourist
6 0 1

Thanks for adding pictures

0 Likes
Highlighted

@dimitrieraw 

I believe you want something like this? I coded this one for this client a few weeks ago.

It's actually somewhat complex, perhaps someone around here may be kind enough to devote their time to do it for you but if it's something you need asap you may want to consider hiring a developer.

The main issue is that while it may work ok on a few devices it has huge potential to break on others, so there is a lot of testing involved.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I am currently available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
0 Likes