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

3 years ago
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.
3 years ago
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
3 years ago
zaf wrote:
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?

A complete article at here: Develop Mouse Hover Product Image Swap To Make Your nopCommerce Site More Interactive
2 months ago
Does anyone have an updated link for this article?
1 month ago
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.