How to animate the announcement bar with marquee in code?

Store Design
, ,

Topic summary

A Shopify developer is seeking help to add a marquee scrolling animation to their announcement bar. They’ve shared their current Liquid template code, which includes:

  • Conditional display logic for the announcement bar
  • Custom styling with background/text colors from theme settings
  • Optional message link wrapper
  • Close button functionality
  • Schema settings for customization options

The developer mentions having “some clue on adding ” but is uncertain about the proper implementation location within their existing code structure.

Current Status: The question remains unanswered with no solutions or suggestions provided yet. The developer needs guidance on integrating CSS or HTML marquee functionality into their announcement bar component.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

This is my code now

{% if section.settings.show_announcement and section.settings.message != blank %}
    {% if section.settings.homepage_only == false or request.page_type == 'index' %}
        {% style %}
            .announcement-bar {
                background-color: {{ settings.color_annoucement_bg | default: '#222' }};
                {% if section.settings.show_divider %}
                border-bottom: 1px solid var(--color-border);
                {% endif %}
            }
            .announcement-bar__content, .sf-topbar__close {
                color: {{ settings.color_annoucement_text | default: '#fff' }}
            }
            .announcement-bar a:hover {
                opacity: .6;
            }
        {% endstyle %}
        <section
            data-section-id="{{ section.id }}"
            data-section-type="announcement"
            class="announcement-bar relative"
        >
            {%- unless section.settings.message_link == blank -%}
                <a href="{{ section.settings.message_link }}" class="announcement-bar__link">
            {%- endunless -%}
                <div class="announcement-bar__content md:text-center py-2.5 text-base">{{ section.settings.message }}</div>
            {%- unless section.settings.message_link == blank -%}
                </a>
            {%- endunless -%}
            {% if section.settings.show_close %}
                <div class="sf-topbar__close p-3 absolute top-0 right-0 cursor-pointer h-full flex items-center">
                    <svg class="w-[20px] h-[20px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </div>
                <script>
                    document.querySelector('.sf-topbar__close').addEventListener('click', function () {
                        document.querySelector('.announcement-bar').remove()
                        document.documentElement.style.setProperty('--sf-announcement-height', '0px')
                    })
                </script>
            {% endif %}
        </section>
    {% endif %}
{% endif %}

{% schema %}
{
  "name": "Announcement bar",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_announcement",
      "label": "Show announcement",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "homepage_only",
      "label": "Home page only",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_close",
      "label": "Show close button",
      "default": true
    },
    {
      "type": "textarea",
      "id": "message",
      "label": "Message",
      "default": "Free shipping for all orders from $60+"
    },
    {
      "type": "url",
      "id": "message_link",
      "label": "Link"
    },
    {
      "type": "checkbox",
      "id": "show_divider",
      "label": "Show divider",
      "default": false
    }
  ]
}
{% endschema %}

had some clue on adding

But not sure where to add it, can someone help?