Announcement Bar

<section class="sl-announce" role="region" aria-label="Announcement" style="padding:.6rem 1rem;font-size:.875rem;font-family:inherit;background:{{ section.settings.bg_color | default: 'var(--sl-accent,#0a5cff)' }};color:{{ section.settings.text_color | default: '#fff' }};">
  <div style="max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:center;text-align:center;">
    {%- if section.blocks.size > 0 -%}
      {%- for block in section.blocks -%}
        <span style="display:inline-flex;align-items:center;gap:.4rem;" {{ block.shopify_attributes }}>
          {%- if block.settings.icon != blank -%}<span aria-hidden="true">{{ block.settings.icon }}</span>{%- endif -%}
          <span>{{ block.settings.message }}</span>
          {%- if block.settings.link != blank and block.settings.link_text != blank -%}
            <a href="{{ block.settings.link }}" style="color:inherit;text-decoration:underline;font-weight:600;">{{ block.settings.link_text }} &rarr;</a>
          {%- endif -%}
        </span>
      {%- endfor -%}
    {%- else -%}
      <span style="display:inline-flex;align-items:center;gap:.4rem;">
        {%- if section.settings.icon != blank -%}<span aria-hidden="true">{{ section.settings.icon }}</span>{%- endif -%}
        <span>{{ section.settings.message }}</span>
        {%- if section.settings.link != blank and section.settings.link_text != blank -%}
          <a href="{{ section.settings.link }}" style="color:inherit;text-decoration:underline;font-weight:600;margin-left:.25rem;">{{ section.settings.link_text }} &rarr;</a>
        {%- endif -%}
      </span>
    {%- endif -%}
  </div>
</section>
{% schema %}
{
  "name": "Announcement Bar",
  "settings": [
    { "type": "text", "id": "icon", "label": "Leading icon (emoji)", "default": "🚚" },
    { "type": "text", "id": "message", "label": "Message", "default": "Free shipping on US orders over $50" },
    { "type": "text", "id": "link_text", "label": "Link text", "default": "Shop now" },
    { "type": "url", "id": "link", "label": "Link" },
    { "type": "color", "id": "bg_color", "label": "Background color" },
    { "type": "color", "id": "text_color", "label": "Text color" }
  ],
  "blocks": [
    {
      "type": "message",
      "name": "Rotating message",
      "settings": [
        { "type": "text", "id": "icon", "label": "Leading icon (emoji)", "default": "✨" },
        { "type": "text", "id": "message", "label": "Message", "default": "New arrivals just dropped" },
        { "type": "text", "id": "link_text", "label": "Link text", "default": "Shop" },
        { "type": "url", "id": "link", "label": "Link" }
      ]
    }
  ],
  "presets": [{ "name": "Announcement Bar" }]
}
{% endschema %}