Here is the question. I want to display second product image when customer hovers the product items in category page.
How to do it?
You have to do customization like get two images for each product when page load.
Then using jquery on hover event you can change img src.
Let me know if you need further help.
Does anyone have an updated link for this article?
You'll need to make code customizations with 2 files. The first one is your product-grid-item.liquid file. You'll need to replace a section of code with new code. Check which version of Pipeline you're using to help find the correct code required. Click on the link below to open your product-grid-item file in the HTML/CSS editor, find the old code based on your version, highlighted in a red box. Then replace that section with code from the green box of your version. The second step is to add some style code to the very bottom of your style.css.liquid file.