Cómo añadir un banner personalizado a un sitio web de Shopify

Un banner promocional llamativo es uno de los factores de conversión más potentes para las tiendas online. Es lo primero que ve un comprador al abrir tu sitio web, por lo que una llamada a la acción (CTA) clara puede mejorar de forma notable la tasa de productos añadidos al carrito y las ventas globales. Tanto si quieres dirigir a los compradores a una oferta del Black Friday, anunciar el importe mínimo para envío gratuito o captar contactos a cambio de un código de descuento, un banner promocional es una de las mejores herramientas para conseguirlo.

Pero ¿por qué conformarse con un banner estático? Una cuenta atrás puede crear sensación de urgencia, los contenidos multimedia pueden dar más impacto al banner y un formulario de captura de correo electrónico puede generar contactos de inmediato. Por desgracia, Shopify no facilita incluir ninguna de estas opciones. Los temas OS 2.0 de Shopify incluyen secciones nativas de «barra de anuncios» y «barra de imagen», pero se limitan a texto sin formato en la parte superior de la página y, en el banner, a dos imágenes estáticas, algo de texto y dos botones. 

Si quieres insertar un banner promocional en Shopify con un formulario de captación de contactos que se muestre de forma distinta en dispositivos móviles o de escritorio, o que incluya una cuenta atrás o un vídeo, no puedes hacerlo sin escribir código personalizado en Liquid y JavaScript. Shopify Magic, el creador con IA de Shopify, puede generar un banner personalizado en Liquid, pero no ofrece asistencia. Y, a menos que entiendas el código que ha creado Shopify Magic, la velocidad y la accesibilidad de tu tienda pueden verse afectadas. 

Esto deja a la mayoría de los comerciantes con dos opciones: instalar una aplicación de pago de terceros desde la Shopify App Store o utilizar un widget gratuito, ligero y sin servidor que proteja la velocidad de tu página y la arquitectura de tu tema. 

Veamos cómo añadir un banner a un sitio web de Shopify.

Opción 1: instala una integración específica de la Shopify App Store

Añadir una barra de anuncios de Shopify a tu tienda con una aplicación de banners o ventanas emergentes de terceros es eficaz, pero tiene sus inconvenientes. Hablaremos de ello más adelante.

Así se configura: 

1. Ve a la Shopify App Store y busca una aplicación de banners o ventanas emergentes. Yo elegí Essential Announcement Bar, pero puedes escoger la que más te guste. 

2. Haz clic en Instalar. 

3. Sigue la guía de incorporación o de configuración, si la hay, para familiarizarte con los aspectos básicos del complemento. 

4. Configura tu banner o ventana emergente en la aplicación. Puedes personalizar el texto, el diseño, la ubicación y otras funciones. Cuando termines, haz clic en Publicar.

La barra de anuncios o la ventana emergente ya aparecerá en tu tienda. Hasta aquí, todo bien. 

Sin embargo, cada aplicación que instalas en tu tienda de Shopify añade su propio CSS y JavaScript a tu escaparate. Esto puede afectar a tus Core Web Vitals, ralentizar tu sitio, provocar retrasos durante el proceso de pago y perjudicar tu posicionamiento SEO. Aunque añadir una sola aplicación rara vez supone un problema, añadir decenas puede tener un impacto real. Si puedes hacer algo sin instalar una aplicación, tendrás más margen para instalar las que sí son necesarias. 

Además, las aplicaciones de terceros de Shopify pueden requerir suscripciones de pago. Es probable que una versión gratuita tenga un conjunto limitado de funciones, solo funcione durante las primeras 1500 impresiones al mes, incluya una marca de agua o, de alguna otra manera, no resulte muy eficaz. Si quieres funciones avanzadas o, simplemente, un banner limpio y sin marca que soporte el alto tráfico de las fechas festivas, normalmente tendrás que pagar una cuota de suscripción mensual. 

Si quieres asegurarte de que tu banner cumpla su cometido y sea visible para todos tus clientes sin pagar una cuota mensual, hay una opción mejor. 

Opción 2: añade un widget de banner interactivo y gratuito (recomendado)

