Rediseñar una tienda PrestaShop sin tocar la plantilla

Hace unas semanas contamos el rediseño de la portada de velasdeolor.es. Una portada moderna, sin embargo, deja en evidencia todo lo demás: si al entrar en una categoría o en una ficha de producto el estilo cambia, la tienda parece hecha a trozos. En octubre de 2026 llevamos ese aspecto al resto de la tienda. Este artículo resume qué cambiamos y, sobre todo, cómo lo hicimos sin modificar los archivos de la plantilla.

Por qué no tocar la plantilla

La tienda usa Warehouse, una plantilla comercial muy completa para PrestaShop. La tentación habitual es editar sus archivos para conseguir el diseño deseado, y es un error que sale caro: cada actualización del tema o de PrestaShop puede borrar esos cambios, y cada ajuste de estilo obliga a volver a tocar código.

Por eso todo el rediseño se hizo con herramientas que sobreviven a las actualizaciones:

Las opciones del propio tema (colores, botones, etiquetas, cabecera…).
El maquetador de la plantilla para los bloques de contenido, como el pie de página.
CSS personalizado desde el editor del tema, en bloques comentados y fáciles de deshacer.
Pequeños módulos propios cuando hacía falta lógica.

Antes de cada cambio guardamos una copia de los valores anteriores, y el dueño de la tienda veía capturas en móvil y escritorio antes de publicar nada.

Un solo color, con contraste suficiente

Al revisar la tienda encontramos varios tonos de rosa distintos (el del logo, el de los botones de la portada, el de los iconos, el de los menús…) y colores que no tenían nada que ver con la marca: botones verdes en el banner de cookies, una caja azul en el aviso de envío gratis, etiquetas moradas en las ofertas y marrones en «Sin stock».

Además, el rosa más usado, el del logo, tenía un problema serio: con texto blanco encima daba un contraste de 2,4:1, muy por debajo del 4,5:1 que piden las pautas de accesibilidad para texto normal. Se veía bonito, pero se leía mal.

La solución fue unificar todo en un rosa más intenso (contraste de 5,3:1 con blanco), un tono más oscuro para el efecto al pasar el ratón y un rosa muy claro para fondos. El rosa del logo se quedó solo en el logo. Y algunas decisiones concretas:

«Sin stock» en gris, no en rosa: así no parece un botón ni una oferta.
Todos los precios en gris oscuro, en lugar del rojo ladrillo que chocaba con el rosa.
En el banner de cookies, «Aceptar» y «Rechazar» con el mismo estilo. Rechazar tiene que ser tan fácil como aceptar. De este banner contamos también por qué volvía a aparecer en algunas páginas y cómo lo solucionamos.

Si te interesa la accesibilidad, contamos más en nuestro artículo sobre accesibilidad en WordPress: los principios son los mismos en cualquier web.

Cabecera: lo importante a mano

Barra de envío gratis encima de la cabecera: «Envío gratis desde 15 € en Península». Antes solo aparecía en el carrito, cuando ya no influye en la decisión.
Fuera la barra superior con la lista de deseos y las redes sociales, que ocupaba espacio y apenas se usaba. La lista de deseos pasó a la cabecera, junto al acceso a la cuenta.
WhatsApp en la cabecera («¿Dudas? Escríbenos») en lugar del típico círculo verde flotante, que tapaba contenido y resultaba intrusivo, sobre todo en el móvil. En la ficha de producto también aparece dentro del recuadro de información.
Acceso a la asistente virtual con IA, que contamos en su propio artículo.

Anchura completa, contenido centrado

La tienda pasó de un diseño «encajado» (una caja centrada con fondo alrededor) a anchura completa, con las franjas de color de lado a lado y el contenido centrado a un máximo de 1.600 píxeles. En pantallas grandes se aprovecha mejor el espacio y el aspecto es más actual, sin que las líneas de texto se vuelvan infinitas.

Un pie de página que ayuda a comprar

El pie de página suele ser la parte más olvidada de una tienda, y el de esta se había quedado anticuado. El nuevo, en versión clara (fondo rosa muy pálido y texto oscuro bien legible), está pensado para resolver dudas:

Una franja de confianza: envío gratis desde 15 €, marcas originales, atención personalizada y compra segura con todas las formas de pago.
Un bloque «¿Dudas con algún aroma? Te ayudamos a elegir» con tres salidas: WhatsApp, formulario de contacto y asistente virtual.
Columnas con las marcas principales, las guías de uso, la ayuda (envíos, pagos, desistimiento) y el contacto, con el horario y la dirección del almacén aclarando que la tienda vende solo online.
Los medios de pago a la vista: tarjeta, Bizum, PayPal, Apple Pay, Google Pay, transferencia y contra reembolso.

La ficha de producto, pensada para el móvil

En el móvil, la ficha tenía un problema de orden: la ruta de navegación ocupaba cuatro líneas, debajo venía la barra de logos de marcas y el nombre del producto aparecía a unos 800 píxeles, tapado por la barra fija de «Añadir al carrito». El precio estaba todavía más abajo. Es decir, en la primera pantalla no se veía ni qué producto era ni cuánto costaba.

Con CSS que solo afecta al móvil (tablet y escritorio se quedaron igual):

La ruta de navegación se reduce a la categoría anterior, en una línea.
La barra de logos de marcas se oculta solo en la ficha móvil.
Nombre, estrellas de valoración, logo de la marca y precio pasan arriba, justo bajo la foto.
Las miniaturas de la galería se convierten en puntos.
La barra fija de «Añadir al carrito» es más estrecha.

Resultado en un iPhone: el nombre pasó de unos 800 píxeles a unos 550 y el precio queda por encima de la barra fija, en la primera pantalla. También eliminamos un hueco en blanco de 130 píxeles bajo el recuadro de información.

Para que la ficha no solo se vea mejor sino que cargue antes, un pequeño módulo propio quita la carga diferida a la foto principal y la precarga con prioridad alta. El LCP medido en móvil bajó de 2,6 a unos 2,2-2,3 segundos. Y al final de la ficha añadimos dos bloques nuevos: el mismo aroma en otros formatos y un historial de precios.

Categorías más limpias

En las categorías, las fotos de subcategorías pasaron a tener bordes redondeados, dos por fila en el móvil y toda la tarjeta clicable (antes había que acertar en el nombre). Hubo propuestas que el dueño de la tienda descartó con buen criterio: por ejemplo, recortar la lista de fragancias de una marca, porque quien entra ahí busca su aroma y necesita verlos todos. Conocer el negocio pesa más que cualquier regla general de diseño.

Lo que aprendimos

Un rediseño es también una auditoría. Al unificar colores aparecieron problemas de contraste que nadie había medido.
Primero el móvil. Medir dónde aparece cada elemento en una pantalla real dice más que cualquier boceto.
Ver antes de publicar. Simular los cambios sobre la tienda real y enseñarlos en capturas evita idas y vueltas.
Nada de tocar la plantilla. Todo lo que hicimos sobrevivirá a la próxima actualización.

Conclusión

Modernizar una tienda PrestaShop no exige cambiar de plantilla ni reprogramarla: muchas veces basta con usar bien lo que ya tiene, unificar el estilo y ordenar cada página según lo que necesita quien compra. Si tu tienda se ha quedado anticuada, echa un vistazo a cómo trabajamos en PrestaShop en El Puerto de Santa María o contacta con nosotros.

Más casos reales de velasdeolor.es

Este artículo forma parte de una serie sobre las mejoras que hemos hecho en la tienda en octubre de 2026: