Product Image Hover & Automatic Badges — Configuration Guide

This guide explains how to install and configure the Product Image Hover & Automatic Badges module for PrestaShop 8 and 9. The module shows the product’s second image on hover in listings and automatically applies New, Sale and Low stock badges based on rules you define, without overriding your theme.

Installation

Installation works like any PrestaShop module:

1. From the back office, go to Modules > Module Manager.
2. Click Upload a module and drop the module’s ZIP archive.
3. Once installation is complete, click Configure to open the settings page.

The module registers the actionFrontControllerSetMedia hook and loads its assets (CSS and JavaScript) only on listing pages and the product page. No template file is overridden.

Hover image settings

The first configuration block controls the hover image swap:

• Show second image on hover: enables or disables the effect. Products with a single image are skipped automatically.
• Transition effect: Fade, Fade + zoom or Instant.
• Badge position: the corner where badges appear (top left, top right, bottom left, bottom right). This setting is shared by all badges.

The hover image is the product’s second image according to the position order defined in the Images tab of the product sheet. To change the image shown on hover, simply reorder the product’s images.

The three automatic badges

Each badge can be toggled independently, with its own multilingual label, background color and text color.

“New” badge

It is shown for a configurable number of days after the product creation date. The default value reuses the PrestaShop PS_NB_DAYS_NEW_PRODUCT setting. Set the desired duration in the Product is new for (days) field.

“Sale” badge

It appears when a product is flagged “On sale” or when a specific price with a reduction is active for the visitor’s context (shop, currency, country, customer group and validity dates). The Show discount percentage option replaces the label with the value, for example -20%, when the reduction is percentage-based.

“Low stock” badge

It appears when the product’s available quantity is strictly greater than 0 and lower than or equal to the low stock threshold you define. The quantity is read from the stock_available table with multistore resolution (the current shop takes priority over the shop group).

Multilingual labels

The New, Sale and Low stock labels ship by default in French, English, Spanish, German and Italian. Each label is editable language by language from the configuration page: select the language in the field selector, then enter the desired text.

Performance and compatibility

• A single grouped AJAX call per page fetches the data for all visible products (up to 120 products per batch).
• The hover image is lazy-loaded, only on the first mouse hover.
• The script is vanilla JavaScript, with no jQuery dependency.
• The module detects product miniatures in JavaScript: it is compatible with the classic theme and child themes, and re-adapts automatically after faceted navigation and AJAX pagination.
• On touch-only mobile, the hover image swap is disabled automatically.

Troubleshooting

The hover shows no second image. Check that the product has at least two images in the Images tab of its sheet, and that the hover image option is enabled.

A badge does not appear. Make sure the badge is enabled, that its label is not empty for the current language, and that the condition is met (recent product, active specific price, or quantity below the threshold).

Nothing shows after filtering. The module re-adapts after faceted navigation; if your theme uses a custom rendering mechanism, clear the PrestaShop cache (Advanced Parameters > Performance) after installation.