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 this installed for you?

I'll add this to your Shopify store, test it, and make sure it's working perfectly. Done within 24 hours.

Install for Me — $29

✓ Installed & tested ✓ Within 24 hours ✓ Any OS 2.0 theme

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 this installed for you?

FAQ

Related Snippets