Fixed product image on page scroll. Debut theme

Solved
Tourist
7 0 0
 

Hello community! 

 

I'm struggling to get product image fixed on the screen while scrolling (on desktop only, not Mobile). I'm currently on the Debut theme and the product image is zoomable. 

Attached is a mockup of the images on the left side of the page I would like to make sticky so there's no blank white space on the left when the user scrolls down upon viewing product description details. 

 

I have tried everything! I can't work it out, shopify help said they 'can't help me with code changes', and all the other forum posts I have seen on this issue has not been resolved :( 

 

If someone has any CSS/JS suggestions I could use to solve this it would be much appreciated!! 

 

Thank you in advance!

 

Screen Shot 2019-10-04 at 4.14.30 pm.png

0 Likes
Highlighted
Shopify Partner
79 15 15

You can look into 

 

position: sticky;

 

That's what you need.

1 Like
Highlighted
Tourist
7 0 0

Thank you @ikolarov , 

 

Do you have any ideas on where I am to put this?

I have tried a combination of CSS at the end of the Theme.Liquid however unfortunately it didn't work :( 

 

I tried; 

.product.featured_image {

  position: -webkit-sticky;

  position: sticky;

  top: 40px;

}

 

0 Likes
Highlighted
Shopify Expert
667 170 203

Hi, @FurryFriends ,

This is Evita from On The Map.

 

Can you add your store URL?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Highlighted

Success.

Shopify Partner
79 15 15

Your parent element ( the element that holds the left and right section ) must have a position: relative; set to it.

 

Here is an example jsfiddle: https://jsfiddle.net/f7omjkn5/

 

In addition if there is element with "overflow: hidden" that hold the sticky element, this won't work.

 

Example how it breaks when there is an "overflow: hidden;" added to the top wrapper: https://jsfiddle.net/f7omjkn5/1/

1 Like
Highlighted
Tourist
7 0 0

Hi @OTM 

Thank you so much for your reply, 
I have yet to make it live, however can I provide you the product.Liquid or product-template.liquid instead? 

 

0 Likes
Highlighted
Tourist
7 0 0

Hello @OTM 

The shop URL is  https://www.furryfriends.boutique

Thank you !

0 Likes
Highlighted
Tourist
7 0 0

Thank you so much for this! I have tried everything you suggested, but it still won't work! Would you mind looking at my page code? it would be so appreciated!!


@ikolarov wrote:

Your parent element ( the element that holds the left and right section ) must have a position: relative; set to it.

 

Here is an example jsfiddle: https://jsfiddle.net/f7omjkn5/

 

In addition if there is element with "overflow: hidden" that hold the sticky element, this won't work.

 

Example how it breaks when there is an "overflow: hidden;" added to the top wrapper: https://jsfiddle.net/f7omjkn5/1/



my Url ishttps://www.furryfriends.boutique/collections/homepage/products/hygienic-pooper-scooper

 

0 Likes
Highlighted
Tourist
7 0 0

I worked it out! thank you so so much!!!

0 Likes
Highlighted
New Member
4 0 0

Hello!

 

How could you solve it?

 

Thanks in advance 

Ana

0 Likes