Ayuda con edicion de codigos

[Tamaracalquin]

Como puedo agregar un codigo a una abrra de anuncios , para que sea dinamica ?

[Mateo-Penida]

Hola @Tamaracalquin

¿Podrías darme un poco más de detalle sobre qué tipo de contenido dinámico quieres mostrar en la barra de anuncios? Por ejemplo:

• ¿Que rote entre varios mensajes automáticamente?

• ¿Que muestre un contador regresivo?

• ¿Que cambie según el país o idioma del visitante?

• ¿o algo más?

  Y me puedes confirmar que Tema y version estas usando? Esto puedes verlo desde
  Tienda online

Con esa info te puedo orientar mejor.

[Mateo-Penida]

Hola @Tamaracalquin

Como no tengo más detalles, asumo que lo que buscas es que la barra de anuncios rote entre varios mensajes automáticamente.

La buena noticia es que la mayoría de temas de Shopify ya traen esto incluido, no necesitas tocar código.

1. Ve a Tienda Online → Personalizar

2. En el panel izquierdo, haz clic en Announcement bar (barra de anuncios)

3. Ahí vas a ver un botón de “Add block” o “Agregar bloque”. Cada bloque es un mensaje diferente

4. Agrega todos los mensajes que quieras (por ejemplo: envío gratis, descuento de temporada, nuevo producto)

   

5. En el panel derecho vas a ver una opción de “Time to next announcement” donde defines cada cuántos segundos cambia al siguiente mensaje (5 segundos funciona bien)

Con eso la barra va a rotar entre tus mensajes automáticamente. Sin código, sin apps.

De todas maneras si te referías a otra cosa, házmelo saber y te guío

[Tamaracalquin]

Hola Meteo-Penida, sirve para tema DAWN

[Mateo-Penida]

Hola @Tamaracalquin
Sí, Dawn lo soporta perfectamente.

1. Ve a Tienda Online → Personalizar/ Edit Theme

   

2. Haz clic en Announcement bar en el panel izquierdo

   

3. En el panel derecho, activa “Auto rotate announcements”

4. Ajusta el tiempo en “Change every” (5 segundos funciona bien)

   

5. Para agregar más mensajes, haz clic en “Add Announcement” en el panel izquierdo y escribe cada mensaje

Guarda y listo, la barra va a rotar entre tus mensajes automáticamente.

Si esto te funcionó, márcalo como solución así otros con la misma duda pueden encontrar la respuesta más rápido .

[devcoders]

Hi @Tamaracalquin

You can make your announcement bar dynamic by adding custom code

Usually this is done using:

• Theme Customizer settings

• Liquid code

• or JavaScript

Examples:

• rotating text

• countdown timer

• auto-changing offers

• free shipping progress

• geo/location-based messages

If your theme supports Custom Liquid, you can add dynamic code directly inside the announcement bar section.

The file is usually:

• sections/announcement-bar.liquid

• or header.liquid

Then you can use something like:

{{ section.settings.text }}

or add custom JavaScript for dynamic behavior

[Tamaracalquin]

Y ese mismo código lo puedo pegar ?

[Mateo-Penida]

Hola de nuevo @Tamaracalquin

No necesitas pegar ningún código parala rotacion del texto. La solución que te compartí antes se hace 100% desde el editor visual, sin tocar código.

Pero si prefieres hacerlo por código o quieres asegurarte de que la rotación funcione siempre, puedes añadir esto:

1. Ve a Tienda Online → Temas → tres puntos (⋯) → Editar código

2. Abre Assets → base.css (o el archivo CSS principal de tu tema)

3. Pega esto al final del archivo:

.announcement-bar .slider {
  scroll-snap-type: x mandatory;
}

4. Ahora abre Sections → announcement-bar.liquid

5. Al final del archivo, antes de la última línea {% schema %}, pega esto:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const slider = document.querySelector('.announcement-bar .slider');
    if (slider && slider.children.length > 1) {
      let current = 0;
      const slides = slider.children;
      setInterval(function() {
        current = (current + 1) % slides.length;
        slides[current].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
      }, 5000);
    }
  });
</script>

Esto hace que la barra rote automáticamente cada 5 segundos. Si quieres cambiar la velocidad, solo cambia el 5000 (está en milisegundos, 5000 = 5 segundos).

Y si quieres que se vea mejor visualmente, en el campo de Custom CSS desde el Editor del tema, teniendo seleccionado la barra de anuncios puedes pegar algo como:

.announcement-bar__message {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

Eso le da un estilo más llamativo al texto. Pero lo importante para la rotación es solo activar el toggle.