Product Image on Hover Show Second Image

This is a guide on how to get a product's second image to show on hover. This is useful if a T-shirt has something on the back of it, so user's can hover over and see the back of the product without having to click on it and visit the product page. We will go over adding this effect to both the product page and the home page/collection page.

CSS

No matter which page you are adding this effect to, the CSS is the same. Paste the following code in your custom.scss.liquid file :

/* ===============================================
// Reveal module
// =============================================== */
.reveal .hidden { 
	display: block !important; 
	visibility: visible !important;
}
.product:hover .reveal img { 
	opacity: 1;
}
.reveal { 
	position: relative; 
}
.reveal .hidden { 
	position: absolute; 
	z-index: -1;
	top: 0; 
	width: 100%; 
	height: 100%;  
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;  
}
.reveal:hover {
	.hidden { 
	 	z-index: 100000;
	 	opacity: 1 !important;  
	}
	 .show{
	 	visibility: hidden !important;
	 }  
}

This code makes sure that on hover, the original image is hidden, and secondary image with the class of "hidden" displays like we want it to.

Product Page

If we want to add this effect to the product page, all we have to do now is add the appropriate HTML now that our CSS is in place. Open your product-page.liquid file and locate the featured image tag that holds the product thumbnail. It will be near the top of the file and look something like this.

Wrap that image tag in a div with a class of "reveal". Inside the div, add another image tag with a class of "hidden, and a source of

 src="{{ product.images[1] | img_url: 'large' }}"

This will be the secondary image that we don't want to display until the hover state. That code snippet should now look like this.

Save the file and refresh your store's product-page. The hover state should work now. When in doubt, try changing the source of the hidden image tag to "last"

Home/Collection Page

Adding this effect to either the home page/collection page should both be controlled by the same file, depending on the theme. Open your __product-image.liquid file or similar to make the changes. If you don't have that file, look in your product-loop.liquid file for the correct include file name. Once that file is open, find the {{ image }} liquid tag and comment it out. Add the following code in it's place.

In addition, you can add the product's anchor tag on the secondary image, so when hovered over, the user can still click on it and go to the product page. That would look something like this.

Save your file, and you're done! If you're having trouble getting it to work, try different prefixes instead of "product-loop", it may differ based on the theme.