Dawn's announcement bar has no start or end dates. If your Black Friday message should go live at midnight on Friday, and your "closed until 4 January" notice at noon on Christmas Eve, someone has to be awake to change it.

This tutorial builds a small Custom Liquid section that takes a schedule you write once and shows whichever message is live right now. It covers:

• A plain-text schedule format that's easy to edit in the theme editor
• Parsing it with Liquid (split, date: '%s')
• Why a "scheduled" Liquid section still needs a few lines of JavaScript
• Installing and testing it without waiting for Black Friday

1. The schedule format

One message per line, four parts separated by |:

start | end | message | link (optional)

For example:

2026-11-27T00:00:00+00:00 | 2026-12-01T00:00:00+00:00 | Black Friday weekend: 20% off everything | /collections/all
2026-12-01T00:00:00+00:00 | 2026-12-17T14:00:00+00:00 | Order by 2pm on 17 December for UK Christmas delivery | /policies/shipping-policy
2026-12-24T12:00:00+00:00 | 2027-01-04T09:00:00+00:00 | We're closed until 4 January. Orders placed now ship on the 4th.

Always put a UTC offset on every date. +00:00 is UK winter time (GMT) and +01:00 is UK summer time (BST). In 2026 the UK clocks went back on 25 October, so any November or December date is +00:00. Without an offset, the date may be read in a time zone you didn't intend.

Rules the section follows:

• If two lines overlap, the first live one wins.
• Lines that have already ended are skipped.
• Lines whose end is before their start are skipped.
• Lines with fewer than three parts are skipped, so a typo can't break the header.

2. How the Liquid works

The core trick is converting every date to a Unix timestamp so they can be compared as integers:

assign now_s = 'now' | date: '%s' | plus: 0
assign start_s = parts[0] | strip | date: '%s' | plus: 0

date: '%s' turns an ISO 8601 string (with its offset) into seconds since 1970. plus: 0 turns that string into a number, so <= and >= compare numerically rather than alphabetically.

To split the schedule into lines, the section uses newline_to_br | split: '<br />'. Liquid has no direct way to split on a newline character, but newline_to_br gives you a predictable separator to split on.

3. The full section

{%- comment -%}
  Scheduled announcement messages ("Custom Liquid" section in the Header group).
  One message per line:  start | end | message | link (optional)
  Dates are ISO 8601 WITH an offset: +00:00 is UK winter time (GMT), +01:00 is UK summer time (BST).
{%- endcomment -%}
{%- capture schedule -%}
2026-11-27T00:00:00+00:00 | 2026-12-01T00:00:00+00:00 | Black Friday weekend: 20% off everything | /collections/all
2026-12-01T00:00:00+00:00 | 2026-12-17T14:00:00+00:00 | Order by 2pm on 17 December for UK Christmas delivery | /policies/shipping-policy
2026-12-24T12:00:00+00:00 | 2027-01-04T09:00:00+00:00 | We're closed until 4 January. Orders placed now ship on the 4th.
{%- endcapture -%}
{%- liquid
  assign now_s = 'now' | date: '%s' | plus: 0
  assign lines = schedule | strip | newline_to_br | split: '<br />'
  assign rendered = 0
-%}
{%- capture messages -%}
  {%- for line in lines -%}
    {%- assign parts = line | split: '|' -%}
    {%- if parts.size < 3 -%}{%- continue -%}{%- endif -%}
    {%- assign start_s = parts[0] | strip | date: '%s' | plus: 0 -%}
    {%- assign end_s = parts[1] | strip | date: '%s' | plus: 0 -%}
    {%- if end_s <= now_s or start_s >= end_s -%}{%- continue -%}{%- endif -%}
    {%- assign link = parts[3] | strip -%}
    <p
      class="sched-bar__msg"
      data-start="{{ start_s }}"
      data-end="{{ end_s }}"
      {% if start_s > now_s or rendered > 0 %}
        hidden
      {% endif %}
    >
      {%- if link != blank -%}
        <a href="{{ link | escape }}">{{ parts[2] | strip | escape }}</a>
      {%- else -%}
        {{ parts[2] | strip | escape }}
      {%- endif -%}
    </p>
    {%- if start_s <= now_s -%}{%- assign rendered = rendered | plus: 1 -%}{%- endif -%}
  {%- endfor -%}
{%- endcapture -%}
<div
  class="sched-bar{% if rendered == 0 %} is-idle{% endif %}"
  id="sched-{{ section.id }}"
  role="region"
  aria-label="Announcement"
