Ein BFCM Countdown-Banner ohne App erstellen

Wichtigste Takeaways

• Du brauchst keine App für ein Countdown-Banner. Ein Timer ist nur eine einzige Section-Datei: etwas Liquid, ein bisschen CSS und ein kleines Inline-Skript. Apps berechnen dafür monatliche Gebühren und laden auf jeder Seite ihr eigenes Skript.
• Die Announcement-Bar von Dawn hat keinen Countdown. Sie unterstützt bis zu 12 rotierende Text-Ankündigungen, Social Icons und Sprachauswahl, aber nichts Zeitbasiertes. Eine Custom-Section ist hier also der App-freie Weg.¹
• Das Zeitzonen-Problem ist real. Ein Datums-String ohne UTC-Offset wird in der lokalen Zeitzone jedes Besuchers geparst, dein Sale “endet” also in jedem Land zu einem anderen Zeitpunkt. Fixiere die Deadline mit einem expliziten Offset.
• Ein Banner ist prädestiniert für CLS-Probleme. Reserviere seine Höhe im CSS und gib den Ziffern Boxen mit fester Breite, sonst drückt der Timer nach dem Laden deine ganze Seite nach unten.

Ein Shopify Countdown-Banner ohne App ist eine einzige Section-Datei, die du in dein Theme einfügst: eine Nachricht, vier tickende Zahlen und eine Deadline, die über den Theme-Editor eingestellt wird. Dieser Guide gibt dir die komplette Section und geht dann auf die drei Details ein, die die meisten Copy-Paste-Snippets falsch machen: Zeitzonen, Layout Shifts und Screenreader.

Er wurde für BFCM geschrieben, weil die meisten Shops dann nach einem Timer greifen, aber die Section funktioniert für jeden Sale mit einem echten Enddatum.

Warum du uns vertrauen kannst

Wir sind seit über vier Jahren im Shopify-Bereich tätig und haben mit hunderten Shopify-Brands an ihren Storefronts gearbeitet. Jacques hat über 15 Jahre Entwicklungs-Erfahrung. Wir bauen Fudge, den KI-Operator für Shopify-Stores, mit einer 4.9-Bewertung im Shopify App Store und „Built for Shopify“-Status. Theme-Sections wie diese hier zu schreiben, ist also buchstäblich das, was unser Produkt den ganzen Tag macht.

Warum ein Countdown-Banner für BFCM funktioniert

Eine Deadline beantwortet die eine Frage, die sich jeder BFCM-Käufer im Stillen stellt: Kann ich mir das später noch überlegen? Wenn die ehrliche Antwort “Nein” lautet, sagt ein sichtbarer Timer das besser als jedes Adjektiv. Das ist Loss Aversion (Verlustaversion), die hier für dich verkauft.

Das Schlüsselwort lautet ehrlich. Lass den Countdown bis zu einer echten Endzeit laufen und beende den Sale, wenn er bei Null ankommt. Evergreen-Timer, die sich beim Neuladen stillschweigend zurücksetzen, trainieren wiederkehrende Besucher darauf, Dringlichkeit zu ignorieren, und bringen dich in immer mehr Ländern auf die falsche Seite der Dark-Pattern-Gesetze.

Ein Banner ist zudem der günstigste Ort, um Dringlichkeit (Urgency) zu erzeugen. Es sitzt auf jeder Seite über dem Header, erfordert kein Redesign von irgendetwas und verschwindet in dem Moment, in dem der Sale endet.

Ein Timer hilft natürlich nur, wenn es sich lohnt, sich zu beeilen. Kläre also zuerst das Angebot – Black Friday Sale-Ideen für Shopify-Stores behandelt die Mechanismen und was jede Idee an Marge kostet. Das Banner kommt dann auf eine Homepage, die dafür vorbereitet wurde: Siehe Was du auf deiner Black Friday Homepage ändern solltest.

Wenn du den Rest deiner BFCM-Vorbereitungen triffst, kümmere dich auch um die Messung: Unser Partner-Guide zu Server-Side Meta Tracking mit der Conversions API zeigt dir, wie du sicherstellst, dass der Traffic, den dein Banner konvertiert, auch tatsächlich richtig zugeordnet wird.

