Show second product image when hover on ProductBox? How to do it?

Hello.

Here is the question. I want to display second product image when customer hovers the product items in category page.

How to do it?

Thanks.

Hello Zaf,

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.

Thanks,
Jatin

zaf wrote:
A complete article at here: Develop Mouse Hover Product Image Swap To Make Your nopCommerce Site More Interactive

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.

Hi! maybe someone created plugin for it? or it's too specific?

We use 4.4 and nop-templates theme.