Shopify Change Image on Hover Tutorial - Venture Theme
In this video, I cover how to implement an image change when hovering over products on your Shopify collections page.
More Venture Feature Tutorials: • Shopify Venture Coding Tutorials
Scale your Shopify sales: https://willmisback.com
Connect with me: / will-misback
My Latest Shopify Tips & Tricks: https://wmiz.github.io/mastering-shop...
0:00 Intro
0:40 Feature Demo
1:58 Shopify Backend
3:40 Coding Tutorial
10:00 Outro
To show the second product image instead of the last type "product.images[1]" instead of "product.images.last"
If you have any trouble implementing this or have any questions about Shopify in general, let me know in the comment section below! I will be sure to help you as best I can.
Tutorial adapted from: https://community.shopify.com/c/Shopi...
UPDATE: 7/28/2021
Fixed Products in menu triggering reveal module
Reveal Module Code Block:
/* ===============================================
// Reveal module
// =============================================== */
.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;
}