>
  {{- messages -}}
</div>
<style>
  .sched-bar { text-align: center; padding: 0.9rem 1.5rem; font-size: 1.3rem; }
  .sched-bar p { margin: 0; }
  .sched-bar a { color: inherit; }
  .sched-bar.is-idle { display: none; }
</style>
<script>
  (function () {
    var bar = document.getElementById('sched-{{ section.id }}');
    if (!bar) return;
    var msgs = Array.prototype.slice.call(bar.querySelectorAll('.sched-bar__msg'));
    /* Shopify can serve a cached page, so the Liquid "now" above may be old. Re-check in the browser. */
    function update() {
      var now = Date.now() / 1000;
      var shown = false;
      msgs.forEach(function (m) {
        var live = !shown && now >= +m.dataset.start && now < +m.dataset.end;
        m.hidden = !live;
        if (live) shown = true;
      });
      bar.classList.toggle('is-idle', !shown);
    }
    update();
    setInterval(update, 30000);
  })();
</script>

4. Why there's JavaScript in a "scheduled" Liquid section

Liquid runs when Shopify renders the page, and Shopify caches rendered storefront pages. So the now Liquid sees can be older than the visit. If a page cached at 23:58 is served at 00:03, Liquid alone would still show yesterday's message.

So the section does two things:

1. Liquid sends every message that hasn't ended yet, each with its own data-start and data-end timestamps. Messages already past their end at render time aren't sent at all. Liquid also makes a best guess and hides everything except the message it thinks is live.
2. The browser makes the final call. The script re-checks Date.now() against each message on page load and every 30 seconds, so a tab left open overnight also switches on time.

If JavaScript is off, the Liquid decision stands. That's right for most visits, and at worst a few minutes out of date.

Because the start and end values carry an offset, they're absolute moments. The shopper's own time zone doesn't matter: everyone switches at the same instant.

5. Install it

1. Duplicate your theme. In Online Store → Themes, duplicate your live theme and click Customize on the copy.
2. Add a Custom Liquid section. Under Header in the sidebar, click Add section → Custom Liquid, and drag it above or below Dawn's announcement bar.
3. Paste and edit the schedule. Paste the code and replace the three example lines between capture schedule and endcapture with your own. Click Save.
4. Hide the old bar if you like. If you only want scheduled messages, hide Dawn's Announcement bar section with the eye icon. Its messages stay saved.

6. Test it without waiting for Black Friday

• Add a test line that started an hour ago and ends in ten minutes. Save: it shows.
• Add a second line that starts when the first ends. Keep the preview open: within 30 seconds of the switch, the second replaces the first without a reload.
• Make every line end in the past: the bar disappears completely, with no empty strip (the is-idle class hides it).
• Remove one | from a line that has no link, so it has only two parts: that line is skipped and the others still work.
• Delete the test lines before you publish.

Gotchas

• Messages are escaped. HTML in a message shows as text, so a stray < can't break your header. Use the fourth part for a link.
• Upcoming messages are in the HTML, just hidden. That's normal for a header announcement, but don't schedule anything you wouldn't want public yet.
• Tidy up old lines now and then. There's no practical limit, but every line that hasn't ended is sent to the browser.
• Other themes: the section doesn't depend on Dawn's JavaScript, so it works in any Online Store 2.0 theme with a Custom Liquid section in the header group. Add background and color to the .sched-bar rule to match your colours.

The original guide, with an FAQ and related guides, is here: Schedule your Shopify announcement bar with start and end dates

Note: The snippets below pass Theme Check inside Dawn 16 and automated tests against mocked Shopify data, but they haven't been run on a live store. Try them on a duplicate theme first.

