Scrolling Announcement Bar

Figuras_de_Comics · July 10, 2026, 8:08am

Hi Max, do you request to elfsigh time ago a css modification for that anuouncement bar, desplace the text with moviment, do you send us the code and work great !!!

But for a error i erase the code and now don’t find your mail with the code, could you send us again ??

Thansk for all

Max · July 10, 2026, 10:14am

Hi @Figuras_de_Comics

I don’t see any previous threads regarding this customization either. I’ve checked your account and see that you have 2 Announcement Bar widget. Could you please share the name of the Announcement Bar where it was used?

Figuras_de_Comics · July 10, 2026, 10:45am

Untitled Announcement Bar 2

Max · July 10, 2026, 11:09am

Thanks! I’ve checked the entire revision history of the widget, and it looks like it has never contained code for scrolling text since it was created. Is it possible that the scrolling code was added to a different widget or perhaps to a widget under another account?

If not, we’d be happy to help you recreate this customization. Before we do, could you please clarify a few details?

Which direction would you like the text to scroll: from right to left or from left to right?
Should the Nuevo badge scroll along with the text, or remain fixed?
How would you like the scrolling to work? Should the text scroll only within its current section? Or would you prefer the Nuevo badge to stay on the left, with the text repeated several times (for example, three instances) so it continuously fills the remaining space in the bar?

Max · July 10, 2026, 11:12am

I’ve also noticed that the quote text from the Community post has been copied to your Custom CSS section, so I’ve removed it from there:

Figuras_de_Comics · July 11, 2026, 9:22am

Buenos dias, te prometo que me lo pasasteis y lo incorpore al widget y funcionaba perfectamente, pero cambie el texto y se me borro.

Desplazamiento De Derecha a Izquierda.

El distintivo fijo a la izauierda.

Prefiero que el distintivo de Nuevo permanezca a la izquierda, con el texto repetido varias veces (por ejemplo, tres veces) para que ocupe continuamente el espacio restante en la barra, xomo has comentado

Figuras_de_Comics · July 11, 2026, 9:34am

Good morning. I promise you that you sent it to me and I added it to the widget—it was working perfectly—but then I changed the text and it got deleted.

Right-to-left scrolling.

The badge fixed to the left.

I would prefer the “New” badge to stay on the left, with the text repeated several times (for example, three times) so that it continuously fills the remaining space on the bar, just as you mentioned.

Max · July 13, 2026, 10:16am

Got it, thanks!

I’ve forwarded your request to the devs and will update you once the solution is ready

Max · July 15, 2026, 8:38am

Hi there, @Figuras_de_Comics

We’ve added this code to the Code Editor of the Message field:

<style>
  .es-announcement-bar-opened .marquee-wrapper {
      overflow: hidden;
      width: 100%;
  }
  .es-announcement-bar-opened .marquee {
      will-change: transform;
      display: flex;
      width: max-content;
      animation: marquee 50s linear infinite;  
  }
  .es-announcement-bar-opened .marquee-group {
      display: flex;
      flex-shrink: 0;
      gap: 60px;
      padding-right: 60px; 
  }
  .es-announcement-bar-opened .marquee-item {
      display: flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap;
      flex: 0 0 auto;
  }
  .es-announcement-bar-opened .custom-icon {
      position: absolute;
      background-color: #B82D2D;
      padding-left: 10px;
      left: 0;
      top: 0;
      transform: translateY(-15%);
      width: 20px;
      height: 20px;
      fill: rgb(255,235,0);
      z-index: 1;
  }
  .es-announcement-bar-opened .marquee:hover {
    animation-play-state: paused;
  }
  @keyframes marquee {
      from {
          transform: translateX(0%);
      }
      to {
          transform: translateX(calc(-100% / 3));
      }
  }
</style>
<div class="marquee-wrapper">
    <svg class="custom-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="injected-svg" data-src="https://static.elfsight.com/icons/shopping-bag-2.svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path fill-rule="evenodd" d="M12.291 0h-.37A4.175 4.175 0 0 0 9.34 1.083a4.116 4.116 0 0 0-1.336 2.912c-.005.307-.004.614-.003.921V5.5c-.19.007-.381.004-.573 0-.476-.008-.954-.017-1.41.135a2.744 2.744 0 0 0-1.635 1.442 2.85 2.85 0 0 0-.256 1l-.175 1.92-.75 8.262a3.44 3.44 0 0 0 .62 2.291c.6.857 1.607 1.4 2.65 1.45h11.292a3.466 3.466 0 0 0 2.626-1.396c.503-.677.74-1.542.656-2.381l-.311-3.428c-.206-2.268-.412-4.536-.62-6.804a2.748 2.748 0 0 0-1.733-2.304c-.5-.204-1.037-.196-1.57-.187-.189.003-.376.006-.561 0a38.547 38.547 0 0 1 0-.589c.001-.334.002-.669-.007-1.003A4.126 4.126 0 0 0 14.748.942 4.151 4.151 0 0 0 12.29 0ZM9.376 4.081c.002-1 .61-1.96 1.502-2.408a2.761 2.761 0 0 1 1.996-.194c.968.262 1.745 1.103 1.943 2.085.06.274.06.555.058.835V5.5h-5.5V4.081Zm-.08 4.541a.69.69 0 0 0-.727-.362.69.69 0 0 0-.507.39c-.083.183-.067.384-.05.58l.01.131c.125 1.338.96 2.576 2.145 3.207.976.531 2.17.64 3.226.295a4.13 4.13 0 0 0 2.855-3.928.686.686 0 1 0-1.376.046 2.75 2.75 0 0 1-2.963 2.697 2.753 2.753 0 0 1-1.726-.797 2.72 2.72 0 0 1-.806-1.858c-.001-.137-.011-.28-.08-.401Z" clip-rule="evenodd">
        </path>
    </svg>   
    <div class="marquee">
        <div class="marquee-group">
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
        </div>
        <div class="marquee-group">
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
        </div>
        <div class="marquee-group">
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
          <div class="marquee-item">           
        	<strong>ENVIOS GRATIS +40€ + UN REGALO CON CADA PEDIDO</strong>
          </div>
        </div>
    </div>
</div>

Check it out and let me know if you like the result

Topic		Replies	Views
Custom news ticker Customization announcement-bar	3	78	October 27, 2025
Announcement Bar - can we have scrolling text options? General Questions	21	232	September 16, 2024
Scrolling Marquee Bar Customization announcement-bar	3	52	December 31, 2025
Moving Announcement Bar Announcement Bar Gathering-Feedback	4	301	December 3, 2024
Scrolling Text in Announcement Bar Squarespace Squarespace Tips squarespace	0	9	July 7, 2026

Scrolling Announcement Bar

Related topics