Make Product Image Sticky

Overview

Are your options hidden below the page fold and are unable to see the product image or Image Customizer? This tutorial will cover how to make the image scroll down the page with your options. This will also apply to the product photos and products that do not have Image Customizer or options applied to them. 

We recommend duplicating your theme before making any changes or styling to the theme. Also be sure to check and test the changes on the preview feature to see if the changes effected any additional Find your product-template or product-description. Locate the image wrapper

If you have any questions, please feel free to reach out to us at [e-mail] 

---

 

Solution

Find the wrapper div for the image section of your product. This should be found in the product-template file. 

Add the class w3-image-sticky to the div. 

Code

Add the following CSS snippet into your themes style-sheet. This 

.w3-image-sticky{
    position: -webkit-sticky; 
    position: sticky; 
    top: 0;
    padding-top: 0.5em;
}

Troubleshoot

The image is not sticking to the top of the page.

This could be caused by a CSS property overflow being applied to a parent element. This CSS property will need to be removed for the image element to be sticky. 

If you have any troubles applying this effect, please feel free to reach out to us at [e-mail]