# Countdown banner The **ThemeWare® "Countdown banner"** is a "Sale" banner element for your Shopping Experiences.

ThemeWare® "Countdown banner"

{% hint style="info" %} **Note**: The element is explicitly intended for use in its own CMS block. It is not designed for use in other CMS blocks and therefore cannot be exchanged or placed in other blocks. {% endhint %} {% hint style="warning" %} **Important**: This element is only available in the ThemeWare® Pro Edition. {% endhint %} The "Countdown banner" has two phases: 1. Pre-sale phase 2. Sale phase #### 1. Pre-sale phase The pre-sale phase is a countdown to the start of the final sale. This offers the opportunity to promote an upcoming sale. {% hint style="success" %} **Tip**: Link the button to your newsletter subscription page or to the scroll anchor `#newsletterSubscription` of the ThemeWare® Newsletter footer widget. {% endhint %} #### 2. Sale phase Die Sale-Phase ist ein Countdown bis zum Ende des entsprechenden Sales. {% hint style="success" %} **Tip**: Link the button to a sale category or landing page. {% endhint %} #### Sale finished After both phases, the block is hidden by CSS. Then remove it from the corresponding Shopping Experience at the next possible moment. *** ## Configure element You can configure the ThemeWare® "Countdown banner" as follows: 1. Click on the corresponding CMS block (1) to activate the "edit mode" 2. Hover the mouse over the desired CMS element 3. Click on the ![](/files/DbqYtMQUPw13wmi62Oiq) "gear" icon (2) to configure the CMS element 4. The "Element Settings" pop-up will open 5. Make the desired changes 6. Save your changes You have now configured the CMS element.

Configuring the ThemeWare® "Countdown banner"

*** ## Configuration The configuration of the "Countdown Banner" is quite self-explanatory. The **date of the sale** ("Sale from" and "Sale until"), **the titles** (of the pre-run and sale phase), the **image** and the "**Minimum height**" are mandatory fields. That's all you really need to configure. ### General In the tab "General" you configure the content of the element. > **Sale** > > In the "Sale" section you set the date of the sale ("Sale from" and "Sale until"). Select a date for the pre-sale phase and a date for the sale phase so that the countdown can be calculated for both phases. > > **Text** > > In the section "Text" you can enter texts for the pre-sale phase. The title is a mandatory field. > > **Text (Sale)** > > In the section "Text (Sale)" you can enter texts for the pre-sale phase. The title is a mandatory field. > > **Image** > > In the section "Image" you define the background image of the banner. The image and the "Minimum height" (default: `300px`) are mandatory fields. Additionally, you can configure the **scroll behaviour** (attachment) of the image (scroll/fixed). > > **Link** > > In the "Link" section you determine the target of the button of the pre-sale phase. We recommend linking the newsletter registration (see above). > > **Link (Sale)** > > In the "Link (Sale)" section you determine the target of the button for the sale phase. We recommend linking to an appropriate category (see above). ### Layout In the tab "Layout" you have various design options for the **text**, the **buttons** and a **coloured overlay**. > **General** > > In the section "General" you can configure the **background colour** as well as the **horizontal alignment** and **vertical alignment** of the content. > > **Text** > > In the section "Text" you can configure the **font** and **text colour** for the text, the title and the subtitle. > > **Button** > > In the section "Button" you can configure the **button style** (the colour) and determine whether the button should be filled or displayed as an outline button. > > **Coloured overlay** > > In the section "Coloured overlay" a **coloured overlay** can be activated and configured. ### Counter In the tab "Counter" you can configure the counter. > **Layout** > > In the section "Layout" you can select the desired **layout type** (see [#layout-types](#layout-types "mention")). > > **Numbers** > > In the section "Numbers" you can configure the **font**, **text colour** and **background colour** of the counter numbers. For the layout type "Counters with coloured background", individual background colours for **days**, **hours**, **minutes** and **seconds** can be configured. > > **Labels** > > In the section "Labels" you can configure the **font** and **text colour** of the labels (text below the numbers) of the counter. ### SEO & Pagespeed In the tab "SEO & Pagespeed" you can configure the HTML tag for the title. ### Advanced You can select any HTML element of our banners using appropriate CSS classes. If you would like to use your own CSS classes, you can add them in the tab "Advanced". *** ## Layout types There are currently three different layout types (see screenshots below) available for the counter: * Clean countdown * Numbers with coloured background * Counters with coloured background ### Screenshots

Clean countdown

Numbers with coloured background

Counters with coloured background

*** ## Image (Background image) As you can see from the preview graphic of the "Countdown banner", it makes sense to leave some "space" for the text in order to make it easier to read. {% hint style="success" %} **Tip**: To help you to create the perfect background image, you will find **PSD templates for CMS elements** in the [ThemeWare® Utilities](https://service.themeware.design/en/themeware-utilities). {% endhint %} *** ## FAQ ### How does the countdown measure time? Our countdown is based on an absolute, globally standardized time measurement. This means that the remaining time is the same for all users worldwide, regardless of their respective time zone. * The countdown uses a **fixed end time** that was configured in a specific time zone (e.g. `Europe/Berlin`). * Internally, this time is stored as a **Unix timestamp (milliseconds since 1970)**. * When the page loads, the system calculates the **remaining time** by subtracting the current time from the end time. * The current time is **measured in UTC** to ensure **global consistency**. **This means that** the remaining time is calculated the same for all users – whether they are in Berlin, New York or Tokyo. ### Why might your time be displayed differently? 1. **Your local time zone setting is incorrect** * The countdown shows the remaining time based on the correct local system time. * If your device is using the wrong time zone, this can affect the display. 2. **Your device has a manually adjusted time** * If the time on your computer or smartphone is not synchronized with real time, the countdown may show an incorrect remaining time. * Check whether your device is automatically synchronizing the time via the internet. 3. **Your time zone has changed due to daylight saving time** * If you are in a region that has just activated daylight saving time, but your system has not adopted this correctly, there may be a difference. *** ## Snippets * twt.cms.countdownBanner.days * twt.cms.countdownBanner.hours * twt.cms.countdownBanner.minutes * twt.cms.countdownBanner.seconds --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.themeware.design/additional-features/cms-extensions/cms-elements/sale/countdown-banner.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.