Sliders / Banners - Agregar y cambiar

Tanto en nuestra Home Page como en otros sectores de nuestra tienda, contamos con sliders con información de productos, promociones, Call to Action, lanzamientos, eventos, etc.

• Sliders ilimitados: Puedes crear todos los sliders que necesites
• Imágenes responsive: Permite subir imágenes diferentes para desktop y mobile
• Más de 30 widget zones: Coloca sliders en diferentes sectores de la tienda
• Programación horaria: Define cuándo se mostrarán los sliders
• Condiciones de visualización: Muestra sliders solo en ciertas categorías o para ciertos clientes
• Tecnología Slick Slider: En nopCommerce 4.3+ utiliza Slick slider para mejor rendimiento

• Lazy loading: Las imágenes se cargan después de la página para mejorar la velocidad

   

Ubicación del plugin:

Para ver los sliders ya existentes y agregar nuevos o cambiar, debemos entrar en:

Nop-Templates → Plugins → Anywhere Sliders → Administrar Sliders

1 - AGREGAR NUEVO SLIDER

Para agregar un banner o slider nuevo, hacer clic en "Añadir nuevo slider".

Pestaña: Ajustes (Settings)

En esta pestaña configuraremos los aspectos básicos del slider:

• System name (Nombre del sistema): Nombre interno para identificar el slider (no se muestra al público)
• Published (Publicado): Marca si el slider está activo
• Limited to stores (Limitado a tiendas): Si tienes múltiples tiendas, selecciona en cuáles se mostrará
• Auto slide (Deslizamiento automático): Define si las imágenes cambiarán automáticamente
• Auto slide interval (Intervalo): Tiempo en milisegundos entre cada slide (ej: 5000 = 5 segundos)
• Animation speed (Velocidad de animación): Qué tan rápido cambia entre slides
• Fade effect (Efecto fade): Transición con desvanecimiento en lugar de deslizamiento
• Show navigation dots (Mostrar puntos de navegación): Los puntitos indicadores en la parte inferior
• Show navigation arrows (Mostrar flechas): Flechas laterales para navegar manualmente
• Custom CSS class: Para aplicar estilos personalizados
• Mobile breakpoint (Punto de corte móvil): Ancho de pantalla en píxeles donde cambia a versión móvil (por defecto 768px)

Pestaña: Slides

Aquí agregaremos las imágenes que conformarán el slider:

Para agregar una imagen:

1. Haz clic en "Add new slide"
2. Se abrirá un pop-up con las siguientes opciones:
   • Desktop image (Imagen desktop): Sube la imagen para computadoras y tablets
   • Mobile image (Imagen móvil): Sube una imagen optimizada para móviles (dimensiones menores)
   • Alt text: Texto alternativo para SEO y accesibilidad
   • URL: Link a donde llevará la imagen cuando se haga clic (puede ser una categoría, producto, página externa, etc.)
   • Published (Visible): Marca para que la imagen sea visible
   • Display order (Orden de visualización): Números negativos se muestran primero. Ejemplo: -1 se muestra antes que 0, que se muestra antes que 1
3. Haz clic en "Guardar"

⚠️ Importante - Medidas de imágenes:

• Desktop: Generalmente 1920x600px o 1920x800px (depende del diseño de tu tema)
• Mobile: Generalmente 768x600px o 768x800px
• Las imágenes deben estar en formato JPG, PNG o WebP
• Optimiza el peso de las imágenes (idealmente menos de 200KB) para mejor rendimiento
• SIEMPRE debes tener dos versiones: una para desktop y otra para mobile

Pestaña: Widget (Widget Zones)

Necesitamos definir en qué sección de nuestra tienda estará visible el slider:

Zonas de widget más comunes:

• home_page_top: Parte superior de la home page (antes del slider principal)
• home_page_main_slider: Posición del slider principal en la home page
• home_page_before_categories: Antes de las categorías en la home
• home_page_before_products: Antes de los productos destacados
• home_page_before_bestsellers: Antes de los más vendidos
• categorydetails_top: Parte superior de páginas de categoría (ver sección 3 más abajo)
• productdetails_top: Parte superior de la página de producto
• footer: En el footer del sitio

Para asignar una widget zone:

1. Ve a la pestaña "Widget"
2. Haz clic en "Add new record"
3. Selecciona la zona de ubicación del desplegable
4. Haz clic en "Update"

💡 Tip: Puedes asignar el mismo slider a múltiples widget zones si lo necesitas.

Pestaña: Programación (Scheduling)

Permite definir cuándo el slider estará activo:

• Start date (Fecha de inicio): Desde cuándo se mostrará el slider
• End date (Fecha de fin): Hasta cuándo se mostrará
• Repeating time pattern (Patrón de repetición): Define horarios específicos (ej: solo de lunes a viernes, solo de 9am a 6pm)

Casos de uso:

• Promociones con fecha de vencimiento (Black Friday, Navidad, etc.)
• Banners que se muestran solo en horario comercial
• Campañas programadas con anticipación

⚠️ Importante sobre zona horaria:

La programación utiliza el Default Store Time Zone configurado en tu tienda. Verifica que esté correctamente configurado en Configuration → Settings → General settings.

Pestaña: Condiciones (Conditions)

Permite mostrar el slider solo cuando se cumplan ciertas condiciones:

Tipos de condiciones disponibles:

• Category (Categoría): Muestra el slider solo en ciertas categorías
• Manufacturer (Marca): Solo en páginas de ciertas marcas
• Customer role (Rol de cliente): Solo para ciertos tipos de clientes (mayoristas, VIP, etc.)
• Product (Producto): Solo en páginas de productos específicos

