Marquee at the announcement bar

Store Design

Topic summary

A user seeks help adding a marquee effect to their announcement bar, as their current theme doesn’t support this feature natively.

Solutions Offered:

Multiple community members requested the website link and theme details to provide tailored assistance.

Code-Based Approaches:

  • Basic HTML method: Wrap announcement text in deprecated <marquee> tags via the theme’s announcement-bar.liquid file
  • Modern CSS animation: Replace announcement markup with custom HTML/Liquid structure, add CSS keyframe animations for smooth scrolling, and include JavaScript to auto-calculate scroll duration based on content length. This approach includes accessibility features (pause on hover/focus)

App Alternative:

One user recommended the “OT Section: Theme Sections” Shopify app, which includes a free “Scrolling Announcement Bar” section.

Status: The discussion remains open, awaiting the original poster to share their website link or choose an implementation method.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

Hi I’m trying to create a marquee at the anouncement bar at my website since the theme I’m using doesn’t allows me to do so, can anyne please help me?+

1 Like
2

Hi @DaniCollantes,

Please send the website link, I will check it for you

3

Hi! Please share your website (or preview) link and your theme name/version. I can help you add a marquee to the announcement bar either with a small custom section or a quick code snippet (no app needed).

4

If your theme doesn’t have a marquee option for the announcement bar, you can add it with HTML and CSS.

  1. Go to Online Store → Themes → Edit code.

  2. Open the announcement bar section file (often called announcement-bar.liquid).

  3. Wrap your text in a <marquee> tag, for example:

<marquee behavior="scroll" direction="left">Scrolling text here</marquee>
  1. Save and check your store.

For a modern approach, you can use CSS animations instead of <marquee>.

5

Hi,

Hope this will help

  • Find your announcement bar code and replace announcement markup with this (HTML / Liquid)

Example

<!-- announcement-marquee wrapper: paste this in place of the old announcement text -->
<div class="announcement-marquee" role="region" aria-label="Announcement" aria-live="polite" tabindex="0">
  <div class="marquee-track">
    <span class="marquee-content">
      {{ section.settings.announcement | escape }}
    </span>
    <!-- duplicate the same content for a smooth loop -->
    <span class="marquee-content">
      {{ section.settings.announcement | escape }}
    </span>
  </div>
</div>
  • Add the CSS
/* === Announcement marquee styles === */
.announcement-marquee {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 8px 0; /* adjust spacing */
}

.announcement-marquee .marquee-track {
  display: flex;
  align-items: center;
  width: max-content;          /* track width = content width */
  will-change: transform;
  animation: marquee var(--marquee-duration, 12s) linear infinite;
}

.announcement-marquee .marquee-content {
  white-space: nowrap;
  padding-right: 40px; /* space between repeats */
  font-weight: 600;    /* make it bold if you like */
}

/* pause on hover or focus (good for accessibility) */
.announcement-marquee:focus .marquee-track,
.announcement-marquee .marquee-track:hover {
  animation-play-state: paused;
}

/* loop animation — because we duplicate the content, shifting -50% is correct */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* respect user reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .announcement-marquee .marquee-track {
    animation: none;
    transform: none;
  }
}
  • Add the small JS helper
document.addEventListener('DOMContentLoaded', function () {
  var wrapper = document.querySelector('.announcement-marquee');
  if (!wrapper) return;
  var track = wrapper.querySelector('.marquee-track');
  var content = wrapper.querySelector('.marquee-content');
  if (!track || !content) return;

  // If not already duplicated, clone the content so the loop is seamless
  if (track.children.length < 2) {
    var clone = content.cloneNode(true);
    track.appendChild(clone);
  }

  // Auto-calc duration so longer text scrolls at the same speed
  function setDuration() {
    var contentWidth = content.offsetWidth;
    var visibleWidth = wrapper.offsetWidth;
    var pxPerSecond = 100; // change number to make the scroll faster/slower
    var duration = (contentWidth + visibleWidth) / pxPerSecond;
    wrapper.style.setProperty('--marquee-duration', duration + 's');
  }

  setDuration();
  window.addEventListener('resize', setDuration);
});

Now instruct theme to load it:

Open layout/theme.liquid (or layout/theme.liquid.liquid) and just before add:

<script src="{{ 'announcement-marquee.js' | asset_url }}" defer></script>
6

Hi @DaniCollantes , you can check the app OT Section: Theme Sections, ít has a section called “Scrolling Announcement Bar” totally for free.

image
image337×330 50.8 KB