#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

Tip: We recommend the layout mode "Rows". In "Fluid / Responsive" and "Resize / Scaling" mode, we recommend a "Row height" of at least "280".


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".

Tip: If you do not want to use a background image, just delete line 2 and add a "greater than" sign (>) at the end of line 1.

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.

Tip: Link the button in the sale (href in line 61) to a category with the deals and the button after the sale (href in line 70) to the newsletter registration.

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.


Tip: In case of problems, please check your individual code (use our template, unedited). Clear the Shopware cache, clear your browser cache and recompile ThemeWare® once.

Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

db0667decac985e52789c51bc94693b8