Configuración de condiciones:

• Default state (Estado por defecto): Generalmente se deja en "FAIL" para que solo se muestre cuando se cumplan las condiciones
• Condition type: Selecciona el tipo (Category, Manufacturer, etc.)
• Property: La propiedad a evaluar (ej: Name, Id)
• Operator: El operador (Equals = Igual a, Contains = Contiene, etc.)
• Value: El valor a comparar (nombre de la categoría, ID del producto, etc.)

2 - CAMBIAR/EDITAR SLIDER EXISTENTE

Identificamos el slider que queremos cambiar y hacemos clic en "Editar".

Para cambiar una imagen del slider:

1. Ve a la pestaña "Slides"
2. Verás la lista de imágenes actuales con:
   • Miniatura de la imagen
   • URL asociada
   • Orden de visualización
   • Estado (Published/Unpublished)
3. Para cambiar una imagen:
   • Haz clic en "Edit" en la imagen que quieres cambiar
   • Desmarca "Published" para ocultarla temporalmente
   • O elimínala completamente con el botón "Delete"
4. Agrega la nueva imagen siguiendo el procedimiento del punto 1

💡 Consejo: En lugar de eliminar la imagen antigua, márcala como no publicada (unpublished). Así podrás reutilizarla en el futuro sin tener que subirla nuevamente.

3 - AGREGAR BANNER EN CATEGORY PAGES (Páginas de Categoría)

También se puede agregar un banner o slide en la página de categoría, donde en el encabezado, antes de que se muestren los productos, se visualice una imagen representativa.

Procedimiento:

1. Crea un nuevo slider siguiendo el procedimiento del punto 1
2. En la pestaña "Widget", selecciona la widget zone:
   • categorydetails_top: Parte superior de la categoría (antes del título)
   • categorydetails_after_breadcrumb: Después del breadcrumb
   • categorydetails_before_filters: Antes de los filtros
3. Ve a la pestaña "Condiciones"
4. Configura:
   • System name: Dale un nombre descriptivo (ej: "Banner_Categoria_Medallas")
   • Default state: Selecciona "FAIL"
5. Haz clic en "Add new condition"
6. Configura la condición:
   • Condition type: Category
   • Property: Name (o Id si prefieres usar el ID de la categoría)
   • Operator: Equals (Igual a)
   • Value: Escribe el nombre exacto de la categoría (ej: "Medallas y Dijes")
7. Haz clic en "Save"

💡 Múltiples categorías:

Si quieres que el mismo banner aparezca en varias categorías, puedes:

• Agregar múltiples condiciones con el operador "OR"
• O usar el operador "Contains" si las categorías tienen parte del nombre en común

SLIDERS DE CONTENIDO HTML (HTML Content Sliders)

Además de sliders de imágenes, el plugin permite crear sliders con contenido HTML personalizado:

Casos de uso:

• Banners con texto superpuesto y botones
• Sliders con video de fondo
• Contenido dinámico con animaciones CSS
• Diseños más complejos con múltiples elementos

Para crear un slider HTML:

1. En lugar de agregar imágenes, ve a la pestaña "HTML Content"
2. Escribe o pega tu código HTML/CSS
3. Puedes usar el editor WYSIWYG o escribir código directamente
4. Configura el display order y published igual que con las imágenes

OPTIMIZACIÓN Y RENDIMIENTO

Mejores prácticas para sliders rápidos:

• Optimiza las imágenes: Usa herramientas como TinyPNG o compresión WebP
• Peso recomendado: Máximo 200KB por imagen
• Formato WebP: Mejor compresión que JPG manteniendo calidad
• Lazy loading: El plugin ya lo incluye automáticamente
• Limita la cantidad: No más de 5-7 slides por slider
• Tiempo de auto-slide: Entre 4000-6000ms es óptimo

TROUBLESHOOTING (Solución de problemas)

El slider no aparece:

• ✓ Verifica que el slider esté marcado como "Published"
• ✓ Verifica que las imágenes estén marcadas como "Published"
• ✓ Comprueba que hayas asignado una widget zone
• ✓ Si usas condiciones, verifica que el estado por defecto sea correcto
• ✓ Revisa la programación (fechas de inicio/fin)
• ✓ Limpia la caché de nopCommerce (System → System → Clear cache)

El slider se ve mal en móvil:

• ✓ Asegúrate de haber subido imágenes móviles optimizadas
• ✓ Verifica el mobile breakpoint (por defecto 768px)
• ✓ Comprueba las dimensiones de las imágenes móviles

El slider es muy lento:

• ✓ Reduce el peso de las imágenes
• ✓ Reduce el número de slides (máximo 5-7)
• ✓ Usa formato WebP en lugar de PNG o JPG

Mejores Prácticas

• Nombra tus sliders descriptivamente: "Home_Promocion_Verano_2025" es mejor que "Slider1"
• Usa display order consistente: -10, -5, 0, 5, 10 te da espacio para insertar slides intermedios
• Programa las promociones: Usa scheduling para activar/desactivar automáticamente
• Mantén copias de backup: Marca imágenes antiguas como unpublished en lugar de eliminarlas
• Testing responsive: Siempre prueba en mobile antes de publicar
• SEO-friendly: Completa siempre el alt text de las imágenes
• Enlaces válidos: Verifica que todas las URLs funcionen correctamente
• Limpia regularmente: Elimina sliders y imágenes que ya no uses

Ante cualquier consulta no resuelta por este artículo puede comunicarse a soporte@agileworks.com.uy