Solved

Sticky Product image in Debutify theme

mcbabyshop
Visitor
2 0 1

I look through the solution from other but still cannot find a right solution for my store.

From desktop view, it looks odd when I scroll down and half of the page had no image on the left as I have a long long product description on the right.

Tried to paste this code under theme.scss.liquid

 

@media(min-width:767px){ #site-main:has([data-product-wrapper] article .product-gallery){ overflow:unset !important } #site-main [data-product-wrapper] article .product-gallery{ position: sticky; top: 95px; height: fit-content; } }

 

But it did not work me.

My store URL is mcbabyshop dot com

Accepted Solution (1)

codewiser
Shopify Partner
76 34 31

This is an accepted solution.

Hello @mcbabyshop 

 

Step 1: Go to Online Store -> Theme -> Edit code.
Step 2: Search file theme.scss
Step 3: Paste the below code at bottom of the file -> Save
 
@media screen and (min-width: 769px){
    #shopify-section-product-template .product-wrapper >.grid__item {position: sticky; top: 00; height: fit-content;}
}

 

If your problem solved then Like & Accept this Solution.
For Designing, Development and custom changes hire us. Email us Or WhatsApp Or Skype.

View solution in original post

Replies 4 (4)

codewiser
Shopify Partner
76 34 31

This is an accepted solution.

Hello @mcbabyshop 

 

Step 1: Go to Online Store -> Theme -> Edit code.
Step 2: Search file theme.scss
Step 3: Paste the below code at bottom of the file -> Save
 
@media screen and (min-width: 769px){
    #shopify-section-product-template .product-wrapper >.grid__item {position: sticky; top: 00; height: fit-content;}
}

 

If your problem solved then Like & Accept this Solution.
For Designing, Development and custom changes hire us. Email us Or WhatsApp Or Skype.
mcbabyshop
Visitor
2 0 1

Thanks. It works perfectly.

Credit to Codewiser

Markty
Visitor
1 0 0

Could you check with me because i tried pasting it in my debutify code but its not working

 

codewiser
Shopify Partner
76 34 31

@Markty 

Sorry for the very late response.

 

Can you please share your store URL?

If your problem solved then Like & Accept this Solution.
For Designing, Development and custom changes hire us. Email us Or WhatsApp Or Skype.