Brauchst du wirklich eine Countdown-Timer App?

Nein, und für ein so kleines Banner lohnt sich der Tausch gegen eine App auf keiner Ebene.

Apps kosten Geld für etwas, das ein Theme nativ kann. Countdown-Banner-Apps verlangen Abos für das, was im Grunde nur eine Section-Datei ist. Das ist bei komplexen Funktionen okay; ein Timer ist aber keine komplexe Funktion.

Apps kosten Speed auf jeder Seite, das ganze Jahr über. App-Embeds schleusen ihr eigenes JavaScript und CSS in deine Storefront ein, und die meisten bleiben auch nach dem Ende des Sales geladen (oder sogar nach der Deinstallation, wenn die App dein Theme bearbeitet hat). Während BFCM, wenn jeder Besucher zählt, ist das zusätzliche Gewicht von Drittanbieter-Skripten das Letzte, was deine trafficstärkste Woche braucht.

Eine native Section besteht dagegen aus nur wenigen Kilobyte, die vom Shopify-CDN mit deinem Theme ausgeliefert, im gleichen Theme-Editor wie alles andere bearbeitet und mit einem Klick gelöscht werden, wenn der Dezember kommt.

Was kann der Theme-Editor ganz ohne Code?

Es lohnt sich, das vor dem Bauen zu checken, denn die Antwort darauf hat sich 2025-2026 geändert.

Dawn und die meisten kostenlosen Themes: kein Countdown. Die Announcement-Bar-Section von Dawn unterstützt bis zu 12 rotierende Ankündigungs-Blöcke mit Links, Auto-Rotate, Social Icons, einer Trennlinie sowie Länder- und Sprachauswahl. Es gibt nirgends im Schema eine zeitbasierte Einstellung.¹ Eine statische “Sale endet am Montag”-Nachricht ist hier das höchste der Gefühle.

Horizon und KI-generierte Blöcke: ja, irgendwie schon. Shopifys Theme-Editor kann jetzt einen Custom Block aus einem Text-Prompt über Shopify Magic generieren. Du klickst auf Block hinzufügen, wählst Generieren und beschreibst den gewünschten Timer. Das funktioniert bei Theme Store-Themes in den meisten Tarifen, allerdings mit einem Haken, den man zweimal lesen sollte: Der Shopify-Support hilft nicht beim Anpassen oder Troubleshooten des generierten Codes, und die Qualität liegt ausdrücklich in deiner Verantwortung.²

Wegen dieses Hakens ist eine handgeprüfte Section für BFCM immer noch der bessere Weg. Du bekommst Code, den du gelesen hast, mit genau den Einstellungen, die du willst, und erlebst um 23 Uhr an Thanksgiving keine bösen Überraschungen. Wenn du noch nie eine Section hinzugefügt hast, überfliege zuerst Wie man Homepage-Sections in Shopify hinzufügt; die Mechanik ist absolut identisch.

Bau es nach: Die komplette Countdown-Banner-Section

Dupliziere zuerst dein Theme (Onlineshop → Themes → ⋯ → Duplizieren). Öffne dann ⋯ → Code bearbeiten bei der Kopie, erstelle eine neue Datei unter sections/ namens countdown-banner.liquid und füge dort alles unten Stehende ein.

<div
  id="CountdownBanner-{{ section.id }}"
  class="countdown-banner"
  data-end="{{ section.settings.end_date | escape }}T{{ section.settings.end_time | escape }}:00{{ section.settings.utc_offset | escape }}"
  data-expiry="{{ section.settings.expiry_behavior | escape }}"
  style="background: {{ section.settings.bg_color }}; color: {{ section.settings.text_color }};"
