Cómo gestionar slides en tu tienda

Ruta: Diseño > Slides
Palabras de búsqueda: "diseño", "slides"

Los slides son elementos gráficos de alto impacto visual ubicados en la parte superior del sitio, debajo del buscador y la barra superior. Permiten comunicar campañas, promociones, lanzamientos o categorías destacadas mediante imágenes o videos.
El sistema admite su activación en múltiples secciones de la tienda online: home, micrositios de marcas, categorías y más. Cada grupo de slides es una unidad de configuración independiente con control de orden, vigencia, dispositivos y perfil de cliente.

Beneficios para el ADMINISTRADOR de la tienda:

• Creación de grupos independientes para organizar hasta 10 slides por grupo.
• Activación de slides en múltiples secciones: home, B2B, B2C, categorías y micrositios de marcas.
• Control de tiempo de transición, orden de aparición y modo aleatorio.
• Carga diferenciada de imágenes para desktop y mobile, con adaptación automática según el dispositivo del visitante.
• Soporte nativo para videos en formato MP4 y YouTube como contenido de slide.
• Superposición de textos, subtítulos y botones con URL de destino directamente sobre la gráfica.
• Definición de fechas de vigencia para preorganizar campañas y temporadas.
• Segmentación por perfil de cliente (mayorista / minorista) y por dispositivo (desktop / mobile / ambos).

Beneficios para el CLIENTE de la tienda:

• Impacto visual de pantalla completa al ingresar a la tienda online.
• Comunicación directa y actualizada de campañas activas, lanzamientos o temporadas.
• Adaptación visual según el dispositivo utilizado, garantizando una experiencia coherente en desktop y mobile.

Guía paso a paso:

Dirigirse a la ruta de Diseño > Slides y seleccionar la opción de Nuevo

Dentro del formulario de creación, se encuentran las siguientes opciones y campos:

• Posicionar en home: Habilita este grupo de slides en el home de la tienda online.
• Aleatorio: Los slides del grupo circulan en orden aleatorio, ignorando la posición numérica asignada.

Campos de configuración

1. Nombre: Designa el nombre del grupo de slides. Se recomienda utilizar un nombre descriptivo que refleje el contenido agrupado, para facilitar la administración y el mantenimiento.
2. Posición: Define el orden de presentación del grupo mediante un valor numérico (0 a 9). La casilla de activación permite habilitar o deshabilitar el grupo sin necesidad de eliminarlo.
3. Título y subtítulo del slide: Texto que se muestra superpuesto sobre la gráfica, con fondo por defecto y transición suave. Permite comunicar información sin depender del diseño de la imagen.
4. Links y video YouTube (opcional): Permite agregar uno o dos botones con URL de destino (categoría, marca, producto, landing, etc.), o bien insertar un video en lugar de una imagen, ya sea desde YouTube o desde un archivo previamente cargado en el sitio.
5. Fechas de validez: Define el período de visibilidad del slide. Ambas fechas delimitan la vigencia activa del contenido.
6. Archivo desktop: Imagen en formato horizontal optimizada para pantallas de escritorio.
7. Archivo mobile: Imagen de menor tamaño optimizada para dispositivos móviles. Su carga es independiente y obligatoria para garantizar la correcta visualización en todos los dispositivos.
8. Front: Imagen superpuesta (preferentemente en formato PNG con fondo transparente) sobre la gráfica de fondo o sobre el color por defecto. Se utiliza habitualmente para destacar productos o elementos visuales del slide.
    

Configuración avanzada

• Velocidad: Define el tiempo de transición entre slides, expresado en milisegundos (por ejemplo: 5000 ms = 5 segundos).
• Dispositivos: Permite restringir la visualización del grupo a desktop, mobile o ambos.
• Perfil de cliente: Permite segmentar la visibilidad del grupo según el perfil del visitante: mayorista, minorista o ambos.

Consideraciones importantes

Área segura (safe zone) en el diseño de slides para desktop

El sistema de slides incorpora soporte para videos en formato MP4 y YouTube, superposición de textos y botones sobre imagen de fondo, y adaptación ante distintos niveles de zoom en desktop. Dado que el slide ocupa el ancho completo de la pantalla y se ajusta a múltiples resoluciones, el contenido ubicado en los bordes de la gráfica puede verse recortado o afectado según el dispositivo del visitante.

Por ello, se define un área segura centrada como referencia de diseño:

• Ancho total del slide: 1920 px (estándar desktop full HD).
• Área segura centrada: 1280 px de ancho aproximadamente.
• Márgenes laterales de seguridad: mínimo 320 px a cada lado, libres de texto, logos y elementos de comunicación.

Este criterio garantiza que:

• El contenido relevante permanezca visible en distintas resoluciones y ante recortes por diseño responsivo.
• El slide mantenga equilibrio visual y legibilidad en todos los dispositivos.
• Los elementos de comunicación no queden fuera del área de impacto visible.

El diseño debe construirse del centro hacia los costados, nunca desde los bordes hacia el centro. El contenido ubicado en los extremos de la pieza pierde foco visual y puede quedar fuera del área visible en determinadas resoluciones.

Carga de versiones desktop y mobile

El sistema adapta automáticamente la imagen según el dispositivo del visitante, pero no genera la versión mobile a partir de la gráfica desktop. Ambas versiones deben cargarse de forma independiente. La omisión de la versión mobile implica que los visitantes desde dispositivos móviles visualicen la gráfica desktop escalada, con pérdida de legibilidad y foco visual.

Especificaciones técnicas de imagen:

• Desktop: 1920 px de ancho (área segura de comunicación: 1280 px centrados).
• Mobile: 480 px de ancho.
• Altura libre según necesidad del diseño.
• Formatos permitidos: .webp, .jpg, .png, .gif.
• Peso recomendado: hasta 300 kb. Entre 301 kb y 500 kb se considera un valor de atención. Por encima de 500 kb impacta negativamente en el tiempo de carga.

Slides internos en categorías y marcas

Los slides asignados a secciones internas (categorías no principales, micrositios de marca) deben gestionarse con criterio de vigencia. El volumen excesivo de slides sin mantenimiento activo genera los siguientes impactos:

• Contenido desactualizado visible para el CLIENTE, sin relación con la oferta vigente.
• Degradación en la performance de navegación de la sección afectada.
• Desplazamiento del listado de productos fuera del área visible inicial si la altura del slide no está correctamente dimensionada para el contexto interno.

Se recomienda que los slides internos sean de menor altura que los del home, para evitar que el catálogo de productos quede fuera de la pantalla en el primer scroll.

Imágenes y redimensionamiento

Las imágenes no son redimensionadas automáticamente por el sistema. Deben subirse en las dimensiones indicadas para garantizar la correcta visualización y performance del sitio.

Accesos rápidos en el listado

Desde el listado de slides, cada grupo dispone de íconos de acción directa: edición rápida, duplicado, edición avanzada y eliminación. Al posicionar el cursor sobre cada ícono, el sistema muestra una descripción breve de su función.