Shopify announcement bar without an app (dismissible, with countdown)

An announcement bar is the slim strip across the very top of the store: free shipping over a threshold, a sale code, a shipping cutoff before the holidays. Every announcement-bar app in the store charges a monthly fee for what is, at the core, one Liquid section and about fifteen lines of JavaScript. If you own the theme, you do not need the app. You need a {% schema %} so the merchant can edit the message, a dismiss button that stays dismissed, and (optionally) a countdown wired to a date the merchant sets, never one you hardcode.

The section and its schema

An announcement bar is a full-width module the merchant turns on and off, so it belongs in sections/, not snippets/. The section that follows reads everything from section.settings, which means the merchant edits the copy, the link, and the colors from the theme editor without ever opening a code file. That is the whole point: the developer ships the structure once, the merchant owns the words.

1{% if section.settings.enabled and section.settings.message != blank %}2  <aside3    class="announcement-bar"4    data-announcement5    data-key="{{ section.id }}"6    style="--bar-bg: {{ section.settings.bar_color }}; --bar-fg: {{ section.settings.text_color }};"7  >8    <div class="announcement-bar__inner page-width">9      <p class="announcement-bar__message">10        {{ section.settings.message }}11        {% if section.settings.link_url != blank %}12          <a class="announcement-bar__link" href="{{ section.settings.link_url }}">13            {{ section.settings.link_label }}14          </a>15        {% endif %}16      </p>17 18      <button19        type="button"20        class="announcement-bar__close"21        data-announcement-close22        aria-label="{{ 'sections.announcement.dismiss' | t }}"23      >24        &times;25      </button>26    </div>27  </aside>28{% endif %}29 30{% schema %}31{32  "name": "Announcement bar",33  "settings": [34    {35      "type": "checkbox",36      "id": "enabled",37      "label": "Show announcement bar",38      "default": true39    },40    {41      "type": "richtext",42      "id": "message",43      "label": "Message",44      "default": "<p>Free shipping on orders over $75</p>"45    },46    {47      "type": "url",48      "id": "link_url",49      "label": "Link"50    },51    {52      "type": "text",53      "id": "link_label",54      "label": "Link label",55      "default": "Shop the sale"56    },57    {58      "type": "color",59      "id": "bar_color",60      "label": "Background",61      "default": "#1c1a17"62    },63    {64      "type": "color",65      "id": "text_color",66      "label": "Text",67      "default": "#ffffff"68    }69  ],70  "presets": [{ "name": "Announcement bar" }]71}72{% endschema %}

• enabled is a checkbox setting. The merchant toggles the whole bar off for a slow week without deleting their copy, and the {% if %} guard means an empty message renders nothing at all.
• message is a richtext setting so the merchant can bold a word or add a link inline. richtext is sanitized by Shopify, which is what you want for merchant-entered HTML.
• The url setting type gives the merchant a proper resource picker (collection, product, page, or external URL), not a raw text box where they can fat-finger a broken path.
• Two color settings feed CSS custom properties on the element (--bar-bg and --bar-fg). A computed value at render time is the one legitimate use of an inline style attribute.
• The presets block is what lets the merchant drag the section in from the editor. Without it the section exists but cannot be added.

Making it dismissible (and keeping it dismissed)

A close button is trivial. The detail that separates a real bar from a tutorial one is persistence: once a shopper dismisses the bar, it must stay gone as they browse, otherwise it is just nagging. There is no server-side per-visitor state for this in a theme, and you should not build a shadow cart or cookie soup for a banner. The right tool is localStorage: a single key, set on dismiss, checked on load.

