Fixed product image on page scroll. Debut theme

Solved
FurryFriends
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
ikolarov
Shopify Partner
101 17 24

You can look into 

 

position: sticky;

 

That's what you need.

FurryFriends
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
OTM
Shopify Expert
668 170 245

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!
ikolarov
Shopify Partner
101 17 24

This is an accepted solution.

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/

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

Hello @OTM 

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

Thank you !

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

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

0 Likes
Ana18
New Member
5 0 0

Hello!

 

How could you solve it?

 

Thanks in advance 

Ana

0 Likes