Swatch Chart for PrestaShop – colour and texture samples on the product page

What the module does

Swatch Chart shows every value of the selected “Color or texture” attribute groups on the product page as large, named samples. The customer clicks a sample and sees it enlarged without leaving the product page. The module was written for shops selling furniture, upholstery fabrics, wooden flooring, paint and wallpaper – wherever the look of the material decides the purchase.

Where the chart appears

By default, below the “Add to cart” button. On the product page in the back office, in the Modules tab, you tick the attribute groups that go into the chart – separately for each product.

The chart can also be placed anywhere in the description or the short description, with one of two shortcodes:

• [pdswatchchart] – the groups ticked on the product page,
• [pdswatchchart ids="5,7"] – the groups with the given IDs, whatever is ticked.

The module removes the paragraph wrapping the shortcode, so the description HTML stays valid and the chart renders as a block element. When the shortcode is in the description, the chart is not shown a second time below the button.

Samples and zoom

• If an attribute value has a texture image uploaded, the sample shows the image. The HEX colour is used only when there is no image.
• The enlarged sample opens in a lightbox. It closes with the cross, a click on the backdrop or the Esc key.
• The lightbox has ARIA attributes and aria-label texts, and after closing the focus returns to the clicked sample.
• Samples are responsive, and the chart keeps working after a combination change, when PrestaShop refreshes the page over AJAX.

Why a shop needs it

The customer sees every available finish in one place and can look at each one closely before adding the product to the cart. The aim is fewer orders coming back because the shade or the structure of the material turned out different from what the customer imagined. All configuration is done on the product page, without editing theme templates.

In the back office

When a product is duplicated, the module copies its group selection; when a product is deleted, it removes its entries. The interface is available in Polish and English.

Requirements

• PrestaShop 8 or 9,
• PHP 7.2 to 8.4,
• attributes of the “Color or texture” type created under Catalog → Attributes & Features,
• any theme – the chart works without changes to product.tpl.

Installation

Upload the package in the Module Manager, or copy the folder to modules/ and install the module with the console command. After installation every product page gets a tab where you tick the attribute groups to display. The package includes a readme file. Among other things it explains how to change the look of the samples with CSS variables and how to override the chart template in the theme.