Fixed product image on page scroll, Turbo theme

Store Design
1

Hello everyone,

Screen Shot 2019-10-04 at 4.14.30 pm.png
Screen Shot 2019-10-04 at 4.14.30 pm.png598×551 69.9 KB

(took the pic here : https://community.shopify.com/c/Shopify-Design/Fixed-Sticky-Product-Imaged-on-Page-scroll-VENTURE-th…)

I need to do this to my product page (shown on image)

Can someone help me with that ?

Thanks a lot for your help.

2

Please provide website url and if your store is password protected then also provide password

1 Like
3

Hello, this is my store : pure-care.fr and the password is : prohge

Thanks

4

Please place this code at the end of theme.scss

@media only screen and (min-width: 768px) {
.product_section .product__images {
position: -webkit-sticky;
position: sticky;
    top: 13%;
}
}
1 Like
5

Thanks you so much ! It works.

When i scroll, there is a menu drop down (sticky like on the image)
How can I add some space between the menu dropdown and the sticky image (arrow in the screen) ?

Capture d’écran 2021-03-04 à 11.08.37.png
Capture d’écran 2021-03-04 à 11.08.37.png3326×1554 433 KB

6 
@media only screen and (min-width: 768px) {
.product_section .product__images {
position: -webkit-sticky;
position: sticky;
    top: 17%; /* change this to set position */
}
}
1 Like
7

Thank you for update.

1 Like
8

Thank you! it works great

1 Like
9

Hi @Hardik29418
I did the same thing in Turbo Theme 7.0.0
But it doesn’t works.

My store: https://hobberryshop.com/
Please help me