🎁 Banner Deslizante Shopify: ¡Aumenta Ventas en 4 Pasos! 📢

Hola amigos de Marieú Technology Corporation, ¿listo para que tu tienda virtual explote en ventas? Si necesitas un banner deslizante en Shopify que capture la atención, esta guía es para ti. Un banner bien diseñado es la herramienta visual clave para destacar promociones, productos nuevos y ofertas irresistibles.

Te mostraremos paso a paso cómo usar la app gratuita BSS Banner & Pop-up y configurar este elemento dinámico en solo 4 pasos. ¡Optimiza la conversión de tu e-commerce y haz que tus visitantes no puedan ignorar tus mejores ofertas!

¿Cómo crear un Banner Deslizante en Shopify en solo 4 Pasos con Marieú?

Nosotros vamos a iniciar con la instalación de esta app. Recuerden que en Shopify le llamamos App y en WordPress le llamamos plugin. Para poder instalarlo, el nombre de la app se llama BSS: Banner & Pop-up. Esta app nos ofrece la opción de colocar banners con distintos tipos de diseños. Uno de ellos, por ejemplo, es un banner deslizante Shopify. Otro de ellos es colocar un botón en el banner. Además también podemos colocar algún tiempo o timer en cuenta regresiva. Entonces, eso lo veríamos dentro del número dos, que es el tipo de banner.

Número tres, vamos a personalizar el banner. Lo recomendable aquí es que lo alineemos a los colores de nuestro sitio web y se vea agradable para el cliente. Finalmente, vamos a probar el banner, la número cuatro, para ver cómo estaría funcionando esta app.

Aquí, dentro de Shopify App Store, podemos buscar la app dentro del search o podemos colocar directamente BSS Banner. Lo encontramos aquí. Un beneficio de esta aplicación es que es desarrollado por Shopify, tiene la etiqueta, por ende seguro, confiable instalar esta aplicación. Es más, tiene una calificación de cinco de un total de 441 reseñas, lo cual es bastante bueno. Para instalarlo simplemente inicialmente aquí les va a aparecer para instalar. Colocan instalar y después ponemos abrir.

Cuando abre la aplicación, lo van a tener aquí. Aceptamos que se pueda integrar, se pueda instalar dentro de tu administrador de Shopify y vamos a tener la siguiente configuración. Recuerden que debemos de fijarlo para que no desaparezca. Actualmente ya lo tenemos fijado y siempre va a aparecer en la parte de apps, ¡aquí está!

Diagrama: ¡Aumenta Ventas en 4 Pasos! Banner Deslizante Shopify.
Fuente: Propia, mediante Miro.

¿Por qué nosotros hemos decidido por esta app? Tiene buenos beneficios, además de que el app es completamente gratis. No tiene ningún plan. Hay otras apps que sí, por lo menos tienes un plan, tienes que pagar por un plan, pero en este caso no, es completamente gratis y además que es de Shopify.

Para esta guía nos vamos a centrar solamente en la parte de banner. Tiene la opción adicional de poder incluir los Windows popup, que son ventanas emergentes. Tiene también sales popup, son ventanitas que aparecen en la parte inferior derecha o izquierda para que podamos avisar de una promoción nueva o de repente algún descuento y podamos incluirlo.

También tiene para que se puedan suscribir y las integraciones que están en la parte final para poder incluir de repente algún idioma extra. Si nuestro público objetivo solamente domina un idioma, no es necesario incluir esta integración. Vamos entonces ahora sí a la parte de banner.

En banner, para poder crear un banner, vamos a poner crear banner y aquí nos ofrecen un total de cinco tipos de banner, el cual, estos tipos de banner, según nuestra preferencia, según nuestra estrategia que vamos a planificar dentro de nuestro e-commerce, podemos ir seleccionando.

Por ejemplo, el primero es un banner de anuncio. Podemos ofrecer descuentos de nuestros productos en una categoría o colección en particular y podemos utilizar este botón, el cual, si seleccionas, te direcciona a la página o la colección que contiene esos productos con el descuento.

Igual que el segundo, algo similar, simplemente que en este caso es un countdown timer, es un temporizador de cuenta regresiva, el cual de repente podemos colocar 5 días, 10 días para que puedan aprovechar una promoción, algún descuento.

¡Descargar App BSS Banner & Pop-up en Shopify App Store!
Fuente: Propia, mediante Shopify App Store.

Ya para el tercero es un banner para poder suscribirse. Ellos incluyen ahí su correo y le podemos enviar después newsletter. Tenemos también la opción de poder gastar 5 USD más para poder aplicar un envío gratis y finalmente un cupón de descuento. Son distintos tipos de banner que nosotros podemos seleccionar, dependiendo de nuestra estrategia dentro del e-commerce y poder personalizarlo. Si nosotros queremos una vista previa de cómo quedaría estos banners, ponemos aquí en See Example y nos direcciona esta página.

Aquí ya podemos ver todos los banners disponibles que se pueden crear con esta app. Tenemos un banner deslizante Shopify, eso es lo que vamos a hacer ahora. Tenemos un banner de timer en cuenta regresiva. Tenemos un banner sencillo para que hagamos clic en el botón de comprar ahora.

Por ejemplo, aquí aprovecha un 40% de descuento en nuestra colección de otoño. Selecciona el botón aquí y te direcciona a la página con los productos que ya está aplicado un 40% de descuento. Entonces, así y tenemos entre otros. Para este caso, nosotros vamos a crear un banner deslizante, el cual corresponde al primero, que es un banner de anuncio. Hacemos clic en el primero, ponemos select.

Entonces aquí vamos a entrar a la parte de la personalización del banner. En el apartado izquierdo nosotros tenemos la primera opción que es el template o la plantilla del banner. Podemos seleccionar cualquiera de la que tenemos aquí o crear uno de cero. Por ejemplo, si seleccionamos aquí, ya vemos un cambio. Esa es un una textura de fondo para un domingo de Pascua. Después también tenemos otro fondo como el día de la madre, para el día del padre, entre otros.

Esta sección son una textura de fondo y en el caso de Styles tenemos un fondo completo, es un fondo sólido. Por ejemplo, tenemos otros diseños. En este caso vamos a seleccionar Sales Occasions o ocasiones de venta. Vamos a seleccionar aquí el día de la madre. Entonces nosotros vamos a personalizarlo para que sea un banner deslizante Shopify.

Para eso vamos a ir a la parte de Banner Element y el tipo de banner puede ser single banner, puede ser banner de carrera o running banner o si no rotating banner. El primero tenemos el siguiente, es un banner estático, banner simple. El segundo contiene un banner deslizante, ahí lo tenemos. Y para el tercero ya sería por cada texto se va a ir rotando.

¿Cómo configurar App BSS Banner & Pop-up en Shopify?
Fuente: Propia, mediante Shopify.

Tenemos una frase aquí, tenemos otra frase aquí y así. Vamos a dejarlo como Running Banner. Además, el contenido lo podemos modificar aquí con un 60% de descuento. También podemos ir cambiándolo aquí. Si de repente es solamente 30% lo podemos ir modificando. Y ¡ahí está! cómo se cambia. El emoji también. Si tenemos otro emoji, podemos hacer clic aquí y ya le podemos agregar más emojis.

Podemos ajustar también el tamaño de la fuente en versión móvil. Recuerden que los dispositivos que generalmente manejamos son la versión desktop y la versión móvil. Lo podemos cambiar en la parte superior derecha. Si en la versión móvil se ve muy pequeño, en adjust font podemos ir cambiando el tamaño. Hacemos click y aquí podemos ir aumentando un poco más el tamaño. Ahí están viendo los cambios o podemos ir disminuyendo el tamaño.

Nosotros recomendamos aquí dejarlo por defecto para que no realice ningún cambio y se quede en forma predeterminada, ¡ahí está! También podemos agregar un botón de cerrar, el cual si nosotros cambiamos un color oscuro, vamos a poder notar aquí que tiene la opción de cerrar el banner.

Entonces, en este caso, si el usuario le incomoda, tiene la opción de poder cerrar ese banner y evidentemente ya no va a poder aprovechar las promociones. Por ello, recomendamos quitar esa opción para que por temporada él pueda aprovechar estas promociones que estamos lanzando.

Después, también tenemos aquí llamado a la acción, call to action. Este llamado a la acción nos permite incluir un enlace dentro del banner. Nos acercamos el puntero aquí, vamos a tener la opción de hacer clic y direccionarnos a la página con los productos que contienen este descuento. Para eso vamos a colocar aquí incluir que el banner tenga la opción a hacer un clic. Ponemos aquí la URL marieu.com.

Tenemos la opción de que abra en una nueva ventana o, si no, en esa misma ventana. Recomendamos también que lo abra en esa misma ventana.

Seguidamente vamos a ir aquí, el style. En style ya tenemos la parte de la ubicación. Podemos colocar que sea arriba, podemos colocar que esté en la parte de abajo. Si nosotros queremos que el banner se desplace también al mismo tiempo de bajar el scroll, es decir, estamos visualizando más productos en la parte del cuerpo o del body de la página web, tenemos que seleccionar sticky banner. Eso hace que el banner permanezca visible al momento que los usuarios se desplazan arriba o abajo de tu página web.

Después tenemos esta configuración, en el cual, nosotros podemos mostrar en todos nuestros dispositivos, mostrar solamente en la versión de escritorio o que se muestre solamente el banner en la versión móvil. Por ejemplo, si seleccionamos, este es en la versión móvil. Si hacemos clic a nivel de escritorio de versión desktop, ya no lo podemos ver. Y vamos a dejarlo en la primera opción.

El layout podemos nosotros establecer la distancia entre contenidos. Si está muy separado, nosotros podemos unirlo, ¡ahí está! Se ve que está mucho más apegado el texto. Si está mucho, podemos nosotros regularlo a unos 10px. Por defecto te vienen 16 píxeles, podemos bajarlo hasta 10px. A eso se le llama Gap, que es la brecha.

Luego tenemos el background. Además, si nosotros no nos gusta mucho el fondo, podemos ir cambiando a otro fondo. Podemos colocar un fondo sólido, podemos colocar un gradiente, también una imagen de fondo. Esa es la textura. Vamos a cambiarlo, ¡ahí está! De hecho, si no se entiende mucho el texto, podemos ir bajando la opacidad. Si le bajamos, ya el fondo más claro se desvanece y por ende no se nota mucho la textura. Entonces, nosotros lo vamos a dejar con esta textura.

Además, tenemos la opción de agregar el relleno. Si notamos que la parte de arriba del texto tiene una distancia muy grande, podemos ir reduciéndolo aquí. Recuerden que esto es en la versión desktop. Si aumentamos a 24px, esto va a aumentar más. ¡Ahí está! Y para que sea uniforme, tenemos que aumentarle en la parte de abajo. Es un banner con mucho más relleno.

Si nosotros queremos hacer lo mismo en la versión móvil, tenemos la siguiente configuración, ¡ahí está! Y ya se estaría cambiando en la versión móvil.

¡Tipos de Banners con BSS Banner & Pop-up en Shopify!
Fuente: Propia, mediante Shopify.

Después tenemos la opción de colocar un borde. En esta opción no lo recomendamos colocarlo porque es en forma rectangular. Si queremos darle unos bordes a las esquinas, podemos colocar un Solid y ahí colocar un radio. En este caso sería de 44px o de 30px. Entonces vemos que ahí tiene unos bordes. Generalmente los banners son con esquinas punteadas, entonces no es necesario a veces colocar estas esquinas.

