Choosing size and colour from the product listing: fewer clicks to the cart

Your customer is in the T-shirts category. They have seen the one they like. To buy it, they have to open the product page, wait for it to load, choose size and colour, add it to the cart and go back to keep browsing. With one product it is a small detour. With five, it is the point at which many people stop adding things and leave.

In PrestaShop, products with combinations (size, colour, format) cannot be added to the cart from the listing out of the box: depending on the theme, the button does not appear or turns into «View details». Letting customers choose options in the listing itself removes that step.

When it pays off

Not in every store. It works best when:

• The customer already knows what they want: repeat purchases, basics, consumables, products that do not require reading the product page.
• Several products are bought per order: basic clothing, office supplies, food by pack size, spare parts.
• There are few, clear combinations: three sizes and four colours, not twenty technical variants.
• B2B or replenishment sales, where the buyer comes with a list.

It pays off less for products that need explaining (a household appliance, a technical product), where the product page is part of the sale. There, the shortcut can lead the customer to buy without reading what they should and end up returning it.

How to show the options without breaking the listing

On desktop

There are several ways, and each one suits a type of theme:

• Over the product image, on mouse hover: quick, but with little space.
• Centred window: more space, without leaving the page.
• Side panel sliding in from the right, full height: comfortable with many options.
• Bottom card, which barely covers the listing.

On mobile

What works with a mouse does not always work with a thumb. The most comfortable option is usually a sheet that slides up from the bottom, within reach of the finger. Over the image, on a narrow mobile card, the buttons end up too small.

What it has to get right

1. Default combination already selected, so the customer only changes what they need.
2. The price of the chosen combination, not the «from» price in the listing. If the large size costs more, the customer has to see it before adding.
3. Out-of-stock options struck through or hidden. A button that can be clicked and then says «out of stock» is frustrating.
4. Jumping to an available combination. If they choose a colour that does not exist in their size, it is better to go to the closest combination that can be bought than to leave them with a greyed-out button.
5. Colours as swatches, not as text. «Navy blue» and «midnight blue» say nothing; a coloured circle does.
6. Adding through PrestaShop's normal flow, respecting minimum quantities and showing your theme's «product added» window.
7. Working alongside the side cart and other modules' floating notices, without leaving the page blocked.

Images per attribute: seeing what you choose

Choosing from the listing works much better if the customer sees what they are choosing. Two details make the difference:

The image changes with the combination

If the red T-shirt has its own photo, choosing red should switch the listing thumbnail to the red one. The customer confirms they are buying what they think they are.

Images for more than just colour

PrestaShop only displays images next to an attribute when the group is of the «Color or texture» type. A size, a format, a weight or a finish appear as text or a drop-down. But «250 g» and «4 kg» look nothing alike: one is a tub and the other a sack. With an image per attribute value, the customer understands at a glance, on the product page and in the listing.

The thing to watch here is not to throw the grid out of line: if one product shows six combination thumbnails and the one next to it none, the cards end up at different heights and the listing looks broken. A single fixed-height row, with a «+3» for whatever does not fit, solves it.

How to measure whether it works

• Add-to-carts from the listing versus from the product page.
• Products per order: if it goes up, the shortcut is making multi-item purchases easier.
• Returns due to the wrong size or colour: if they go up, information may be missing (a size guide, a clearer photo).
• Mobile versus desktop comparison: the style that works on one will not necessarily work on the other.

The theme matters

How the add button behaves depends on the theme. Classic does not show it in the listing; Hummingbird, the default theme in PrestaShop 9, shows «View details» on products with combinations if configured to do so. If your store is still on an old 1.6 or 1.7 theme, with old jQuery and heavily modified templates, any improvement to the listing costs more. Updating the theme and PrestaShop usually makes this kind of change much simpler.

Checklist

• Decide in which categories the shortcut makes sense.
• Different styles for mobile and desktop if needed.
• Default combination selected and combination price visible.
• Out-of-stock options struck through or hidden.
• Test with filters and pagination.
• Images per combination, also for formats and sizes where they help.
• Cards aligned in the listing.

How to solve it in PrestaShop

Añadir combinaciones desde el listado opens the options in the listing itself, over the image, in a window, in a side panel or in a bottom card on desktop, and in a bottom sheet, window or over the image on mobile, with the default combination selected, the price of the chosen combination, colour swatches, out-of-stock options struck through or hidden and a jump to the closest purchasable combination. It works on categories, search, the home page, brands and listings reloaded via AJAX, adds through PrestaShop's standard flow and works alongside side carts, from 1.7.6 to 9. RKR Imágenes de combinación assigns an image to any attribute value, even if the group is not a colour group, globally, per product or via CSV, and shows it on the product page, the quick view, listings and home page carousels, with a fixed-height strip that keeps the cards aligned.