Navigation

Countdown-Banner für Einkaufswelten (SW5)

In dieser Anleitung erfährst du, wie du den verkaufsfördernden ThemeWare® Countdown-Banner in deine Einkaufswelt einbauen kannst.

Voraussetzungen

1) Shopware und ThemeWare® updaten

Aktualisiere Shopware und ThemeWare® auf die neuste Version.

2) Optional: Hintergrundgrafik

Erstelle eine Hintergrundgrafik für deinen Countdown-Banner. Du kannst die folgende Grafik als Basis für deine individuelle Grafik nutzen:

Beispiel-Hintergrundgrafik für den Countdown-Banner

3) Optional: Grafik hochladen

Lade deine Grafik im Medienmanager von Shopware hoch. Den Link zur Grafik erhältst du, wenn du auf "Link zum Medium" klickst.

Shopware 5 Medienmanager: Link zum Medium

4) Einkaufswelt bearbeiten

Öffne die Einkaufswelt deiner Startseite.

Shopware 5 Backend: Einkaufswelten-Liste

Shopware 5: Einkaufswelt Layout-Einstellungen

5) Code Element hinzufügen

Füge das Standard-Element "Code Element" deiner Einkaufswelt hinzu.

Shopware 5: Code Element in Einkaufswelt hinzufügen

6) Timestamp erstellen

Erstelle einen 10-stelligen Unix-Timestamp mit dem Ende des Sales (beispielsweise unter: unixtimestamp.com).

Unix Timestamp Converter

7) Code Element bearbeiten

Öffne die Einstellungen des "Code Elements".

Shopware 5: Code Element Einstellungen öffnen

8) JavaScript Code einfügen

Füge den folgenden JavaScript Code in das Code-Element ein und tausche den Beispiel-Timestamp durch den von dir generierten Timestamp aus:

countdown(1696068000);

Shopware 5: JavaScript Code im Code Element

9) HTML Code einfügen

Füge den folgenden HTML-Code ein:

<div class="tw-countdown-banner-image-container image-container"
   style="background-image: url(https://shop.de/media/image/tw-bg-sale.jpg);">

  <div class="tw-countdown-banner-container">
    <div class="tw-countdown-banner-content content">

      <!-- SALE -->
      <div class="tw-countdown-banner-text text" id="text" style="display: block;">
        <p class="tw-countdown-banner-headline headline">Cyber Sale</p>
        <p class="tw-countdown-banner-subheadline subheadline">bis zu 75% Rabatt</p>
      </div>

      <!-- Abgelaufen -->
      <div class="tw-countdown-banner-text text" id="textExpired" style="display: none;">
        <p class="tw-countdown-banner-headline headline">Unser Sale ist abgelaufen</p>
        <p class="tw-countdown-banner-paragraph paragraph">Melde Dich zu unserem Newsletter an.</p>
      </div>

      <div class="tw-countdown-banner-counter" id="countdown">
        <div class="tw-countdown-banner-counter-item">
          <div id="days" class="tw-countdown-banner-counter-item-number">00</div>
          <div class="tw-countdown-banner-counter-item-label">Tage</div>
        </div>
        <div class="tw-countdown-banner-counter-item">
          <div id="hours" class="tw-countdown-banner-counter-item-number">00</div>
          <div class="tw-countdown-banner-counter-item-label">Stunden</div>
        </div>
        <div class="tw-countdown-banner-counter-item">
          <div id="minutes" class="tw-countdown-banner-counter-item-number">00</div>
          <div class="tw-countdown-banner-counter-item-label">Minuten</div>
        </div>
        <div class="tw-countdown-banner-counter-item">
          <div id="seconds" class="tw-countdown-banner-counter-item-number">00</div>
          <div class="tw-countdown-banner-counter-item-label">Sekunden</div>
        </div>
      </div>

      <!-- SALE -->
      <div class="tw-countdown-banner-action" id="action" style="display: block;">
        <a href="#" class="tw-countdown-banner-button btn is--primary">ANGEBOTE ANZEIGEN</a>
      </div>

      <!-- Abgelaufen -->
      <div class="tw-countdown-banner-action" id="actionExpired" style="display: none;">
        <a href="#" class="tw-countdown-banner-button btn is--primary">JETZT ANMELDEN</a>
      </div>

    </div>
  </div>
</div>

10) HTML Code anpassen

Passe nun die Inhalte an deine Bedürfnisse an.

Hintergrundbild bearbeiten

In Zeile 2 hast du die Möglichkeit, dein unter 3) hochgeladenes Bild zu hinterlegen. Den Link zum Bild erhältst du im Medienmanager unter "Link zum Medium".

Texte bearbeiten

In den Zeilen 11, 17, 26 und 32 findest du die Texte für den Countdown-Banner. Zeile 11 und 17 werden im Sale angezeigt. Zeile 26 und 32 nach Ablauf des Sales.

Buttons bearbeiten

In den Zeilen 63 und 71 kannst du die Buttons für den Countdown-Banner bearbeiten. Zeile 63 ist der Text für den Button im Sale. Zeile 71 ist der Text für den Button nach Ablauf des Sales.

11) Einkaufswelt speichern

Speichere deine Einkaufswelt abschließend und kompiliere ThemeWare® einmal neu.

Fertig

Wenn du alles richtig gemacht hast, erscheint nun ein Countdown in deiner Einkaufswelt.

Zurück zur Wissensdatenbank