Content style está con un estilo de fuente bold y tiene una familia de fuente inter. Si no nos parece esa fuente, queremos mejorarlo, podemos seleccionar aquí. Por ejemplo, en el caso de Adamina y vemos como cambia. El color también podemos personalizarlo y así. La animación si vemos que está demasiado rápido, podemos bajarlo hasta 10% por segundo y ¡ahí está! Se ve mucho más lento el desplazamiento.

Finalmente, el CSS, el cual podemos personalizar este banner. Por aquí vamos a notar que hay una pequeña marca de agua. En la descripción le vamos a dejar el CSS para que ustedes puedan retirarlo. ¿Cuál sería este CSS? Sería el siguiente: clase .bss-watermark {display: none !important;}. Entonces con eso ya estarían retirando la marca de agua.

Si por a o b hay una actualización y este CSS, el nombre CSS cambia, entonces nos escriben para poder ayudarles y brindarles el nuevo CSS y que puedan quitar la marca de agua. Es una marca que está aquí.

Además de eso, tenemos también la configuración de programar el tiempo de que va a aparecer este banner. Si no queremos que esté visible las 24 horas, no tenemos que modificar nada aquí. Si queremos que esté un rango visible, de repente de las 8 de la mañana hasta las 3 de la tarde, podemos ir filtrando estos tiempos. En el caso que no, podemos dejarlo deshabilitado.

Tenemos la primera opción de colocar un retraso antes de mostrar el banner, lo cual no recomendamos porque este app ya está configurado con un pequeño retraso antes de cargar la página. Eso ayuda mucho en la optimización de nuestra página. Si lanzamos primero el banner, va a ser que se retrasen algunas imágenes, en cargar la fuente del texto, entre otras. Entonces, es muy bueno que tenga un pequeño retraso, el cual ya llega con la app, no necesitamos modificar un retraso adicional.

Para el segundo es mostrar el banner nuevamente después de cerrar, no es necesario. De repente vamos a incomodar al cliente.

Finalmente vamos a entrar a las condiciones. Queremos que se muestren en todas las páginas de nuestro e-commerce, solamente en el shop, en la página de contactos, entre otros. Además tenemos por aquí los clientes. Si queremos que se muestre aquellos clientes que tienen iniciado su sesión, recuerden que una vez que compra tienen un acceso al e-commerce con su cuenta. Entonces aquellos clientes registrados solamente queremos que se muestre este banner.

Si colocamos la segunda opción, solamente a ellos se va a mostrar. Entre otras condiciones, aquellos clientes específicos, entre otras opciones. Excluir algunos clientes también. Si nuestro banner promocional es acerca del producto de mujeres, de repente unos clientes, hombres, podemos excluirlos. Ya depende de nuestra estrategia que estamos planificando.

Resultados Finales

Finalmente la ciudad, si queremos de repente bloquear este banner para algunos países o por idioma, podemos hacerlo en esta sección. Finalmente, tenemos esta opción de translation. Esta opción nos permite incluir varios idiomas del banner según la URL. Recuerden que cuando nosotros creamos un nuevo idioma, un idioma en inglés, en la URL nosotros creamos una subcarpeta, es el dominio subcarpeta y el código del idioma.

Por ejemplo, si es inglés (en) barra y continúa contactos. El dominio barra (en) barra shop y así. Entonces, por cada uno de estas, según esa dirección, te permite personalizar el idioma del banner. Finalmente, ya cuando hemos terminado, inicialmente está desactivado, colocamos activar y ponemos guardar.

Una vez ahí, aquí vamos a tener todos los banners que vamos a ir creando. Por ejemplo, por campaña que nosotros tenemos, vamos a poder crear distintos tipos de banner. Ahora, si nosotros vamos aquí nuevamente, ya podemos ver nuestro banner.

¿Por qué nosotros decimos que aumentamos nuestras ventas con este banner? Porque recuerden, ya tenemos la opción para el cliente de poder seleccionar aquí y direccionarse a una página interna a tu dominio. Ya revisar todos los productos con el descuento del 30%. ¡Listo, gracias amigos de Marieú Technology Corporation!