Free Announcement Marquee Section for ShopifyNo app. Copy, paste, done.

{%- if section.blocks.size > 0 or request.design_mode -%}
  <sf-announcement-marquee
    class="sf-announce"
    style="--sf-announce-bg: {{ section.settings.background_color }}; --sf-announce-text: {{ section.settings.text_color }}; --sf-announce-duration: {{ section.settings.duration }}s; --sf-announce-size: {{ section.settings.font_size }}px; --sf-announce-py: {{ section.settings.padding }}px;"
  >
    {%- if section.blocks.size > 0 -%}
      <div class="sf-announce__viewport">
        <div class="sf-announce__track">
          {%- for copy in (1..2) -%}
            <ul class="sf-announce__list" role="list" {% if copy == 2 %}aria-hidden="true"{% endif %}>
              {%- for block in section.blocks -%}
                <li class="sf-announce__item" {% if copy == 1 %}{{ block.shopify_attributes }}{% endif %}>
                  {%- if block.settings.link != blank and copy == 1 -%}
                    <a class="sf-announce__link" href="{{ block.settings.link }}">{{ block.settings.text | escape }}</a>
                  {%- elsif block.settings.link != blank -%}
                    <span class="sf-announce__text sf-announce__text--link">{{ block.settings.text | escape }}</span>
                  {%- else -%}
                    <span class="sf-announce__text">{{ block.settings.text | escape }}</span>
                  {%- endif -%}
                  {%- unless section.settings.separator == 'none' -%}
                    <span class="sf-announce__sep" aria-hidden="true">{% if section.settings.separator == 'star' %}✦{% else %}•{% endif %}</span>
                  {%- endunless -%}
                </li>
              {%- endfor -%}
            </ul>
          {%- endfor -%}
        </div>
      </div>
      <button type="button" class="sf-announce__toggle" aria-pressed="false" aria-label="Pause announcements">
        <svg class="sf-announce__icon-pause" aria-hidden="true" focusable="false" viewBox="0 0 20 20" width="18" height="18"><path d="M7 4.5v11M13 4.5v11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        <svg class="sf-announce__icon-play" aria-hidden="true" focusable="false" viewBox="0 0 20 20" width="18" height="18"><path d="M7 4.5v11l8.5-5.5z" fill="currentColor"/></svg>
      </button>
    {%- else -%}
      <p class="sf-announce__empty">Add announcement blocks to show your messages.</p>
    {%- endif -%}
  </sf-announcement-marquee>
{%- endif -%}

{% stylesheet %}
.sf-announce { display: block; position: relative; overflow: hidden; min-height: 44px; background: var(--sf-announce-bg); color: var(--sf-announce-text); font-size: var(--sf-announce-size); }
.sf-announce__viewport { display: flex; align-items: center; min-height: 44px; overflow: hidden; margin-right: 44px; }
.sf-announce__track { display: flex; width: max-content; animation: sf-announce-scroll var(--sf-announce-duration) linear infinite; }
.sf-announce__list { display: flex; flex: none; align-items: center; justify-content: space-around; gap: 32px; min-width: 100vw; margin: 0; padding: var(--sf-announce-py) 16px; list-style: none; }
.sf-announce__item { display: inline-flex; flex: none; align-items: center; gap: 32px; white-space: nowrap; font-weight: 500; }
.sf-announce__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sf-announce__text--link { text-decoration: underline; text-underline-offset: 3px; }
.sf-announce__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.sf-announce__sep { opacity: 0.6; }
.sf-announce__viewport:hover .sf-announce__track, .sf-announce__viewport:focus-within .sf-announce__track, .sf-announce--paused .sf-announce__track { animation-play-state: paused; }
.sf-announce__toggle { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; padding: 0; border: 0; background: var(--sf-announce-bg); color: inherit; cursor: pointer; opacity: 0.75; }
.sf-announce__toggle:hover, .sf-announce__toggle:focus-visible { opacity: 1; }
.sf-announce__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.sf-announce__icon-play { display: none; }
.sf-announce--paused .sf-announce__icon-play { display: block; }
.sf-announce--paused .sf-announce__icon-pause { display: none; }
.sf-announce__empty { margin: 0; padding: 12px 16px; text-align: center; opacity: 0.8; }
@keyframes sf-announce-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sf-announce__viewport { margin-right: 0; }
  .sf-announce__track { width: auto; animation: none; }
  .sf-announce__list { min-width: 0; flex-wrap: wrap; justify-content: center; white-space: normal; }
  .sf-announce__list[aria-hidden="true"] { display: none; }
  .sf-announce__toggle { display: none; }
}
{% endstylesheet %}

{% javascript %}
if (!customElements.get('sf-announcement-marquee')) {
  class SfAnnouncementMarquee extends HTMLElement {
    connectedCallback() {
      this.userPaused = false;
      this.onClick = (event) => {
        if (!event.target.closest('.sf-announce__toggle')) return;
        this.userPaused = !this.userPaused;
        this.render(this.userPaused);
      };
      this.onSelect = (event) => {
        if (this.contains(event.target)) this.render(true);
      };
      this.onDeselect = (event) => {
        if (this.contains(event.target)) this.render(this.userPaused);
      };
      this.addEventListener('click', this.onClick);
      document.addEventListener('shopify:block:select', this.onSelect);
      document.addEventListener('shopify:block:deselect', this.onDeselect);
    }

    disconnectedCallback() {
      this.removeEventListener('click', this.onClick);
      document.removeEventListener('shopify:block:select', this.onSelect);
      document.removeEventListener('shopify:block:deselect', this.onDeselect);
    }

    render(paused) {
      this.classList.toggle('sf-announce--paused', paused);
      const toggle = this.querySelector('.sf-announce__toggle');
      if (toggle) toggle.setAttribute('aria-pressed', String(paused));
    }
  }
  customElements.define('sf-announcement-marquee', SfAnnouncementMarquee);
}
{% endjavascript %}

{% schema %}
{
  "name": "SF announcement bar",
  "tag": "section",
  "class": "sf-announce-section",
  "max_blocks": 12,
  "settings": [
    { "type": "range", "id": "duration", "label": "Loop duration", "info": "Higher is slower.", "min": 10, "max": 80, "step": 2, "unit": "s", "default": 36 },
    { "type": "range", "id": "font_size", "label": "Text size", "min": 12, "max": 20, "step": 1, "unit": "px", "default": 14 },
    {
      "type": "select",
      "id": "separator",
      "label": "Separator",
      "options": [
        { "value": "dot", "label": "Dot" },
        { "value": "star", "label": "Star" },
        { "value": "none", "label": "None" }
      ],
      "default": "dot"
    },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "background_color", "label": "Background", "default": "#111827" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#ffffff" },
    { "type": "range", "id": "padding", "label": "Vertical padding", "min": 4, "max": 24, "step": 2, "unit": "px", "default": 12 }
  ],
  "blocks": [
    {
      "type": "message",
      "name": "Message",
      "settings": [
        { "type": "text", "id": "text", "label": "Text", "default": "Free shipping on orders over $50" },
        { "type": "url", "id": "link", "label": "Link" }
      ]
    }
  ],
  "presets": [
    {
      "name": "SF announcement bar",
      "blocks": [
        { "type": "message", "settings": { "text": "Free shipping on orders over $50", "link": "/collections/all" } },
        { "type": "message", "settings": { "text": "30-day hassle-free returns" } },
        { "type": "message", "settings": { "text": "New arrivals every Friday" } }
      ]
    }
  ]
}
{% endschema %}