Crear un banner básico

Un banner básico es una barra que creas a partir de elementos de contenido (encabezados, mensajes, botones, cuentas regresivas, imágenes) agrupados en una o varias secciones. El editor tiene dos pestañas: Design (contenido y estilo) y Placement (dónde y para quién aparece la barra).

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 Basic

   Haz clic en Create banners. En el cuadro de diálogo Select Type, haz clic en Select junto a Basic, el tipo que admite uno o varios grupos de contenido.

   

   Elige Basic para crear una barra de anuncios estándar.

   Nota

   ¿Prefieres no empezar desde cero? En la página Banners, usa Featured templates o View all templates para abrir un banner ya preparado y editarlo.

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: identifica el banner en tu lista 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. Crea el contenido

   En Content, Section 1 muestra los elementos que forman la barra. Haz clic en cualquier elemento para editar su texto y su estilo, arrastra el control de la izquierda para reordenarlo o usa los iconos situados a la derecha de la fila para ocultarlo, duplicarlo o eliminarlo.

   Haz clic en Add element para agregar uno nuevo:

   Elemento	Qué agrega
   Message	Una línea de texto.
   Heading	Un titular grande.
   Line break	Espacio vertical entre elementos.
   Button	Un botón de llamada a la acción con su propio enlace.
   Countdown	Un temporizador de días, horas, minutos y segundos.
   Image	Una imagen o un logotipo.

   

   Agrega, reordena y edita los elementos que forman la barra.

5. (Opcional) Agrega más grupos de contenido

   Haz clic en Add Group para crear Section 2, Section 3, etc. Cada sección es un mensaje independiente y el banner las va alternando; controla los tiempos en Animation, en los pasos siguientes.

   Deja una sola sección si solo quieres un mensaje estático.

6. Personaliza el estilo de la barra

   En el panel Style:

   • Background Type: elige Single Color, Gradient Color o Pattern Image y define el color o la imagen.
   • Font Style: define la tipografía, el tamaño, el grosor y el color del texto.
   • Padding: controla el espacio interior de la barra.

   

   Define el fondo, las fuentes y el relleno de toda la barra.

7. 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.

8. Define los tiempos de la animación

   En el panel Animation, elige una transición Horizontal o Vertical y define los tiempos en segundos:

   Campo	Qué controla
   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.
   Time Per Group	Cuánto tiempo se muestra cada sección antes de pasar a la siguiente.

   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.

9. (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; haz clic en uno para insertarlo.

10. 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.

11. 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: define reglas de segmentación detalladas para tu banner.
• Crear un banner de desplazamiento infinito: prueba una barra con desplazamiento tipo teletipo.

Consejo

¿Necesitas ayuda?

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