What the bar does

A free-shipping bar shows shoppers how close they are to free shipping: "You're £12.00 away from free shipping", with a progress bar underneath. Once they cross the threshold it switches to "You've unlocked free shipping!".

Rendering that message in Liquid is easy. The hard part is keeping it correct after the shopper changes the cart without reloading the page, which is exactly what Dawn's cart drawer does. This tutorial covers:

• Picking a threshold that matches your shipping settings
• How Dawn actually updates its cart UI (from Dawn's source code)
• Option A: a zero-JavaScript bar inside Dawn's cart drawer
• Option B: a standalone section that updates anywhere on the page
• Currency formatting, Shopify Markets, and common gotchas

1. Pick the threshold

Go to Settings → Shipping and delivery and note the order value where free shipping starts, for example £50. The bar must match that exactly, otherwise it promises something your checkout won't honour.

How the bar reads the cart total

Liquid stores money as integers in the smallest currency unit. cart.total_price for £50.00 is 5000. Keep the threshold in the same unit and you'll never fight floating-point rounding. The bar then works out:

• remaining = threshold minus cart.total_price
• percent = cart.total_price × 100 ÷ threshold, capped at 100

2. How Dawn updates the cart

Reading Dawn 16.0.0's assets shows two mechanisms that matter.

Bundled section rendering. When you add to cart (product-form.js) or change a quantity (cart.js), Dawn posts to /cart/add or /cart/change with a sections parameter. Shopify returns freshly rendered HTML for those sections in the same response. The cart drawer asks for the cart-drawer section and swaps in its .drawer__inner (or #CartDrawer after an add). The cart page asks for main-cart-items and main-cart-footer.

A tiny pub/sub. After each change, Dawn calls:

publish(PUB_SUB_EVENTS.cartUpdate, { source: 'product-form', cartData: response /* … */ });

publish, subscribe and PUB_SUB_EVENTS (cartUpdate: 'cart-update') are globals from assets/pubsub.js and assets/constants.js. subscribe() returns an unsubscribe function.

Dawn 16 also ships assets/standard-actions-override.js. When a cart change comes through Shopify's Standard Actions (Shopify.actions.updateCart), that file refreshes Dawn's cart sections and then publishes the same cart-update event, so subscribing to cart-update covers that route too.

Watch out: Dawn does not dispatch a cart:updated DOM event. Searching Dawn's assets for cart:updated finds nothing. Some other themes and apps use that name, so it's worth listening for as a bonus, but on Dawn you have to use subscribe().

That gives two clean ways to build the bar.

3. Option A: inside the cart drawer, zero JavaScript

Dawn already re-renders the whole .drawer__inner after every cart change. Put the bar inside it and Dawn keeps it up to date for you.

Step 1. In Online Store → Themes → … → Edit code, add a new snippet called free-shipping-bar.liquid:

{%- comment -%}
  Usage: {% render 'free-shipping-bar', threshold: 5000 %}
  threshold is in pence/cents (£50.00 = 5000), in your store currency.
{%- endcomment -%}
{%- liquid
  assign total = cart.total_price
  assign remaining = threshold | minus: total
  assign percent = 100
  if threshold > 0
    assign percent = total | times: 100 | divided_by: threshold | at_most: 100
  endif
-%}
<div class="free-ship-bar">
  <p class="free-ship-bar__msg">
    {%- if remaining > 0 -%}
      You're {{ remaining | money }} away from free shipping
    {%- else -%}
      You've unlocked free shipping!
    {%- endif -%}
  </p>
  <progress class="free-ship-bar__progress" value="{{ percent }}" max="100">{{ percent }}%</progress>
</div>
<style>
  .free-ship-bar { padding: 0 1.5rem 1rem; text-align: center; }
  .free-ship-bar__msg { margin: 0 0 .5rem; font-size: 1.4rem; }
  .free-ship-bar__progress { width: 100%; height: .8rem; }
</style>

Step 2. Open snippets/cart-drawer.liquid. Find the closing </div> of <div class="drawer__header">, just before <cart-drawer-items, and add:

{%- if cart != empty -%}
  {%- render 'free-shipping-bar', threshold: 5000 -%}
{%- endif -%}

The threshold is set here, in the threshold: 5000 parameter (in pence/cents). cart is a global object, so it's available inside the rendered snippet; only threshold has to be passed in.

That's it. Add a product and the drawer opens with the bar already filled. Change a quantity in the drawer and Dawn re-renders .drawer__inner, bar included. The same trick works on the cart page if you render the snippet inside the .js-contents element of sections/main-cart-footer.liquid, because Dawn re-renders that too.

Trade-offs: you've edited a theme file, so you'll need to redo it when you update Dawn. The threshold lives in code, and the bar only exists inside the drawer.

4. Option B: a standalone section that updates anywhere

If you want the bar in the header group (so it shows on every page), or you don't want to touch Dawn's files, make it a section. It renders itself with Liquid on page load. When the cart changes, the script asks Shopify to re-render just this section through the Section Rendering API (?section_id=) and copies the new text and width into the page.

Why re-render the section rather than fetch /cart.js and rebuild the message in JavaScript?

• The message stays in one place (the Liquid), so it can't drift between server and client.
• Shopify's money filter does the currency formatting, so you don't need a JavaScript money formatter.
• Dawn itself uses the same pattern, so you're working with the theme rather than against it.

Create sections/free-shipping-bar.liquid:

{%- liquid
  # Threshold is entered in pounds/dollars; Liquid money values are in pence/cents.
  assign threshold = section.settings.threshold | times: 100 | round
  assign total = cart.total_price
  assign remaining = threshold | minus: total
  assign percent = 100
  if threshold > 0
    assign percent = total | times: 100 | divided_by: threshold | at_most: 100
  endif
  # Format the amount first, then drop it into the sentence.
  assign remaining_money = remaining | money
-%}
<div class="fsb" data-fsb>
  <p class="fsb__msg" id="FsbMsg-{{ section.id }}" data-fsb-msg aria-live="polite">
    {%- if remaining > 0 -%}
      {{ section.settings.msg_progress | replace: '[amount]', remaining_money }}
    {%- else -%}
      {{ section.settings.msg_done }}
    {%- endif -%}
  </p>
  <div
    class="fsb__track"
    role="progressbar"
    aria-labelledby="FsbMsg-{{ section.id }}"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="{{ percent }}"
    data-fsb-track
  >
    <div class="fsb__fill" data-fsb-fill style="width: {{ percent }}%"></div>
  </div>
</div>

<style>
  #shopify-section-{{ section.id }} .fsb { padding: 12px 16px; text-align: center; }
  #shopify-section-{{ section.id }} .fsb__msg { margin: 0 0 8px; font-size: 14px; }
  #shopify-section-{{ section.id }} .fsb__track {
    max-width: 480px; height: 8px; margin: 0 auto;
    background: rgba(0, 0, 0, .1); border-radius: 4px; overflow: hidden;
  }
  /* display: block matters: Dawn's base.css hides empty divs (div:empty { display: none }). */
  #shopify-section-{{ section.id }} .fsb__fill {
    display: block; height: 100%; background: #2e7d32; transition: width .4s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    #shopify-section-{{ section.id }} .fsb__fill { transition: none; }
  }
