Product Image Scroll Stop

mexican-hippo
Tourist
5 0 2

I have added this product bundle to bottom of my product page, but the problem is that I have fixed my product image so it sticks when you scroll down the page.

The product image now covers the bundle offer.

How to I make some sort of scroll stop, when the bundle appears?

my site is: pallas-sports.myshopify.com

password is: skkr 

The bundle appears on this product page: https://pallassports.com/collections/heavy-bags/products/everlast%C2%AE-elite-100-lb-c3-foam-heavy-b...

KetanKumar
Shopify Partner
14401 1672 5182

@mexican-hippo 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

it's default theme scroll effect 

may be just remove stick product image it's simple solution 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mexican-hippo
Tourist
5 0 2

But the problem is that I have actually come to like this feature of a sticky product image. Sometimes my descriptions can be really long and it looks so much better with a sticky product image.

unfortunately this is not something I can remove in the shopify theme customizer. (I use debut theme)

I have coded it using this code: 

.sticky {
position: -webkit-sticky;
position: sticky;
top: 15px;
z-index: +1;
@include media-query($small) {
position: relative;
top: 15px;
}

 

And I just thought since the product image automatically stops sticking when you reach the bottom of the product page where it says "YOU MAY ALSO LIKE" there must be something that can make the product image stop at the bundle section instead 

 

Thank you

 

0 Likes
SagarSukhanandi
Tourist
148 24 41

Hello @mexican-hippo, Happy to help you

You can convert THE ULTIMATE BOXING KIT section to 50% align right so section looks perfect with fixed image.

Here you can see how it will look

Desktop :

product.png

Mobile : 

product-mobile.PNG

 

If you need help on css then tell me

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
mexican-hippo
Tourist
5 0 2

Yes that would be a great solution, though I could use some help with the CSS

Thank you

0 Likes
SagarSukhanandi
Tourist
148 24 41

@mexican-hippo Could you please share product with more than two product bundle so i can share css with you

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes