Fixed product image on page scroll. Debut theme

Solved
Highlighted
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
Excursionist
37 7 8

You can look into 

 

position: sticky;

 

That's what you need.

1 Like
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
Trailblazer
529 129 170

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

Success.

Excursionist
37 7 8

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
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
Tourist
7 0 0

Hello @OTM 

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

Thank you !

0 Likes
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
Tourist
7 0 0

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

0 Likes
New Member
4 0 0

Hello!

 

How could you solve it?

 

Thanks in advance 

Ana

0 Likes