</style>

<script>
  (function () {
    var sectionId = {{ section.id | json }};
    var timer = null;
    var latest = 0;
    var unsubscribe = null;

    // Ask Shopify to re-render just this section (Section Rendering API),
    // then copy the new text and width into the live DOM.
    function update() {
      var requestId = ++latest;
      var url = window.location.pathname + '?section_id=' + encodeURIComponent(sectionId);
      fetch(url, { headers: { Accept: 'text/html' } })
        .then(function (res) {
          if (!res.ok) throw new Error('Section render failed: ' + res.status);
          return res.text();
        })
        .then(function (html) {
          if (requestId !== latest) return; // a newer refresh is already on its way
          var fresh = new DOMParser()
            .parseFromString(html, 'text/html')
            .getElementById('shopify-section-' + sectionId);
          var current = document.getElementById('shopify-section-' + sectionId);
          if (!fresh || !current) return;

          var msg = current.querySelector('[data-fsb-msg]');
          var text = fresh.querySelector('[data-fsb-msg]').textContent;
          if (msg.textContent !== text) msg.textContent = text; // only announce real changes

          current.querySelector('[data-fsb-fill]').style.width =
            fresh.querySelector('[data-fsb-fill]').style.width;
          current.querySelector('[data-fsb-track]').setAttribute(
            'aria-valuenow',
            fresh.querySelector('[data-fsb-track]').getAttribute('aria-valuenow')
          );
        })
        .catch(function () {
          /* keep the last good value on screen */
        });
    }

    // Several cart events can arrive together; refresh once.
    function refresh() {
      clearTimeout(timer);
      timer = setTimeout(update, 50);
    }

    // Dawn: constants.js and pubsub.js load with `defer`, so they exist by DOMContentLoaded.
    function listenToDawn() {
      if (typeof subscribe === 'function' && typeof PUB_SUB_EVENTS !== 'undefined') {
        unsubscribe = subscribe(PUB_SUB_EVENTS.cartUpdate, refresh);
      }
    }
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', listenToDawn);
    } else {
      listenToDawn(); // theme editor re-render: the page is already loaded
    }

    // Other themes and apps: many dispatch a `cart:updated` DOM event. Dawn doesn't.
    document.addEventListener('cart:updated', refresh);

    // Back/forward cache: the cart may have changed on another page.
    window.addEventListener('pageshow', function (e) {
      if (e.persisted) refresh();
    });

    // Theme editor: clean up when this section is removed or re-rendered.
    document.addEventListener('shopify:section:unload', function onUnload(e) {
      if (!e.detail || e.detail.sectionId !== sectionId) return;
      if (unsubscribe) unsubscribe();
      clearTimeout(timer);
      document.removeEventListener('cart:updated', refresh);
      document.removeEventListener('shopify:section:unload', onUnload);
    });
  })();
