PS PrestaShop PrestaShop Beginner

Product Comparison Module — Installation and configuration

Installation, configuration and how the Product Comparison module works.

Updated Module version 1.0.0

Overview

The Product Comparison module (dfcomparator) adds a complete side-by-side comparator to your PrestaShop store. “Compare” buttons appear automatically on the product page and in listings, and a dedicated page lines up the selected products in columns: price, features, availability, and more.

The comparator is written in vanilla JavaScript, with no jQuery or external dependency. It works right after installation, with no extra configuration.

Compatibility

  • PrestaShop 8.0 to 9.x
  • Single store and multistore
  • 5 languages: FR, EN, ES, DE, IT
  • No dependency (no Composer, no framework)

Installation

  1. In the back office, open Modules > Module Manager.
  2. Click Upload a module and select the dfcomparator.zip file.
  3. Once installed, click Configure.

The module automatically registers its hooks (actionFrontControllerSetMedia, displayProductAdditionalInfo, displayFooter) and creates its storage table on installation. Uninstalling removes that table.

Configuration

General

  • Maximum number of products: from 2 to 6 comparable columns (4 by default).
  • Button label: text shown on the “Compare” button.
  • Accent colour: colour of buttons, badges and highlighted elements.
  • Open in a new tab: opens the comparison page in a separate tab.

Button placements

  • Show on the product page: adds the button on the product sheet.
  • Show in listings: adds the button on listing thumbnails (categories, search).
  • Floating bar: displays the persistent comparison bar with thumbnails and counter.

In listings, the buttons are re-injected automatically after every Ajax filtering (faceted navigation, pagination, sorting).

Comparison page

  • Best-price highlight: highlights the lowest-priced column with a badge.
  • Price row: shows or hides the price row.
  • Add-to-cart button: adds a cart button in each column.
  • Frozen columns (sticky): freezes the header and first column while scrolling.
  • Differences only by default: enables hiding identical rows from the start.

Compared rows

Each row can be enabled or disabled individually: reference, brand, condition, availability, weight, dimensions and short description. Product features (PrestaShop “Features”) are added automatically, one row per feature, in the order defined in the catalogue. A row is flagged “identical” when its value is the same across all compared products.

How it works and persistence

The selection is kept client-side by a browser token (cookie dfcmp_token) backed by a localStorage mirror for instant rendering. For a logged-in customer, selections made on several devices are merged. A shareable URL (by product IDs, ?ids=...) lets you send or find a comparison again.

Performance

The module loads its scripts only when needed and makes an Ajax call only on an action (add, remove, open). The initial bar rendering relies on the local cache, without waiting for the server.

FAQ and troubleshooting

The “Compare” button does not appear

Check that product page / listings display is enabled in the configuration, then clear the PrestaShop cache (Advanced Parameters > Performance). On a heavily customised theme, the listing button is inserted into the product thumbnail: make sure the theme exposes the product ID on the thumbnail.

The floating bar stays empty

The bar only appears once at least one product has been added to the comparison. Also check that the “Floating bar” option is enabled.

The best price is not highlighted

Enable the “Best-price highlight” and “Price row” options. The highlight compares the products’ displayed final tax-included prices.

Was this page helpful?

Still stuck? Contact support