¿Sirve de algo el slider de la portada de tu tienda? Cuándo ayuda y cuándo estorba

Casi todas las tiendas tienen uno: un carrusel en lo alto de la portada que va pasando banners. Se decide al principio del proyecto, se llena con cuatro o cinco imágenes de campaña y se olvida. Y es fácil que lleve meses mostrando una oferta que ya terminó, una imagen que en el móvil no se lee o un vídeo que pesa más que el resto de la página.

La pregunta no es «slider sí o slider no», sino qué trabajo tiene que hacer ese espacio, que es el más visible de toda la tienda.

Lo que se sabe de los carruseles

Los profesionales de usabilidad llevan años advirtiendo de algunos problemas que se repiten:

• Se mira la primera diapositiva y poco más. Muchas visitas hacen scroll o pulsan el menú antes de que pase la segunda.
• El movimiento automático distrae y puede cambiar el banner justo cuando alguien iba a leerlo o pulsarlo.
• Parece publicidad, y los usuarios aprenden a ignorar lo que parece publicidad.
• Varios mensajes compiten: si todo es importante, nada lo es.

Eso no significa que un carrusel no pueda funcionar. Significa que un carrusel con cinco mensajes genéricos que rotan cada tres segundos probablemente no aporta lo que ocupa.

Cuándo un slider sí ayuda

• Campañas con fecha: rebajas, temporada, lanzamiento. Un mensaje claro, con su fecha de inicio y de fin.
• Tiendas con públicos distintos que necesitan orientar rápido: profesional y particular, hombre y mujer, dos líneas de producto muy diferentes.
• Producto muy visual, donde la imagen grande transmite lo que un texto no puede: moda, decoración, muebles.
• Novedades que cambian a menudo, siempre que alguien las actualice de verdad.

Y cuándo es mejor otra cosa: si tu tienda vende por catálogo amplio (recambios, suministros, referencias técnicas), lo que el visitante quiere en la portada es el buscador y las categorías. Un banner fijo con tu propuesta de valor y debajo accesos claros a las familias suele servir más que cinco imágenes rotando.

Cómo hacerlo bien

Pocas diapositivas, con un mensaje cada una

Dos o tres. La primera es la que más se ve: pon ahí lo que más importa. Cada diapositiva con un titular corto, una línea de apoyo y un único botón que lleve a una página concreta (la categoría de la campaña, no la portada).

Sin rotación rápida

Si rota sola, que lo haga despacio y que se pare cuando el usuario pasa el ratón o toca. Mejor aún si se puede navegar con flechas y puntos visibles.

Fechas, no recordatorios

La oferta que sigue en portada una semana después de acabar es un clásico. Si cada diapositiva tiene fecha de inicio y de fin, la campaña se deja preparada y desaparece sola.

Texto como texto

Un titular dentro de la imagen no se traduce, no se lee en el móvil si la imagen se reduce y no lo entiende un lector de pantalla. Mejor la imagen limpia y el texto encima como HTML, en cada idioma.

El móvil: donde los sliders fallan más

Un banner apaisado de escritorio, reducido al ancho de un teléfono, se convierte en una tira estrecha en la que el titular es ilegible. Y, si la plantilla solo recorta por CSS, el móvil descarga la imagen grande completa para mostrar un trozo.

La solución es preparar una imagen por dispositivo (escritorio, tableta y móvil, con su propio encuadre) y servirla con el elemento picture, de forma que cada pantalla descarga solo la suya. Es más trabajo de diseño, pero es la diferencia entre un banner que se lee y uno que estorba.

Rendimiento: lo que pesa un carrusel

• Imágenes: el peso de todas las diapositivas, si se cargan todas al inicio. Lo correcto es cargar la primera ya y las demás después.
• JavaScript: algunos carruseles traen librerías grandes para animaciones que no hacen falta.
• Vídeo: un vídeo de fondo puede funcionar en escritorio, pero en el móvil pesa mucho. Si lo usas, sin sonido, comprimido y con una versión para móvil o una imagen en su lugar.
• Servicios externos: un slider que carga sus imágenes o su código de otro servidor añade conexiones y dependencias.

Accesibilidad

Un carrusel accesible permite pausar el movimiento, se maneja con teclado, tiene textos alternativos en las imágenes con contenido y no depende solo del color para indicar la diapositiva activa. En España, la obligación de accesibilidad para muchos comercios electrónicos ya es una realidad; además, lo que es accesible suele ser también más cómodo para todos.

Revisa el tuyo en diez minutos

1. Abre la portada en tu móvil. ¿Se lee el titular de la primera diapositiva?
2. ¿Alguna diapositiva anuncia algo que ya no está vigente?
3. ¿Cada botón lleva a una página concreta y relevante?
4. ¿Cuántas diapositivas hay? Si son más de tres, ¿alguien mira la cuarta?
5. Pasa la portada por PageSpeed Insights: ¿el elemento LCP es una imagen del slider y cuánto pesa?
6. En tu analítica, ¿cuántos clics reciben los banners frente a las categorías del menú?

Y si el slider es un módulo antiguo que vino con el tema, comprueba que sigue siendo compatible con tu versión de PrestaShop y que no guarda sus imágenes dentro de la carpeta del módulo, donde una actualización puede borrarlas.

Cómo resolverlo en PrestaShop

Rekire Slider es un carrusel en el que cada diapositiva puede llevar una imagen para escritorio, otra para tableta y otra para móvil, servidas con picture para que el navegador descargue solo una. Admite diapositivas de vídeo MP4 o WebM (sin sonido, en bucle y también con fuente por dispositivo), copias WebP automáticas, fechas de inicio y fin sin cron, parejas de diapositivas a media anchura que en el móvil pasan a ocupar el ancho completo y textos colocables en cada idioma como texto plano. Guarda las imágenes fuera de la carpeta del módulo, para que una actualización no las borre, y se coloca en la portada, encima del contenido, por hook propio o como widget.