#2230 Countdown-Banner für Einkaufswelten

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


Voraussetzungen:

  • Shopware: ab Version 5.7
  • ThemeWare®: ab Version 2.4.4

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:


3) Optional: Grafik hochladen

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


4) Einkaufswelt bearbeiten

Öffne die Einkaufswelt (1) deiner Startseite

Tipp: Du kannst auch eine neue Einkaufswelt für den Countdown-Banner erstellen und diese zeitlich steuern und über deiner bestehenden Einkaufswelt ausgeben.

Tipp: Wir empfehlen den Layout-Modus "Zeilen". Im Modus "Fluid / Responsive" und "Resize / Skalierung" empfehlen wir eine Zeilen-Höhe von mind. "280"


5) Code Element hinzufügen

Füge das Standard-Element "Code Element" (2) deiner Einkaufswelt hinzu


6) Timestamp erstellen

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


7) Code Element bearbeiten

Öffne die Einstellungen des "Code Elements" (3)


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);



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/dev/media/image/39/81/cd/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, um von neuen Angeboten und Produkten zu erfahren.

</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="#" title="ANGEBOTE ANZEIGEN" class="tw-countdown-banner-button btn btn is--primary">

ANGEBOTE ANZEIGEN

</a>
</div>

<!-- Abgelaufen -->
<div class="tw-countdown-banner-action" id="actionExpired" style="display: none;">
<a href="#" title="JETZT ANMELDEN" class="tw-countdown-banner-button btn 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 Meidenmanger unter "Link zum Medium".

Tipp: Möchtest du kein Hintergrundbild nutzen, lösche einfach die Zeile 2 und füge am Ende von Zeile 1 ein "Größer als”-Zeichen (>) hinzu.

Texte bearbeiten

In den Zeilen 11, 17, 26 und 32 findest du die Text 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 72 ist der Text für den Button nach Ablauf des Sales.

Tipp: Verlinke den Button im Sale (href in Zeile 61) auf eine Kategorie mit den Angeboten und den Button nach dem Sale (href in Zeile 70) auf die Newsletter-Anmeldung.

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.


Tipp: Bei Problemen prüfe bitte deinen individuellen Code (nutze einmal unsere Vorlage, unbearbeitet). leeren den gesamten Shopware-Cache, leeren deinen Browser-Cache und kompiliere ThemeWare® einmal neu.

Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

9ceb44fc4f71e23db583d55458477b18