>
  <div class="countdown-banner__inner">
    <p class="countdown-banner__message">
      {%- if section.settings.link != blank -%}
        <a href="{{ section.settings.link }}">{{ section.settings.message | escape }}</a>
      {%- else -%}
        {{ section.settings.message | escape }}
      {%- endif -%}
    </p>

    <div class="countdown-banner__timer" role="timer" aria-live="off">
      <span class="countdown-banner__sr-only">
        Angebot endet am {{ section.settings.end_date }} um {{ section.settings.end_time }}
      </span>
      <span class="countdown-banner__unit" aria-hidden="true">
        <span class="countdown-banner__digits" data-unit="days">–</span>
        <small>Tage</small>
      </span>
      <span class="countdown-banner__unit" aria-hidden="true">
        <span class="countdown-banner__digits" data-unit="hours">–</span>
        <small>Std</small>
      </span>
      <span class="countdown-banner__unit" aria-hidden="true">
        <span class="countdown-banner__digits" data-unit="minutes">–</span>
        <small>Min</small>
      </span>
      <span class="countdown-banner__unit" aria-hidden="true">
        <span class="countdown-banner__digits" data-unit="seconds">–</span>
        <small>Sek</small>
      </span>
    </div>

    <p class="countdown-banner__expired" hidden>
      {{ section.settings.expired_message | escape }}
    </p>
  </div>
</div>

{% style %}
  #CountdownBanner-{{ section.id }} {
    min-height: 3.25rem; /* Platz reservieren: kein Layout Shift, wenn JS die Daten ausfüllt */
    display: flex;
    align-items: center;
  }
  #CountdownBanner-{{ section.id }} .countdown-banner__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem 1.5rem;
    text-align: center;
  }
  #CountdownBanner-{{ section.id }} .countdown-banner__message {
    margin: 0;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
  }
  #CountdownBanner-{{ section.id }} .countdown-banner__message a {
    color: inherit;
  }
  #CountdownBanner-{{ section.id }} .countdown-banner__timer {
    display: flex;
    gap: 0.75rem;
  }
  #CountdownBanner-{{ section.id }} .countdown-banner__unit {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
  }
  #CountdownBanner-{{ section.id }} .countdown-banner__digits {
    font-variant-numeric: tabular-nums; /* Alle Ziffern gleich breit: kein Ruckeln */
    min-width: 2ch;
    font-weight: 700;
    font-size: 1rem;
  }
  #CountdownBanner-{{ section.id }} .countdown-banner__unit small {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
  }
  #CountdownBanner-{{ section.id }} .countdown-banner__expired {
    margin: 0;
    width: 100%;
  }
  .countdown-banner__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  @media (prefers-reduced-motion: no-preference) {
    /* Füge hier Animationen ein, damit Nutzer mit "reduced-motion" diese nicht sehen */
  }
{% endstyle %}

<script>
  (function () {
    function initCountdown() {
      var banner = document.getElementById('CountdownBanner-{{ section.id }}');
      if (!banner || banner.dataset.initialized) return;
      banner.dataset.initialized = 'true';

      var timer = banner.querySelector('.countdown-banner__timer');
      var expired = banner.querySelector('.countdown-banner__expired');

      var end = new Date(banner.dataset.end).getTime();
      if (isNaN(end)) {
        // Falsches/fehlendes Datum: Niemals NaN anzeigen, stattdessen Fallback auf die statische Nachricht
        timer.hidden = true;
        expired.hidden = false;
        return;
      }

      var units = {};
      banner.querySelectorAll('[data-unit]').forEach(function (el) {
        units[el.dataset.unit] = el;
      });

      function pad(n) {
        return n < 10 ? '0' + n : String(n);
      }

      var tick;

      function render() {
        if (!banner.isConnected) {
          clearInterval(tick);
          return;
        }
        var diff = end - Date.now();
        if (diff <= 0) {
          clearInterval(tick);
          if (banner.dataset.expiry === 'hide') {
            banner.hidden = true;
          } else {
            timer.hidden = true;
            expired.hidden = false;
          }
          return;
        }
        var s = Math.floor(diff / 1000);
        units.days.textContent = String(Math.floor(s / 86400));
        units.hours.textContent = pad(Math.floor((s % 86400) / 3600));
        units.minutes.textContent = pad(Math.floor((s % 3600) / 60));
        units.seconds.textContent = pad(s % 60);
      }

      render();
      tick = setInterval(render, 1000);
    }

    initCountdown();

    // Theme Editor: Re-Init beim Neuladen der Section
    document.addEventListener('shopify:section:load', function (event) {
      if (event.detail && event.detail.sectionId === '{{ section.id }}') {
        initCountdown();
      }
    });
  })();
