The ThemeWare® "Sale" CMS elements are intended for use in their CMS blocks. The elements cannot therefore be exchanged or placed in other blocks.
The "Sale" banner elements can currently only be added with the corresponding CMS element. Simply add the desired block to your Shopping Experience using drag'n'drop.
You can find more information about this in the following article:
Note: You can find the "Sale" blocks in the "ThemeWare® Sale" section [Pro]
The ThemeWare® "Countdown banner" is a "Sale" banner element for your Shopping Experiences.
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:
Pre-sale phase
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.
Die Sale-Phase ist ein Countdown bis zum Ende des entsprechenden Sales.
After both phases, the block is hidden by CSS. Then remove it from the corresponding Shopping Experience at the next possible moment.
You can configure the ThemeWare® "Countdown banner" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hover the mouse over the desired CMS element
Click on the "gear" icon (2) to configure the CMS element
You have now configured the CMS element.
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.
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 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.
In the tab "Counter" you can configure the counter.
Layout
In the section "Layout" you can select the desired layout type (see ).
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 tab "SEO & Pagespeed" you can configure the HTML tag for the title.
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".
There are currently three different layout types (see screenshots below) available for the counter:
Clean countdown
Numbers with coloured background
Counters with coloured background
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.
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.
This means that the remaining time is calculated the same for all users – whether they are in Berlin, New York or Tokyo.
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.
twt.cms.countdownBanner.days
twt.cms.countdownBanner.hours
twt.cms.countdownBanner.minutes
The ThemeWare® "Hero countdown" is a "Sale" banner that consists of two elements:
Hero countdown (Heading)
This article refers to the element "Hero Countdown (Heading)". For more information on the element "Countdown banner", please see the following article:
Make the desired changes
Save your changes
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).
In the section "Coloured overlay" a coloured overlay can be activated and configured.
The current time is measured in UTC to ensure global consistency.
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.
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.
Tip: Link the button to your newsletter subscription page or to the scroll anchor #newsletterSubscription of the ThemeWare® Newsletter footer widget.
Tip: Link the button to a sale category or landing page.
Tip: To help you to create the perfect background image, you will find PSD templates for CMS elements in the ThemeWare® Utilities.
You can configure the ThemeWare® "Hero countdown (Heading)" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hover the mouse over the desired CMS element
Click on the "gear" icon (2) to configure the CMS element
The "Element Settings" pop-up will open
Make the desired changes
Save your changes
You have now configured the CMS element.
The configuration for the "Hero countdown (Heading)" is quite self-explanatory. The headline and the image are mandatory fields. That's all you really need to configure.
In the tab "General" you configure the content of the element.
Text
In the section "Text" you enter the desired heading. The heading is a mandatory field
Image
In the section "Image" you define the background image of the banner. The image is a mandatory field. Additionally, you can configure the minimum height (mandatory field) and the display mode (cover/contain).
In the tab "Layout" you have various design options for the text and a coloured overlay.
Text
In the section "Text" you can configure the font and text colour for the headline. Additionally, you can configure the maximum width of the heading.
Coloured overlay
In the section "Coloured overlay" a coloured overlay can be activated and configured.
In the tab "SEO & Pagespeed" you can configure the HTML tag for the heading as well as the "Lazy Loading" of the image.
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".
As you can see from the preview graphic of the "Hero countdown (Heading)", it makes sense to leave some "space" for the text in order to make it easier to read.
Note: The elements are explicitly intended for use in their own CMS blocks. They are 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.
Tip: To help you to create the perfect background image, you will find PSD templates for CMS elements in the .
The ThemeWare® "Countdown banner (compact)" is a "Sale" banner element for your Shopping Experiences.
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 compact "Countdown banner" has two phases:
Pre-sale phase
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.
Die Sale-Phase ist ein Countdown bis zum Ende des entsprechenden Sales.
After both phases, the block is hidden by CSS. Then remove it from the corresponding Shopping Experience at the next possible moment.
You can configure the ThemeWare® "Countdown banner (compact)" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hover the mouse over the desired CMS element
Click on the "gear" icon (2) to configure the CMS element
You have now configured the CMS element.
The configuration of the "Countdown banner (compact)" is quite self-explanatory and corresponds to the "Countdown banner" (see ).
In the tab "Layout" you can additionally configure the alignment (justifyContent) and the maximum width of the content.
In the tab "SEO & Pagespeed" you can configure the HTML tag for the title.
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".
In the tab "Responsive" you can configure the "wrapping" of the counter (see ).
Select the desired breakpoint. The content is displayed in a single row from this viewport onwards.
There are currently three different layout types (see screenshots below) available for the counter:
Clean countdown
Numbers with coloured background
Counters with coloured background
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.
twt.cms.countdownBanner.days
twt.cms.countdownBanner.hours
twt.cms.countdownBanner.minutes
The ThemeWare® "Discount Banner" is a "Sale" banner element for your Shopping Experience. You can use it to draw attention to special discounts or sales.
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
You can configure the ThemeWare® "Discount banner" as follows:
Click on the corresponding CMS block (1) to activate the "edit mode"
Hover the mouse over the desired CMS element
Click on the "gear" icon (2) to configure the CMS element
The "Element Settings" pop-up will open
Make the desired changes
Save your changes
You have now configured the CMS element.
The configuration of the "Discount banner" is quite self-explanatory. The title and the discount are mandatory fields. That's all you really need to configure.
In the tab "General" you configure the content of the element.
Text
In the section "Text" you enter the text for the banner. You can enter a title (3) and a subtitle (4). The title is a required field.
Discount
In the "Discount" section you enter the discount (1) you would like to advertise. This is a mandatory field.
Link
In the section "Link" you determine the target of the banner. We recommend linking to an appropriate sale category.
In the tab "Layout" you have various design options for the text and the discount.
General
In the section "General" you can configure the general background colour (2).
Text
In the "Text" section, the font and text colour of the title (3) and subtitle (4) can be configured.
Discount
In the section "Discount" the font, text colour and background colour of the discount (1) can be configured.
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".
Make the desired changes
Save your changes
Tip: Link the button to your newsletter subscription page or to the scroll anchor #newsletterSubscription of the ThemeWare® Newsletter footer widget.
Tip: Link the button to a sale category or landing page.
Tip: To help you to create the perfect background image, you will find PSD templates for CMS elements in the .
