Countdown banner

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

ThemeWare® "Countdown banner"

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.

Important: This element is only available in the ThemeWare® Pro Edition.

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.

Tip: Link the button to your newsletter subscription page or to the scroll anchor #newsletterSubscription of the ThemeWare® Newsletter footer widget.

2. Sale phase

Die Sale-Phase ist ein Countdown bis zum Ende des entsprechenden Sales.

Tip: Link the button to a sale category or landing page.

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

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.

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

Numbers

In the section "Numbers" you can configure the font and text colour of the counter numbers.

Labels

In the section "Labels" you can configure the font and text colour of the labels (text below the numbers) of the counter.

---

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.

Tip: To help you to create the perfect background image, you will find PSD templates for CMS elements in the ThemeWare® Utilities.

---

Snippets

• twt.cms.countdownBanner.days

• twt.cms.countdownBanner.hours

• twt.cms.countdownBanner.minutes

• twt.cms.countdownBanner.seconds

---

Demo

You can find some examples of use in our demo shops:

Demo will follow...