</script>

{% schema %}
{
  "name": "Countdown Banner",
  "settings": [
    {
      "type": "text",
      "id": "message",
      "label": "Nachricht",
      "default": "Black Friday: Bis zu 40% Rabatt auf alles"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Link (optional)"
    },
    {
      "type": "text",
      "id": "end_date",
      "label": "Enddatum (JJJJ-MM-TT)",
      "default": "2026-11-30"
    },
    {
      "type": "text",
      "id": "end_time",
      "label": "Endzeit, 24h (HH:MM)",
      "default": "23:59"
    },
    {
      "type": "text",
      "id": "utc_offset",
      "label": "Shop UTC-Offset",
      "default": "-05:00",
      "info": "Pinnt das Ende auf einen globalen Moment fest. Verwende den Offset der Zeitzone deines Shops, z. B. -05:00 für New York im November, +01:00 für Berlin."
    },
    {
      "type": "select",
      "id": "expiry_behavior",
      "label": "Wenn der Countdown endet",
      "options": [
        { "value": "hide", "label": "Banner verstecken" },
        { "value": "message", "label": "Ablauf-Nachricht anzeigen" }
      ],
      "default": "message"
    },
    {
      "type": "text",
      "id": "expired_message",
      "label": "Ablauf-Nachricht",
      "default": "Der Sale ist vorbei. Bis nächstes Jahr!"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Hintergrund",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#ffffff"
    }
  ],
  "presets": [{ "name": "Countdown Banner" }]
}
{% endschema %}

Speichern, den Theme-Editor öffnen und den Countdown Banner zur Section-Gruppe Header (Kopfzeile) hinzufügen, damit er auf jeder Seite über dem Header angezeigt wird. Lege Datum, Uhrzeit und Offset fest, wähle das Verhalten nach Ablauf und du bist fertig. Die gleiche Platzierung über Section-Gruppen funktioniert auch für eine Free Shipping Bar (Versandkostenfrei-Leiste), die während BFCM super zu einem Countdown passt.

Das Zeitzonen-Problem

Das ist der Bug in den meisten Copy-Paste-Timern. new Date('2026-11-30T23:59:00'), ohne Offset, wird in der lokalen Zeitzone des Besuchers geparst. Ein Käufer in Sydney würde das Ende deines Sales 19 Stunden vor einem Käufer in Los Angeles sehen, und irgendjemand macht immer einen Screenshot davon.

Diese Section vermeidet das, indem sie die Einstellung utc_offset an den Datumsstring anhängt, sodass 2026-11-30T23:59:00-05:00 überall auf der Welt exakt derselbe Moment ist. Zwei Dinge, auf die du bei der Konfiguration achten solltest:

• Verwende den Offset, den die Zeitzone deines Shops am Enddatum hat, nicht heute. New York hat Ende November -05:00 (EST), nicht die -04:00, die es im Sommer hat.
• Wenn dein Sale in eine Zeitumstellung (Sommer-/Winterzeit) fällt, überprüfe den Offset für diese spezifische Woche. Für BFCM 2026 (Black Friday ist der 27. November) wurden die Uhren in den USA und der EU bereits umgestellt, also ist der Winter-Offset der richtige.

CLS-sicher bleiben

Ein Banner, das ganz oben auf der Seite eingefügt wird, ist der klassische Auslöser für einen schlechten Cumulative Layout Shift-Wert (CLS): Alles darunter springt nach unten, wenn es auftaucht. Die Section wehrt sich auf zwei Arten dagegen.

Die Höhe wird reserviert, bevor JavaScript ausgeführt wird. Durch min-height: 3.25rem auf dem Wrapper existiert der Platz schon beim First Paint, und wenn die Ziffern geladen werden, ändert das absolut nichts am Layout. Wenn du die Schrift vergrößerst, mess einfach nach und pass die reservierte Höhe entsprechend an.