</script>

{% schema %}
{
  "name": "Free shipping bar",
  "tag": "section",
  "class": "section-free-shipping-bar",
  "settings": [
    {
      "type": "number",
      "id": "threshold",
      "label": "Free shipping threshold (store currency)",
      "info": "Must match Settings > Shipping and delivery",
      "default": 50
    },
    {
      "type": "text",
      "id": "msg_progress",
      "label": "Message below the threshold",
      "info": "[amount] is replaced with the amount left",
      "default": "You're [amount] away from free shipping"
    },
    {
      "type": "text",
      "id": "msg_done",
      "label": "Message once reached",
      "default": "You've unlocked free shipping!"
    }
  ],
  "presets": [{ "name": "Free shipping bar" }]
}
{% endschema %}

Install steps

1. Save the file above as sections/free-shipping-bar.liquid.
2. Go to Customize, click Add section in the header (or on the cart template), and pick Free shipping bar.
3. Set the threshold (entered in pounds/dollars of your store currency, e.g. 50; the section converts it to pence/cents) and edit the messages if you like. [amount] is replaced with the amount left.
4. Save.

What each part of the script does

• window.location.pathname + '?section_id=…': the Section Rendering API returns the section's HTML wrapped in <div id="shopify-section-{id}">. Requesting it on the current path keeps the right Liquid context and language/market prefix, which is also what Dawn does (it sends sections_url: window.location.pathname). Sections in JSON templates or section groups have dynamic IDs such as sections--1234__free_shipping_bar; section.id gives you the right one.
• subscribe(PUB_SUB_EVENTS.cartUpdate, refresh): Dawn's own cart event. Dawn loads constants.js and pubsub.js with defer, and the inline script runs before deferred scripts. Call subscribe straight away and you'll get subscribe is not defined. Deferred scripts run before DOMContentLoaded, so the script waits for that.
• cart:updated: a bonus for other themes and apps that dispatch it. Harmless on Dawn.
• Debounce + latest counter: several events can fire for one change, and responses can come back out of order. The bar refreshes once and ignores stale responses.
• Copy text and width instead of swapping innerHTML: the message is an aria-live="polite" region. Replacing the element would stop screen readers announcing the change reliably, so only its text is updated, and only when it actually changed.
• shopify:section:unload: the theme editor re-runs a section's script every time you change a setting. Without cleanup, every edit adds another subscriber and one cart change sets off several requests.

