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

dimitrieraw
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.

 

veradek
New Member
2 0 1

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

talharehman
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

gosoul
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

sigmund
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
enrique00
Tourist
8 0 1

Thanks for adding pictures

0 Likes

@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.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
0 Likes
tablscape
New Member
1 0 0

Does anyone know how to revert this back to the original or what the original code was before editing? I tried to do this and it didn't work and I didn't write down the original code therefore can't switch it back. 

0 Likes
audreysurfin
New Member
1 0 0

Hi @tablscape 
Just launch a text research for "sticky_gallery" in the file Sections > product-template.liquid and remove them. 
You can also remove the sticky_gallery css from Assets > Theme.css. 

If you wanna try again, you can change the css, which isn't really correct in the messages above, with this (find snippet below).
You can change the value 690px for your own website mobile breakpoint (when your product page template switch for a mobile template, with a slider and all, so you don't need to stick anything).

@media screen and (min-width: 690px) {
  .sticky_gallery {
    position: sticky;
    top: 0;
  }
}

 

Hope this helps! 

0 Likes