Solved

Fixed product image on page scroll, Turbo theme

PureCare
Tourist
4 0 1

Hello everyone, 
Screen Shot 2019-10-04 at 4.14.30 pm.png

(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.

Accepted Solutions (2)
Hardik29418
Shopify Partner
2858 407 1073

This is an accepted solution.

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%;
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Hardik29418
Shopify Partner
2858 407 1073

This is an accepted solution.

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

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 8 (8)

Hardik29418
Shopify Partner
2858 407 1073


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

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
PureCare
Tourist
4 0 1

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

Thanks 

Hardik29418
Shopify Partner
2858 407 1073

This is an accepted solution.

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%;
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
PureCare
Tourist
4 0 1

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

Hardik29418
Shopify Partner
2858 407 1073

This is an accepted solution.

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

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Hardik29418
Shopify Partner
2858 407 1073

Thank you for update.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
wily8906
Visitor
2 0 1

Thank you! it works great

lthnt94
Visitor
1 0 0

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