5. Currency formatting and Shopify Markets

On the server, money formats the amount using your store's money format and the shopper's presentment currency. One subtle bug to avoid: apply money to the number before it goes into the sentence.

{%- comment -%} Wrong: money is applied to the whole sentence {%- endcomment -%}
{{ section.settings.msg_progress | replace: '[amount]', remaining | money }}

{%- comment -%} Right: format first, then substitute {%- endcomment -%}
{%- assign remaining_money = remaining | money -%}
{{ section.settings.msg_progress | replace: '[amount]', remaining_money }}

Liquid filters run left to right, so in the first version money receives the output of replace, which is the whole sentence.

Store money formats can contain HTML entities, for example £{{amount}}. Option B reads the fresh message with textContent from the parsed response, so the browser decodes the entity and shoppers see £, not £.

If you go the /cart.js route instead, note that Dawn doesn't include the old Shopify.formatMoney helper; code that calls it will throw. A dependency-free fallback:

function formatMoney(cents, currency) {
  return new Intl.NumberFormat(document.documentElement.lang || undefined, {
    style: 'currency',
    currency: currency
  }).format(cents / 100);
}

fetch(window.Shopify.routes.root + 'cart.js')
  .then(function (res) { return res.json(); })
  .then(function (cart) {
    console.log(formatMoney(Math.max(0, 5000 - cart.total_price), cart.currency));
  });

Intl won't always match your store's own money format exactly (decimals, symbol placement, a trailing "GBP"), which is another reason Option B lets Liquid do the formatting.

Multi-currency / Shopify Markets caveat: cart.total_price is in the shopper's currency, but your threshold is in your store currency. If you sell in several currencies, either set the threshold per market or convert it in JavaScript with Shopify.currency.rate. Also check that each market's free-shipping rate in Shipping settings matches what the bar promises.

6. Gotchas

• Dawn hides empty divs. Dawn's base.css has div:empty { display: none }. A progress fill <div> with no children counts as empty, so you'd see a grey track and no fill, even at 100%. The display: block on .fsb__fill fixes it. (Option A uses <progress>, which isn't affected.)
• Decimal thresholds. 49.99 | times: 100 isn't guaranteed to be exactly 4999, so | round it.
• Integer division. divided_by with an integer divisor rounds down in Liquid. That's what we want for a percentage, and it's why we multiply by 100 first.
• Cap the percentage. Use | at_most: 100, or a £120 cart shows a 240% bar.
• Carts changed by other code. If an app changes the cart without going through Dawn's product form or cart code, Dawn's pub/sub won't fire. If the app dispatches cart:updated, Option B still catches it; if not, the bar corrects itself on the next page load.

Testing checklist

On a duplicate of your theme, with the cart drawer turned on (Theme settings → Cart → Cart type: Drawer):

• Empty cart: "£50.00 away", 0% fill.
• Add a product from the product page: the bar updates without a reload.
• Change a quantity in the drawer, then remove an item: the bar updates each time.
• Cross the threshold: "unlocked", 100% fill.
• Change a setting in the theme editor several times, then add to cart: one request in the Network tab, not several.
• Open DevTools: no console errors.

Option A or Option B?

Use Option A if you only want the bar inside Dawn's cart drawer and don't mind editing a theme file. Use Option B if you want it in the header group or on any template, with the threshold and messages in the theme editor, and without touching Dawn's own files. Option A is Dawn-specific; Option B also listens for the cart:updated event some other themes and apps dispatch.

If you'd rather not copy-paste, the same section is a free download here: https://payhip.com/b/tq5fT?utm_source=hashnode&utm_medium=referral&utm_campaign=shopsections-launch-20261021&utm_content=free-shipping-bar