#2231 Countdown banner for Shopping worlds
In this tutorial you will learn how to integrate the sales-promoting ThemeWare® Countdown Banner into your shopping world.
Requirements:
- Shopware: Version 5.7
- ThemeWare®: Version 2.4.4
1) Updating Shopware and ThemeWare®
Update Shopware and ThemeWare® to the latest version
2) Optional: Background image
Create a background iamge for your countdown banner. You can use the following image as a basis for your individual background image:
3) Optional: Upload background image
Upload your background image via Shopware's Media Manager. You will receive the link to the image when you click on "Link to media".
4) Edit Shopping world
Open the shopping world (1) of your home page
5) Add a Code element
Add the default element "Code element" (2) to your Shopping world
6) Create a timestamp
Create a 10-digit Unix timestamp with the end of the sale (here: https://www.unixtimestamp.com).
7) Edit the Code element
Open the settings of the "Code element" (3)
8) Insert JavaScript code
Insert the following JavaScript code into the code element and replace the example timestamp with the timestamp you generated:
countdown(1696068000);
9) Insert HTML code
Insert the following HTML code:
<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">
up to 75% discount
</p>
</div>
<!-- Expired -->
<div class="tw-countdown-banner-text text" id="textExpired" style="display: none;">
<p class="tw-countdown-banner-headline headline">
Our sale has ended
</p>
<p class="tw-countdown-banner-paragraph paragraph">
Subscribe to our newsletter to be informed about new offers and products.
</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">Days</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">Hours</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">Minutes</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">Seconds</div>
</div>
</div>
<!-- SALE -->
<div class="tw-countdown-banner-action" id="action" style="display: block;">
<a href="#" title="SHOW OFFERS" class="tw-countdown-banner-button btn btn is--primary">
SHOW OFFERS
</a>
</div>
<!-- Expired -->
<div class="tw-countdown-banner-action" id="actionExpired" style="display: none;">
<a href="#" title="SUBSCRIBE NOW" class="tw-countdown-banner-button btn btn is--primary">
SUBSCRIBE NOW
</a>
</div>
</div>
</div>
</div>10) Customise HTML code
Now adapt the content to your needs.
Edit background image
In line 2 you have the option to add your background image you uploaded under 3). You will find the link to the picture in the Meiden Manger under "Link to media".
Texte bearbeiten
In lines 11, 17, 26 and 32 you will find the text for the countdown banner. Lines 11 and 17 are displayed during the sale. Lines 26 and 32 are displayed after the sale.
Edit buttons
In lines 63 and 71 you can edit the buttons for the countdown banner. Line 63 is the text for the button during the sale. Line 72 is the text for the button after the sale.
11) Save shopping world
Finally, save your shopping world and recompile ThemeWare® once.
Done
If you have done everything correctly, a countdown will now appear in your shopping world.
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.