1document.querySelectorAll('[data-announcement]').forEach((bar) => {2  const storageKey = 'announcement-dismissed:' + bar.dataset.key;3 4  // Hide immediately if this shopper already dismissed this bar.5  if (localStorage.getItem(storageKey) === '1') {6    bar.hidden = true;7    return;8  }9 10  const closeButton = bar.querySelector('[data-announcement-close]');11  closeButton?.addEventListener('click', () => {12    bar.hidden = true;13    localStorage.setItem(storageKey, '1');14  });15});

• The key is namespaced with section.id (bar.dataset.key), so if the merchant changes the message and you want the bar to show again, you change the section, the key changes, and dismissals reset. Two different bars never collide.
• Setting bar.hidden = true is the accessible way to remove it: it drops out of the layout and the accessibility tree, unlike visibility: hidden or an off-screen hack.
• The check runs on load before paint if the script is in the <head> with a small inline guard, but for most stores running it at the end of the section is fine and avoids a flash if you start the bar collapsed in CSS.

The optional countdown: a date the merchant owns

Sale bars convert harder with a clock. Here is the rule that AI-generated versions almost always break: never hardcode the deadline in code. A countdown that ends on a date baked into a .js file is a support ticket waiting to happen, because the merchant cannot change it and will not remember to ask you. The deadline is content, so it belongs in a setting the merchant edits.

Shopify themes do not have a date input setting type (that type exists for checkout and customer-account extensions, not theme schemas). The correct primitive is a text setting holding an ISO 8601 date, which the browser parses reliably. Add these two settings to the schema above:

1{2  "type": "checkbox",3  "id": "show_countdown",4  "label": "Show countdown",5  "default": false6},7{8  "type": "text",9  "id": "deadline",10  "label": "Sale ends (e.g. 2026-07-01T23:59)",11  "info": "ISO date and time. The countdown hides itself once this passes.",12  "default": "2026-07-01T23:59"13}

Render the deadline into a <time> element with a machine-readable datetime attribute. That is both the semantic HTML choice and the value the JavaScript reads, so the date lives in exactly one place: the setting.

1{% if section.settings.show_countdown and section.settings.deadline != blank %}2  <time3    class="announcement-bar__countdown"4    data-countdown5    datetime="{{ section.settings.deadline }}"6  >{{ section.settings.deadline }}</time>7{% endif %}

1document.querySelectorAll('[data-countdown]').forEach((el) => {2  const end = Date.parse(el.getAttribute('datetime'));3  if (Number.isNaN(end)) return;4 5  const tick = () => {6    const remaining = end - Date.now();7    if (remaining <= 0) {8      el.textContent = 'Ended';9      return;10    }11    const totalSeconds = Math.floor(remaining / 1000);12    const days = Math.floor(totalSeconds / 86400);13    const hours = Math.floor((totalSeconds % 86400) / 3600);14    const minutes = Math.floor((totalSeconds % 3600) / 60);15    const seconds = totalSeconds % 60;16    el.textContent = days + 'd ' + hours + 'h ' + minutes + 'm ' + seconds + 's';17  };18 19  tick();20  setInterval(tick, 1000);21});

What AI tools get wrong here

Ask a code assistant for an announcement bar and you usually get markup that works in a demo and falls apart in a real store. The failures cluster:

• Hardcoding the message and the deadline straight into the Liquid or the JavaScript. The merchant cannot change a word without a developer, so the bar goes stale and the sale clock counts down to a date that already passed.
• No schema at all, just a <div> pasted into theme.liquid. It is invisible in the theme editor, so the merchant has no way to toggle it, restyle it, or take it down for a slow week.
• A dismiss button with no persistence. Clicking close hides it for that pageview, then it reappears on the next click-through. Without localStorage the close button is decorative.
• Reaching for a date setting type that does not exist in theme schemas. A date input is a checkout and customer-account extension type, not a theme one, so the upload fails. The real answer is a text setting with an ISO value, which is conservative and parses everywhere.

Wrapping up

One section, one {% schema %}, a few lines of localStorage, and an optional clock that reads a date the merchant owns. That replaces a paid app and behaves like part of the theme, because it is. The same instincts (real settings, no hardcoded content, accessible dismissal) carry straight into the other bars worth building: a free shipping progress bar and a sticky add to cart bar that keeps the buy action in reach.