Announcements Free

Configurable announcement bar

A theme-editor-controlled top bar for promos or shipping messages, with settings for text, link and colors.

<div class="announcement-bar" style="background: {{ section.settings.bg_color }}; color: {{ section.settings.text_color }};">
  {%- if section.settings.link != blank -%}
    <a href="{{ section.settings.link }}">{{ section.settings.message }}</a>
  {%- else -%}
    <span>{{ section.settings.message }}</span>
  {%- endif -%}
</div>
<style>
  .announcement-bar{text-align:center;padding:8px 16px;font-size:13px;font-weight:600}
  .announcement-bar a{color:inherit;text-decoration:underline}
</style>

{% schema %}
{
  "name": "Announcement bar",
  "settings": [
    { "type": "text", "id": "message", "label": "Message", "default": "Free shipping on orders over 50€" },
    { "type": "url", "id": "link", "label": "Link (optional)" },
    { "type": "color", "id": "bg_color", "label": "Background", "default": "#111111" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#ffffff" }
  ],
  "presets": [ { "name": "Announcement bar" } ]
}
{% endschema %}

Gives you a promo bar you can edit from the theme customizer without touching code again. Save it as a new section file sections/announcement-bar.liquid, then add it via the theme editor.

Notes

The {% schema %} block makes the message, link and colors editable in the theme editor — no redeploy to change a promo.
Because it is a section with a presets entry, you can drag it into any OS 2.0 template.
Keep only one such bar active at a time so it does not compete with your header.