Dual Image Hover on Product Listings

Dual Image Hover for Product Lists

This module adds a clean “secondary image on hover” effect to product thumbnails in your storefront’s product lists (e.g., category pages, search results, and other product lists that use grid or list layouts). When a product has a second image available, the image swaps on hover (and on first tap on touch devices).

Key features

• Second image hover effect for product lists (grid and list views).
• Touch-friendly behaviour: first tap reveals the second image on mobile devices.
• Only displays the effect when a second image is available.
• Uses public product images where available, with safe fallback handling.
• No core modifications required.
• Lightweight implementation using template override, CSS, and minimal JavaScript.
• Works with standard X-Cart product images and list rendering.

Compatibility

• X-Cart 5.6 (customer storefront)
• Designed to work with modern X-Cart skins and common product list layouts.

Installation

1. Install the module.
2. Rebuild cache.
3. Open a category page and hover a product image to see the secondary image (where available).

Notes

• If a product has only one image, the module displays the standard single image without changes.
• The hover effect follows the existing thumbnail sizing defined by your theme.
• Public images are preferred for secondary image display; fallback handling ensures compatibility across different store configurations.