Show more of the product with a single cursor move.
Kowal Catalog Hover Image
Swap the image on the product list when the cursor hovers over it. Show a second view, a detail, or another side of the product without opening its product page.
Second image · Detail preview · Per-product settings
HOW IT WORKS IN PRACTICE
01 · You select the second image In the product gallery, you assign an image to the hover role.
02 · The customer hovers over the image The list displays the assigned alternative image.
03 · The cursor leaves the product The original image is displayed again.
What does your store gain?
Explore the module features, use cases, and settings.
Meet the module
Catalog Hover Image is a module for Magento 2 versions 2.3.* and 2.4.* that enhances the product list with interactive functionality. When a cursor hovers over any product on the list, a second image, the hover image, is displayed and can be configured individually for each product in the admin panel.
Key module features
Interactive product browsing: Allows customers to quickly preview an alternative product image without having to open the product detail page.
Easy configuration: In the Magento admin panel, you can assign a hover image for each product, giving you full control over how your assortment is presented.
Improved store visual appeal: The dynamic image change effect on mouse hover attracts customers attention and may increase engagement and conversion rates.
Benefits of using the module
Improved user experience: Makes it easier for customers to learn about the product, which may lead to faster purchase decisions.
Personalized product presentation: Lets you show different aspects of a product, such as other colors, patterns, or details.
Compatibility and reliability: The module has been tested and is fully compatible with Magento 2.3.* and 2.4.* versions.
How it works
Module installation: The installation process is simple and does not require advanced technical knowledge.
Set the hover image: In the admin panel, go to product editing and add an additional image as the hover image.
Effect on the storefront: When hovering over a product on the list, the configured second image is displayed automatically.
Support and documentation
Installation instructions: Detailed installation steps are available in the included documentation.
Technical support: If you have questions or issues with the module, we provide professional technical support.
Using the Catalog Hover Image module is a simple way to improve store functionality and increase customer satisfaction through a more interactive and attractive product presentation.
Image role and list behavior
You enable the module in Stores → Configuration → Kowal → Hover Catalog Image. The assigned image is saved in the hover_catalog attribute. If it is missing, the code checks the product thumbnail as a fallback image.
After the cursor leaves the image, the original image is restored. The script also supports product list content updates. The implementation uses jQuery and RequireJS; integration with another product list rendering method should be adjusted to the theme.
Installation via Composer
Package: kowal/hover-image; module: Kowal_CatalogHoverImage. After configuring access to the Kowal repository, install the package, enable the module, run the Magento update, and clear the cache. For production mode, include compilation and static content deployment appropriate for the environment.
From configuration to effect
1. You select the second image In the product gallery, you assign an image to the hover role.
2. The customer hovers over the image The list displays the assigned alternative image.
3. The cursor leaves the product The original image is displayed again.
Details visible directly in the catalog
Example: the main image shows the product from the front, while the hover image shows its back or a close-up of the material. The customer learns more details while browsing the list.
The effect is triggered by the cursor. On touch devices, the presentation method should be checked in the theme being used.
You will receive the access credentials for the Composer repository, the customer email address and license token, by email after purchase. They are also available in the customer panel after logging in at kowal.store. Replace TWOJ_EMAIL_KLIENTA with your account email address and TWOJ_TOKEN with the token you received. Run the commands in the Magento root directory.
Does the module allow displaying a second product image when hovering over the thumbnail in the product (catalog) list?
Answer
Yes — the module allows you to assign a so-called “hover image” (second image) to each product in Magento 2, which is shown when hovering over the product in the list.
Question
Which versions of Magento 2 does this module work with?
Answer
The module is compatible with Magento 2.3.* and Magento 2.4.* versions.
Question
Does installing the module require modifying Magento core or theme files?
Answer
No — installing the module does not require editing Magento 2 core files; it works as an extension in accordance with the Magento architecture.
Question
What does the configuration look like — do I need to manually assign a second image for each product?
Answer
Yes — the administrator in the Magento panel can assign a “hover image” for each product, which will be displayed when the cursor hovers over it.
Question
Does the module affect the store’s performance?
Answer
The impact is minimal — although it adds a visual “hover” effect, it does not require a heavy load and does not cause the store to run significantly slower if the images are optimized. (General knowledge about this type of extension)
Question
Does the hover effect also work on mobile devices?
Answer
Usually, the hover effect may be less intuitive on touchscreens (phones, tablets) — it’s worth checking whether the module has appropriate “touch” behavior or maintains fallback behavior on mobile devices.
Question
Can I set the hover effect to work only in specific categories or for specific product groups?
Answer
Although the main module description mentions assigning a hover image to a product, if you need conditional behavior (e.g., only for specific categories), it’s worth checking the documentation or asking the developer about the availability of filters.
Question
Can this visual effect help with conversions and user engagement?
Answer
Yes — the additional image on hover allows the customer to quickly view an alternative perspective of the product (e.g., a different color, pattern, or detail), which can improve the user experience and increase the chance of purchase.
Question
Does the hover image have to be a new file, or can it be one of the product images that have already been uploaded?
Answer
Usually, you can use existing images as the hover image — so you don’t necessarily need to upload a new file if you already have the image in the product gallery. (Typical functionality for this type of module)
Question
Do I receive technical support and updates after purchasing the module?
Answer
Yes — the module manufacturer states that it provides free updates and technical support for its extensions.
