Aprende a personalizar la barra de anuncios en tu cajón de Upcart, incluyendo altura, posición, temporizador de cuenta regresiva, formato de texto y colores.
La configuración de altura controla el grosor con que aparece la barra de anuncios. Ofrece tres opciones: Slim, Normal y Thick. Slim mantiene el cajón más compacto, dejando espacio para el contenido del carrito, algo especialmente útil en pantallas pequeñas. Normal se sitúa entre las dos. Thick proporciona un mayor énfasis visual, ayudando a que tu mensaje destaque ante los clientes.
Usa la configuración de posición para elegir si la barra de anuncios aparece Before products o After products dentro del cajón del carrito.
Before products coloca la barra en la parte superior del cuerpo del carrito, directamente debajo del encabezado.
After products la coloca en la parte inferior del cuerpo del carrito, justo encima del pie, debajo de los módulos de notas y upsells si también están ubicados ahí.
Si quieres que el anuncio caduque después de un tiempo determinado, establece una cuenta regresiva en el campo Timer duration. Acepta el formato MM:SS: 05:00 para cinco minutos, 00:30 para treinta segundos. Los segundos deben estar entre 00 y 59; el campo rechaza cualquier valor superior.La cuenta regresiva solo se ejecuta si el texto de tu anuncio contiene la variable del temporizador. Una vez que se agota, toda la barra de anuncios se elimina automáticamente del carrito.
El temporizador de cuenta regresiva integrado se basa en la sesión y cuenta hacia atrás desde un número determinado de minutos. No admite cuentas regresivas recurrentes o diarias que se reinicien a una hora específica (por ejemplo, una cuenta regresiva hasta las 2:00 PM todos los días). Esta funcionalidad no está disponible actualmente en Upcart.
Esta sección te permite introducir y dar formato al mensaje que se muestra en el banner de anuncios. Puedes dar estilo a partes específicas del texto usando la barra de formato encima del campo de entrada, que incluye opciones de negrita, cursiva, subrayado y color. Al aplicar un color, puedes usar la muestra del selector de color o escribir o pegar un código hex (por ejemplo #DDDDDD) en el campo de texto debajo del selector.
El campo de texto del anuncio no admite hipervínculos: no hay ningún botón de enlace o URL en la barra de formato, y las etiquetas <a> o los enlaces Markdown pegados se eliminan al guardar. Para hacer que el anuncio sea clicable o incluir un enlace, usa el módulo Custom HTML en su lugar (ver abajo).
Dado que el campo de texto del anuncio integrado no muestra hipervínculos, puedes reemplazar o complementar la barra de anuncios inyectando un enlace con Custom HTML:
Ve a Upcart > Cart Editor > Settings > Custom HTML.
Establece HTML Location en Above announcements/rewards (para que aparezca encima de la barra de anuncios) o Below header/announcements/rewards (para que aparezca directamente debajo de ella).
Pega un fragmento con tu enlace, por ejemplo:
<div style="text-align: center; padding: 8px;"> <a href="https://yourstore.com/sale" style="color: #ffffff; text-decoration: underline;"> Shop the sale → </a></div>
Haz clic en Save y luego pruébalo en tu carrito en vivo.
Para más información sobre las ubicaciones y el estilo de Custom HTML, consulta Custom HTML y Custom CSS. El equipo de soporte de Upcart no escribe ni depura código personalizado: contacta a un Shopify Expert si necesitas ayuda para crearlo.Si usas la función de cuenta regresiva, inserta la variable del temporizador directamente en tu mensaje. Usa {{timer}} para carritos V2 o {TIMER} para carritos V1.
Asegúrate de escribir manualmente la variable del temporizador ({{timer}} para V2, {TIMER} para V1) en lugar de copiarla y pegarla. Esto evita problemas de formato ocultos que podrían impedir que el temporizador se muestre correctamente en tu carrito en vivo.
Puedes controlar el tamaño del texto del anuncio usando el deslizador, con opciones que van de 10px a 24px. Esto ayuda a garantizar la legibilidad tanto en móvil como en escritorio.
Background Color te permite definir el color de relleno general de la barra de anuncios. Border Color te permite ajustar las líneas horizontales encima y debajo del banner para lograr un aspecto de contenedor estilizado.
Para funcionalidad adicional, se puede usar JavaScript para personalizar el temporizador de cuenta regresiva. Añade tu script en la sección “Scripts (Before Load)” en lugar del módulo Custom HTML. Este es un requisito de tiempo de carga, no una restricción de seguridad: Custom HTML sí ejecuta scripts, pero se ejecutan demasiado tarde para engancharse de forma fiable al evento de carga del carrito. La sección “Scripts (Before Load)” ejecuta tu código antes de que se cargue el carrito, de modo que los callbacks como upcartSubscribeCartLoaded se disparan correctamente. Código de ejemplo:
<script> window.upcartSubscribeCartLoaded(function(event) { // Your countdown timer code here // event.cart contains the cart object with .items[], .total, .currency });</script>
Nota sobre versiones anteriores: window.upcartOnCartLoaded todavía funciona, pero está obsoleto y registra una advertencia en la consola. Usa upcartSubscribeCartLoaded para todos los scripts nuevos.Asegúrate de probar cuidadosamente la ubicación y la sintaxis de tu código. Algunas restricciones de la plataforma aún pueden afectar cómo se procesan los scripts.
¿Esta página le ayudó?
⌘I
Assistant
Responses are generated using AI and may contain mistakes.
