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 encima o debajo de la lista de productos dentro del cajón del carrito. Siempre se mostrará justo encima de la sección del pie, independientemente de la ubicación.
Si quieres que el anuncio caduque después de un tiempo determinado, puedes activar el temporizador de cuenta regresiva y definir su duración en minutos. Dado que la visualización se basa solo en minutos, recomendamos establecer un máximo de 59:60 para garantizar un comportamiento preciso. Una vez que el temporizador 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.
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.