Die Ziffern wackeln nicht. font-variant-numeric: tabular-nums gibt jeder Ziffer dieselbe Breite, und min-width: 2ch bei jeder Zahlen-Box verhindert, dass der Timer “atmet”, wenn aus einer 10 eine 09 wird. Ohne das gibt es bei einigen Schriftarten jede Sekunde einen Layout-Reflow im Banner.

Ein bewusster Kompromiss: Die Option Hide on Expiry (beim Ablauf ausblenden) entfernt das Banner und verschiebt die Seite – genau einmal. Wenn dein Sale endet, während viel Traffic auf der Seite ist, bevorzuge lieber die Option mit der Ablauf-Nachricht (Expired Message), da so die Höhe erhalten bleibt. Layout Shifts haben allerdings noch weitaus mehr Fehlerquellen als nur Banner; unser Guide zum Beheben von CLS in Shopify deckt den Rest ab.

Barrierefreiheit: Ein Timer, der leise bleibt

Ein im Sekundentakt aktualisierter Ticker ist das Schlimmste, was man einem Screenreader vorsetzen kann. Deshalb ist diese Section so aufgebaut, dass sie es einmal ansagt und dann ruhig bleibt:

• Der Timer hat role="timer" mit aria-live="off", sodass Updates nie automatisch angesagt werden. Das ist das genaue Gegenteil von aria-live="polite", was in vielen Snippets reinkopiert wird und Nutzer von Screenreadern jede einzelne Sekunde unterbrechen würde.
• Die tickenden Ziffern sind aria-hidden="true". Was Assistenztechnologien stattdessen vorlesen, ist ein statischer, visuell versteckter Satz: „Angebot endet am 2026-11-30 um 23:59.“
• Die Section hat keine Animationen. Das CSS enthält eine leere prefers-reduced-motion: no-preference Media Query; falls du später einen Effekt hinzufügst, packe ihn dorthin, damit Nutzer, die reduzierte Bewegung (reduced motion) bevorzugen, keine Animationen sehen.

Bevor du veröffentlichst

Check das Banner auf dem Desktop und auf dem Smartphone, da die Nachricht und der Timer bei schmalen Bildschirmen unterschiedlich umbrechen. Setze ein Enddatum in der Vergangenheit, um zu bestätigen, dass der abgelaufene Zustand genau das macht, was du konfiguriert hast, und stell das Datum dann wieder aufs echte Enddatum zurück. Öffne die Section im Theme-Editor und ändere eine Einstellung, um zu bestätigen, dass der Timer auch nach dem Neuladen der Section reibungslos weiterläuft.

Wann stattdessen ein Page-Builder Sinn macht

Ein einzelner Banner ist kein Grund, irgendetwas zu installieren. Aber die Rechnung sieht anders aus, wenn der Countdown Teil eines größeren Kampagnen-Setups ist: Eine BFCM-Landingpage mit Timern, gestaffelten Angeboten, dynamischen Elementen über Templates hinweg und ein Marketing-Team, das stündlich iterieren will, ohne Code anzufassen. An diesem Punkt rechtfertigt ein Page Builder oder ein spezielles Kampagnen-Tool sein Abo, zumindest für den November.

Der goldene Mittelweg ist Fudge. Du beschreibst den Banner, oder die gesamte Kampagnen-Section, in ganz normalen Worten und Fudge schreibt sie als natives Liquid, CSS und JavaScript in dein Theme, inklusive aller Einstellungen, als Entwurf, den du dir vor dem Veröffentlichen in der Vorschau ansehen kannst. Du erhältst das App-freie Ergebnis, ohne es selbst coden zu müssen; die Shopify Store Editor Seite zeigt, wie das funktioniert. Im Dezember gibt es nichts zu deinstallieren, weil es von vornherein gar keine App gab. Countdown-Timer sind eine der Single-Purpose-Apps, die Fudge ersetzt durch eine kleine Section in deinem Theme, genau wie Free Shipping Bars, Größentabellen (Size Charts) und Announcement Bars.

FAQ