Cómo mostrar la foto de cada color o variante en la ficha de producto de PrestaShop
· 3 min de lectura
Un desplegable que dice «Azul, Rojo, Verde» obliga al cliente a adivinar cómo es cada versión. Te explicamos cómo aprovechar las imágenes que ya tienes en tus combinaciones para enseñar cada opción con su foto, qué revisar en tu catálogo y tu tema, y cómo Variantes por atributo lo hace sin programar.
El problema: elegir una variante a ciegas
En muchas tiendas PrestaShop el color o el acabado se elige en un desplegable con nombres: «Azul, Rojo, Verde», «Nogal, Roble». El cliente tiene que imaginar cómo es cada uno o ir pulsando opciones y esperar a que cambie la foto principal.
- Algunos se cansan y se van.
- Otros eligen la variante equivocada y la devuelven, con el coste de envío y gestión que eso supone.
- En el móvil, los desplegables son aún más incómodos.
Lo curioso es que las fotos ya existen: están asignadas a cada combinación en el catálogo. Solo falta enseñarlas donde el cliente decide.
La solución: una fila de miniaturas con la foto real
1. Asigna una imagen a cada combinación
En la ficha del producto, en la pestaña de combinaciones, marca para cada combinación la imagen que la representa. Sin eso, ninguna solución puede enseñar la foto correcta. Revisa sobre todo los productos más vendidos.
2. Elige el atributo que manda
Normalmente es el color, pero puede ser el acabado, el material o el estampado. Las miniaturas deben agrupar por ese atributo: si un producto tiene colores y tallas, se muestra una miniatura por color, no una por cada combinación.
3. Muestra las miniaturas junto al selector
El mejor sitio es justo debajo del selector de atributos, antes del botón «Añadir al carrito». Al pulsar una miniatura debe seleccionarse esa opción en el selector nativo del tema, para que el precio, el stock y el carrito sigan funcionando igual.
4. Cuida el tamaño y la accesibilidad
Usa una versión de imagen de PrestaShop de tamaño parecido a la miniatura para que no se vea borrosa ni pese de más. Añade el nombre de la opción como texto alternativo y resalta la variante elegida.
Los temas que traen «muestras de color» suelen enseñar solo un cuadrado del color del atributo, no la foto real del producto en ese color, que es lo que de verdad ayuda a decidir.
Cómo te ayuda Variantes por atributo
Variantes por atributo es nuestro módulo para PrestaShop 1.6.1 a 9.2 (PHP 7.1 a 8.4) que pone la foto real de cada opción en la ficha de producto:
| Necesidad | Qué hace el módulo |
|---|---|
| Fotos reales | Una miniatura por cada valor del atributo elegido, con la imagen ya asignada a su combinación. Sin subir nada nuevo. |
| Un clic | La miniatura selecciona la opción en el selector de atributos nativo del tema: precios, stock y carrito no cambian. |
| Cualquier atributo | Color, acabado, material, estampado… el grupo de atributos que indiques. |
| Tamaño | Miniaturas de 24 a 200 px y la versión de imagen que elijas, validado para que nunca se vean borrosas. |
| Claridad | Variante actual resaltada y nombre de la opción como texto emergente y alternativo. Solo aparece si el producto tiene dos o más valores. |
| Posición | Funciona al instalar en el hook estándar displayProductAdditionalInfo; para ponerlo justo tras el selector basta una línea en la plantilla, explicada en la Ayuda. |
| Ligero | Solo su hoja de estilos y su script, sin peticiones externas ni tablas extra. Al desinstalar no deja rastro. |
Eliges el grupo de atributos y el tamaño, guardas y tus clientes ya ven cada opción antes de elegir.