Countdown banner (compact)

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

ThemeWare® "Countdown banner (compact)"

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.

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

2. Sale phase

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

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 (compact)" 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 (compact)"

Configuration

The configuration of the "Countdown banner (compact)" is quite self-explanatory and corresponds to the "Countdown banner" (see Countdown banner).

Responsive

In the tab "Responsive" you can configure the "wrapping" of the counter (see Breakpoint).


Breakpoint

Select the desired breakpoint. The content is displayed in a single row from this viewport onwards.

Single-line / row alignment
Wrapped / column alignment

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.


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

Last updated

Was this helpful?