La portada es el escaparate de una tienda online: es la página que más visitas recibe y la que decide si una clienta sigue navegando o se va. En septiembre de 2026 abordamos el rediseño de la portada de velasdeolor.es, una tienda PrestaShop de velas aromáticas y perfumes para el hogar. En este artículo contamos qué cambiamos, por qué y qué aprendimos por el camino.
Por qué abordar el rediseño de la portada
La portada anterior cumplía, pero se había quedado con un aspecto anticuado y no reflejaba cómo compran realmente las clientas de la tienda. Antes de mover un solo bloque nos hicimos tres preguntas:
- ¿Cómo buscan las clientas? En esta tienda, casi siempre por marca (Boles d’olor, Maison Berger, Yankee Candle…) y mucho menos por formato. Las marcas tenían que estar a un clic.
- ¿Qué cambia cada mes? Las promociones mensuales (Litro del Mes de Lampe Berger y Aromas del Mes de Boles d’olor) y las novedades de temporada. La portada debía poder actualizarse sin rehacer nada.
- ¿Qué no podemos permitirnos? Perder velocidad, sobre todo en el móvil, desde donde compra cada vez más gente.
Montarla sin tocar la plantilla
La tienda usa la plantilla Warehouse, que incluye el maquetador IqitElementor. Lo usamos para construir toda la portada con bloques editables desde el backoffice, sin modificar los archivos del tema.
Es una decisión importante. Los cambios a medida en los archivos de la plantilla se pierden cuando se actualiza el tema o PrestaShop, y obligan a retocar código cada vez que cambia un estilo. De hecho, llegamos a probar un CSS crítico incrustado en la plantilla para ganar unas décimas, y lo revertimos: la mejora no compensaba el coste de mantenerlo. Con el maquetador, cualquier cambio de textos, imágenes o enlaces se hace en minutos y sobrevive a las actualizaciones.
La nueva estructura, bloque a bloque
Este es el orden de la portada nueva y el motivo de cada sección:
| Bloque | Qué muestra | Por qué está ahí |
|---|---|---|
| Fila de logos de marcas | Las marcas principales, justo bajo la cabecera | Las clientas buscan por marca: es el atajo más usado |
| Carrusel principal | Tres diapositivas con novedades y temporada | Comunicar lo nuevo (colección de Navidad, nueva imagen de una marca, marcas recién incorporadas) |
| Franja de confianza | Preparación del pedido, marcas originales, atención personalizada y pago seguro | Resolver dudas antes de que aparezcan |
| Compra por marca | Fotos de producto de las seis marcas principales | Entrar en cada marca con una imagen real, no solo con un logo |
| Encuentra tu forma de perfumar | Ocho categorías: velas, mikados, lámparas catalíticas, difusores, sprays, ceras, inciensos y cosmética | Para quien busca un formato y no una marca |
| Novedades | Carrusel con los últimos productos | Dar visibilidad a lo que acaba de llegar |
| Promociones del mes | Litro del Mes y Aromas del Mes | Las dos campañas que se renuevan cada mes |
| Guías y consejos | Cuatro guías de uso | Resolver las dudas más habituales y reforzar el SEO |
| Texto de presentación y blog | Quiénes somos y últimas entradas | Contexto para Google y contenido fresco |
La marca principal, la primera
En el bloque de compra por marca el orden no es casual: va primero la marca que más vende en la tienda. Parece un detalle, pero la primera posición es la que más clics recibe.
Fotos reales en las categorías
Las imágenes de las categorías se hicieron con productos reales de la tienda, eligiendo para cada categoría la marca más representativa (por ejemplo, sprays e inciensos con productos de Boles d’olor y cosmética con Mathilde M.). Nada de fotos de banco de imágenes con productos que luego no se pueden comprar.
Mensajes que no prometen lo que no depende de ti
En la franja de confianza usamos «Preparamos tu pedido en 24-48 h laborables» en lugar de un plazo de entrega. Muchas clientas leen «24-48 h» como «lo recibo en dos días», y el transporte no depende de la tienda. Un mensaje preciso evita reclamaciones.
Descripción corta visible en los listados
En el carrusel de novedades cada producto muestra su descripción corta. Es algo que muchas plantillas ocultan, pero aquí sirve para saber a qué huele una vela sin entrar en la ficha, y las clientas lo valoran mucho.
Una portada viva: qué cambia cada mes
La portada no se diseña una vez y se olvida. Cada mes se renuevan las imágenes del carrusel y los banners del Litro del Mes y de los Aromas del Mes, coincidiendo con el cambio de promoción. Por eso era tan importante que todo se pudiera editar desde el maquetador: el cambio mensual se hace en poco tiempo y sin depender de un programador.
Que el rediseño no penalice la velocidad
Un carrusel grande en la parte superior es la forma más rápida de empeorar el LCP (Largest Contentful Paint), una de las Core Web Vitals que Google tiene en cuenta. Estas son las medidas que aplicamos:
- Imágenes en WebP para todas las diapositivas.
- Una versión ligera para móvil de 750 px de ancho, además de la de 1080 px, para que cada pantalla descargue solo lo que necesita.
- Precarga de la primera diapositiva con
<link rel="preload">yfetchpriority="high", separando la versión de móvil y la de escritorio con media queries. - Carga diferida (lazy loading) en el resto: de las cerca de 160 imágenes que tiene la portada, la gran mayoría se cargan solo cuando el usuario se acerca a ellas.
- Caché de página completa con JPresta Page Cache, que se vacía después de cada cambio mensual para que los visitantes vean la versión nueva.
- CDN para servir las imágenes y los archivos estáticos desde servidores cercanos al visitante. Lo contamos en detalle en nuestro artículo sobre por qué activar el CDN de Hostinger.
Lo que aprendimos
- Empieza por cómo compran tus clientes, no por el diseño. La estructura sale de ahí.
- Usa el maquetador de tu plantilla en lugar de editar sus archivos: te ahorrarás problemas en cada actualización.
- Prepara la portada para cambiar: si actualizarla es difícil, acabará desactualizada.
- Mide la velocidad antes y después. Un rediseño bonito que carga lento vende menos.
Conclusión
El rediseño de la portada de velasdeolor.es no ha sido solo un cambio estético: ha sido reordenar la tienda según cómo compran sus clientas, preparada para cambiar cada mes y sin sacrificar velocidad. Si tu tienda PrestaShop necesita una portada más moderna y fácil de mantener, echa un vistazo a cómo trabajamos en PrestaShop en El Puerto de Santa María o contacta con nosotros y lo vemos juntos.
