Make Product Images Sticky (Again) in Empire v11

[matthewalker]

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.

[PageFly-Oliver]

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

[matthewalker]

Hello Oliver,

Thank you for your help.

Unfortunately, this didn't work.

Any other suggestions?

Thanks

[matthewalker · 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]

Brilliant. Worked a treat.