Crear un banner de desplazamiento infinito

Un banner de desplazamiento infinito es una barra cuyo contenido se repite de forma continua de derecha a izquierda, como un teletipo de noticias. Úsalo para promociones recurrentes, avisos de envío gratuito o anuncios breves que quieras que la clientela note.

Nota

Un banner de desplazamiento infinito tiene una única sección de contenido: no existe la opción Add Group. Si necesitas varios mensajes que se alternen uno tras otro, usa un banner básico.

1. Abre la página Banners

   En el panel de administración de Shopify, abre la aplicación Sami Product Labels, haz clic en Extra Features en la barra lateral de la aplicación y cambia a la pestaña Banners.

   

   Abre Banners desde la barra lateral de Sami Product Labels.

2. Haz clic en Create banners y elige Infinite Scroll

   Haz clic en Create banners. En el cuadro de diálogo Select Type, haz clic en Select junto a Infinite Scroll, el tipo que repite el contenido del banner de forma infinita para lograr un desplazamiento fluido.

   

   Elige Infinite Scroll para crear una barra tipo teletipo.

3. Pon un nombre al banner

   El editor de pantalla completa se abre en la pestaña Design. Sustituye New Banner en el campo de nombre situado sobre la vista previa por un nombre de hasta 50 caracteres. Este nombre es interno y nunca se muestra a la clientela.

   Junto al nombre también encontrarás un selector de idioma, los botones de vista previa para escritorio y móvil, y el interruptor de estado Active / Draft.

   

   La barra de herramientas situada sobre la vista previa incluye el nombre del banner, el idioma, el dispositivo de la vista previa y el estado.

4. Edita el contenido que se desplaza

   Section 1 empieza con un único elemento Description que contiene un texto de ejemplo como ✨ Free ship on order $40+ ✨. Haz clic en él para abrir sus ajustes a la derecha:

   • Content: un editor de texto enriquecido con negrita, cursiva, subrayado, emojis, alineación y una vista HTML (</>). La etiqueta de idioma indica en qué idioma estás editando.
   • Text: Size y Color de la fuente.
   • Padding y Margin: espaciado alrededor del elemento, en píxeles.

   Haz clic en Add element para agregar más elementos al bucle (Message, Heading, Line break, Button, Countdown o Image) y arrastra el control situado a la izquierda de una fila para reordenarlos.

   

   Edita el elemento que se repite por la barra o agrega más a la secuencia.

5. Personaliza el estilo de la barra

   En el panel Style:

   • Background Type: elige Single Color, Gradient Color o Pattern Image. Los banners de desplazamiento infinito usan Pattern Image por defecto; usa Change Image para cambiar el mosaico o Remove para quitarlo.
   • Font Style: define la tipografía, el grosor y el color de texto predeterminado.
   • Padding: controla el espacio interior de la barra.

   Nota

   Las imágenes de patrón deben ser PNG, JPG o SVG, de 5 MB como máximo y de 512 × 512 px.

6. Agrega un botón de cierre o haz que la barra sea clicable

   Ambas opciones están en el panel Button y vienen desactivadas por defecto:

   • Marca Include Close Button para colocar una «x» en la barra con la que la clientela pueda descartarla. Aparecen dos campos: Color y Hover Color.
   • Marca Bar Clickable para que toda la barra sea un enlace. Aparece el campo Link URL: escribe el destino y usa el interruptor que tiene al lado para abrir el enlace en una pestaña nueva.

   

   Al activar cada casilla se muestran sus ajustes: los colores del botón de cierre o la URL del enlace.

7. Define la velocidad de desplazamiento y los tiempos

   Los cuatro campos del panel Animation se expresan en segundos:

   Campo	Qué controla
   Scroll speed	Cuánto dura un bucle completo. Un número mayor desplaza más despacio.
   Disappear After	Cuánto tiempo permanece la barra en pantalla antes de ocultarse.
   Interval Between Bar Display	El intervalo antes de que la barra vuelva a aparecer.
   Time For The Bar To Fade In	La duración de la animación de aparición gradual.

   Nota

   Deja un campo en 0 para desactivar ese comportamiento. Por ejemplo, Disappear After = 0 mantiene la barra visible hasta que la clientela la cierre.

   

   Scroll speed define la duración de un bucle: auméntalo para que el teletipo vaya más despacio.

8. (Opcional) Agrega CSS personalizado

   Abre Advance Section para escribir tu propio CSS en el cuadro Custom CSS (Developer Zone). La lista CSS reference que aparece debajo muestra los selectores disponibles, incluido .samita_banner_groups.infinityScroll, el contenedor que se usa cuando el desplazamiento infinito está activado. Haz clic en un selector para insertarlo.

9. Elige dónde aparece el banner

   Cambia a la pestaña Placement y elige una posición de visualización:

   Posición	Comportamiento
   Top	Empuja el contenido de la página hacia abajo.
   Top Sticky	Empuja el contenido hacia abajo y permanece visible al desplazarse.
   Top Overlay	Se superpone a la parte superior del contenido de la página.
   Overlay Sticky	Se superpone al contenido y permanece visible al desplazarse.
   Bottom Sticky	Fija en la parte inferior de la página.
   Custom	Coloca la barra donde quieras mediante un shortcode.

   Debajo del selector de posición, acota el público con Product conditions, Customer conditions, Page conditions, Language conditions, Country conditions, Other conditions y Visibility date. El panel Shortcode te da el fragmento que debes pegar en tu tema cuando eliges Custom.

   Consulta Configurar las condiciones de visualización para ver el detalle de cada tipo de condición.

   

   Elige una posición de visualización y agrega condiciones para controlar quién ve el banner.

10. Guarda y activa

    Cambia el interruptor de estado situado sobre la vista previa a Active y haz clic en Save, en la esquina superior derecha. Déjalo en Draft para seguir trabajando sin publicar.

    Precaución

    Los banners solo se muestran en tu tienda online si la inserción de aplicación está activada en tu tema. Consulta Activar la aplicación en tu tema.

Siguientes pasos

• Configurar las condiciones de visualización: controla dónde y para quién aparece tu banner.
• Crear un banner básico: crea en su lugar una barra de anuncios estática o rotativa.

Consejo

¿Necesitas ayuda?

Si tienes alguna dificultad al seguir estos pasos, escríbenos a [email protected].