FreeBeginner

Announcement Bar + Countdown

Dismissible announcement bar with built-in countdown timer. Fully customizable colors, text, and target date. Remembers dismissed state via localStorage.

Category: Conversion Compatibility: All OS 2.0 Themes Updated: Feb 2026

snippets/plynthr-announcement-countdown.liquid

{% comment %}
  Plynthr — Announcement Bar + Countdown
  https://plynthr.com/snippets/announcement-bar-countdown/

  INSTALL:
  1. Create snippets/plynthr-announcement-countdown.liquid
  2. Paste this code
  3. Add {%- render 'plynthr-announcement-countdown' -%} at the top of
     your theme.liquid, just after <body>

  CUSTOMIZE:
  - --pac-bg for background color
  - --pac-color for text color
  - Set your target date in the script below
{% endcomment %}

<style>
  :root {
    --pac-bg: #1a1a1a;
    --pac-color: #ffffff;
    --pac-font-size: 14px;
    --pac-height: 44px;
    --pac-link-color: #fbbf24;
  }

  .plynthr-announcement {
    background: var(--pac-bg);
    color: var(--pac-color);
    font-size: var(--pac-font-size);
    height: var(--pac-height);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 100;
    text-align: center;
    padding: 0 40px;
  }

  .plynthr-announcement.is-hidden { display: none; }

  .plynthr-announcement a {
    color: var(--pac-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
  }

  .plynthr-announcement__countdown {
    display: inline-flex;
    gap: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .plynthr-announcement__countdown span {
    background: rgba(255,255,255,0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
  }

  .plynthr-announcement__close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--pac-color);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    padding: 4px;
    line-height: 1;
  }

  .plynthr-announcement__close:hover { opacity: 1; }
</style>

{%- assign announcement_text = "Sale ends soon!" -%}
{%- assign announcement_link = "/collections/sale" -%}
{%- assign announcement_link_text = "Shop now" -%}

<div class="plynthr-announcement" id="plynthr-announcement">
  <span>{{ announcement_text }}</span>
  <span class="plynthr-announcement__countdown" id="plynthr-countdown"></span>
  <a href="{{ announcement_link }}">{{ announcement_link_text }}</a>
  <button class="plynthr-announcement__close" aria-label="Dismiss">✕</button>
</div>

<script>
  (() => {
    const bar = document.getElementById('plynthr-announcement');
    const countdown = document.getElementById('plynthr-countdown');
    const closeBtn = bar?.querySelector('.plynthr-announcement__close');
    const STORAGE_KEY = 'plynthr_announcement_dismissed';

    /* SET YOUR TARGET DATE HERE */
    const targetDate = new Date('2026-03-31T23:59:59');

    if (!bar) return;

    /* Check dismissed state */
    if (localStorage.getItem(STORAGE_KEY) === 'true') {
      bar.classList.add('is-hidden');
      return;
    }

    closeBtn?.addEventListener('click', () => {
      bar.classList.add('is-hidden');
      localStorage.setItem(STORAGE_KEY, 'true');
    });

    function updateCountdown() {
      const now = new Date();
      const diff = targetDate - now;
      if (diff <= 0) { countdown.textContent = 'Ended'; return; }

      const d = Math.floor(diff / 86400000);
      const h = Math.floor((diff % 86400000) / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const s = Math.floor((diff % 60000) / 1000);

      countdown.innerHTML =
        (d > 0 ? '<span>' + d + 'd</span>' : '') +
        '<span>' + h + 'h</span>' +
        '<span>' + m + 'm</span>' +
        '<span>' + s + 's</span>';
    }

    updateCountdown();
    setInterval(updateCountdown, 1000);
  })();
</script>

Installation

In your Shopify admin, go to Online Store → Themes → Edit Code
Under Snippets, click "Add a new snippet"
Name it plynthr-announcement-countdown
Paste the code above and save
Open layout/theme.liquid
Add {%- render 'plynthr-announcement-countdown' -%} just after the opening <body> tag
Set your target date in the script and customize text/colors

Customization

--pac-bg — Bar background color (default: #1a1a1a)
--pac-color — Text color (default: white)
--pac-link-color — Link color (default: amber #fbbf24)
--pac-height — Bar height (default: 44px)
targetDate — Set your countdown end date in the script
announcement_text — Change the Liquid assign at the top

Want your whole store dialled in?

Snippets fix one thing at a time. Want your whole Shopify store audited and tuned — speed, SEO, conversion? Get a free audit in about 60 seconds, or work with me directly.

Run your free store audit →

✓ Speed, SEO & mobile✓ Results in ~60s✓ No signup

FAQ

How do I change the countdown date?

Find the targetDate line in the script and set it to your desired date in YYYY-MM-DDTHH:MM:SS format.

Can users dismiss it permanently?

Yes. Clicking the × button saves the dismissed state in localStorage. The bar won't reappear until the user clears their browser data. To reset for everyone, change the STORAGE_KEY value.

Will this conflict with my theme's announcement bar?

It's a separate element, so both can exist. However, for best results, disable your theme's built-in announcement bar to avoid stacking.

Announcement Bar + Countdown

Installation

Customization

Want your whole store dialled in?

FAQ

Related Snippets