Solved

Make Product Images Sticky (Again) in Empire v11

matthewalker
Excursionist
21 1 4

Hello,

 

I'm trying to make my product images sticky in Empire v10. I had the following code in my theme.css file

 

@media(min-width: 750px){
	.template-product .site-main {
		overflow: visible;
	}
	.template-product .product-gallery.click-to-zoom-enabled {
		position: -webkit-sticky;
		position: sticky;
	    top: 0;
	    display: block;
	    align-self: flex-start;
	}
}

however after updating the theme this has stopped working.

 

Site is www.indigohomeandgift.co.uk

 

Thanks in advance.

Accepted Solution (1)
matthewalker
Excursionist
21 1 4

This is an accepted solution.

I've fixed it. There must have been some conflicting code in the file somewhere as I put 

 #site-main .product-gallery.click-to-zoom-enabled {
    height: fit-content;
    position: sticky;
    top: 177px;
    /* Ensure the sticky element appears above other content */
}

higher up in the theme.css file and this fixed it.  

View solution in original post

Replies 4 (4)

PageFly-Oliver
Shopify Partner
878 190 171

Hi @matthewalker ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
#site-main .product-gallery.click-to-zoom-enabled{
    height: max-content;
    position: sticky;
    top: 0px;
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

matthewalker
Excursionist
21 1 4

Hello Oliver,

 

Thank you for your help.

 

Unfortunately, this didn't work.

 

Any other suggestions?

 

Thanks

matthewalker
Excursionist
21 1 4

This is an accepted solution.

I've fixed it. There must have been some conflicting code in the file somewhere as I put 

 #site-main .product-gallery.click-to-zoom-enabled {
    height: fit-content;
    position: sticky;
    top: 177px;
    /* Ensure the sticky element appears above other content */
}

higher up in the theme.css file and this fixed it.  

NoviceShopOwner
Visitor
1 0 0

Brilliant. Worked a treat.