How to show the photo of each colour or variant on the PrestaShop product page
· 2 min read
A dropdown that reads «Blue, Red, Green» makes customers guess what each version looks like. Here is how to use the images you already have on your combinations to show each option with its photo, what to check in your catalogue and theme, and how Variants by attribute does it without coding.
The problem: choosing a variant blind
In many PrestaShop shops the colour or finish is picked from a dropdown of names: «Blue, Red, Green», «Walnut, Oak». Customers have to imagine each one or click through the options and wait for the main photo to change.
- Some give up and leave.
- Others pick the wrong variant and send it back, with the shipping and handling cost that means.
- On mobile, dropdowns are even more awkward.
The irony is that the photos already exist: they are assigned to each combination in the catalogue. They just need to be shown where the customer decides.
The solution: a row of thumbnails with the real photo
1. Assign an image to every combination
On the product page, in the combinations tab, tick the image that represents each combination. Without this, no solution can show the right photo. Start with your best sellers.
2. Choose the leading attribute
Usually it is colour, but it can be finish, material or pattern. Thumbnails should group by that attribute: if a product has colours and sizes, show one thumbnail per colour, not one per combination.
3. Show thumbnails next to the selector
The best spot is right below the attribute selector, before «Add to cart». Clicking a thumbnail should select that option in the theme's native selector, so price, stock and cart keep working as usual.
4. Mind size and accessibility
Use a PrestaShop image type close to the thumbnail size so it is neither blurry nor heavy. Add the option name as alt text and highlight the chosen variant.
Themes with «colour swatches» usually show only a square of the attribute colour, not the real photo of the product in that colour, which is what actually helps people decide.
How Variants by attribute helps
Variants by attribute is our module for PrestaShop 1.6.1 to 9.2 (PHP 7.1 to 8.4) that puts the real photo of each option on the product page:
| Need | What the module does |
|---|---|
| Real photos | One thumbnail per value of the chosen attribute, using the image already assigned to its combination. Nothing new to upload. |
| One click | The thumbnail selects the option in the theme's native attribute selector: prices, stock and cart are untouched. |
| Any attribute | Colour, finish, material, pattern… whichever attribute group you set. |
| Size | Thumbnails from 24 to 200 px and the image type of your choice, validated so they are never blurry. |
| Clarity | Current variant highlighted and option name as tooltip and alt text. Only shown when the product has two or more values. |
| Position | Works on install in the standard displayProductAdditionalInfo hook; to place it right after the selector, add one line to the template, explained in the Help tab. |
| Lightweight | Only its own stylesheet and script, no external requests and no extra tables. Uninstalling leaves nothing behind. |
Pick the attribute group and size, save, and your customers see every option before choosing.