Si quieres un banner dinámico y de alta conversión con contenidos multimedia, cupones, formularios y cuentas atrás, sin tener que pagar una suscripción mensual, ralentizar tu sitio ni preocuparte por los Core Web Vitals, la opción más inteligente es usar un código incrustado alojado y fiable, como el widget de banner de Jotform. Todo el trabajo pesado se realiza fuera de tu tienda de Shopify, por lo que obtienes un banner impecable y adaptable, sin ninguno de los inconvenientes de usar una aplicación de terceros instalada. Es el mejor widget de banner gratuito para Shopify. 

Así se configura:

1. Ve al widget de banner de Jotform e inicia sesión en tu cuenta de Jotform. Si aún no tienes una, puedes registrarte gratis.

2. Añade una insignia, un encabezado y una descripción a tu banner. Puedes hacer que todo el banner sea clicable y añadir funciones como un botón de CTA, una cuenta atrás, un cupón y un formulario de captura de correo electrónico. 

3. Utiliza la pestaña Estilo para ajustar el aspecto de tu banner. Puedes establecer una fuente personalizada, usar CSS personalizado y desactivar la marca de Jotform.

4. Utiliza la pestaña Diseño para controlar cómo se muestran los elementos en tu banner. También puedes establecer si será visible en ordenadores de escritorio, dispositivos móviles o en ambos. 

5. Pasa a la pestaña Configuración, donde puedes poner un título a tu banner. También puedes activarlo o desactivarlo, lo cual resulta útil si quieres crear con antelación banners para las ofertas de temporada. 

6. Ve a Publicar y, a continuación, haz clic en Copiar código para obtener el código para incrustar tu banner. 

7. Vuelve a Shopify. Selecciona Tienda online en la barra lateral y, a continuación, Editar tema. 

8. Haz clic en Añadir sección y, a continuación, en Liquid personalizado. 

9. Pega el código para incrustar en el cuadro de Liquid personalizado. Después, podrás colocar el banner de anuncios donde quieras y configurar también su aspecto. 

10. Cuando termines, haz clic en Guardar y tu banner estará activo en tu sitio. 

La mayor ventaja del widget de banner de Jotform es que obtienes un control visual inigualable del banner sin necesidad de una suscripción premium ni conocimientos de programación. Con el editor fácil de usar, puedes personalizar la imagen de fondo del banner o incluso incrustar un vídeo de YouTube o Vimeo. También puedes añadir botones de CTA, una cuenta atrás o un formulario de suscripción por correo electrónico, todo ello sin coste alguno.

Para instalar tu banner personalizado en Shopify, solo tienes que copiar y pegar el código para incrustar en Shopify. Como Jotform crea el banner fuera de tu servidor, no entrará en conflicto con los estilos globales de Shopify ni afectará a la velocidad de carga de tus páginas. Obtienes un banner potente que mantendrá tus campañas funcionando sin contratiempos. 

Potencia tu tienda de Shopify con widgets inteligentes y sin servidor

El directorio de Jotform Website Widgets está repleto de excelentes widgets gratuitos para sitios web, entre ellos el widget de banner de Jotform. Con los widgets de Jotform, tu widget de feed de Instagram puede mostrar tu producto en uso, los testimonios pueden destacar lo popular que es, las notificaciones de ventas pueden poner el foco en cada venta y una guía de tallas puede ayudar a las personas a encontrar el producto que mejor les quede. Muchas otras herramientas gratuitas pueden maximizar tus conversiones de añadir al carrito sin dejar de mantener tu tienda ligera y de carga rápida.

Al eliminar parte de las complicaciones de vender en Shopify, Jotform Website Widgets te permite dedicar tu tiempo y tu presupuesto a buscar buenos productos, hacer marketing online y construir una tienda de comercio electrónico exitosa. No necesitas pagar por un simple banner en la página de un producto. 

Si quieres hacer más con Shopify, echa un vistazo a la integración completa de Jotform + Shopify. Puedes usarla para añadir formularios a tu tienda de Shopify, cobrar pagos y mucho más.