#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
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".
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.
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.
Bitte teile uns deine Meinung mit!
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.
Lösung nicht gefunden?
Bitte sieh auch in den anderen Kategorien nach.
Einführung Anleitungen Handbuch Profiwissen Häufige Fragen Häufige Fehler Shopware allgemein
Fehler nicht gelöst?
Wenn du das Problem nicht mit den häufigsten Fehlern lösen konntest, starte die individuelle Fehlerbehebung. Hierüber kannst du auch ein Support-Ticket eröffnen, falls du den Fehler nicht selber beheben kannst.