Adding a Countdown Timer to your promotions creates urgency and encourages visitors to act before time runs out. Whether it's a limited-time discount, a product launch, or a special event, a countdown visually communicates the remaining time, helping customers plan accordingly. With customisation options, you can adjust colours, fonts, and positioning, and even add engaging graphics like animated clocks or rockets to make your timer stand out on your site or in email promotions.
General Settings
Element Name/Title
When you open the General Settings, you'll see the default name/title for the currently selected Edit option. You can leave it as is or update it to something more descriptive. This is particularly handy when you have multiple elements on a funnel page and need to tell them apart quickly.
Color Options
The Color Options feature lets you change how your timer looks.
- Color: Click on your preferred colour from the available options to update your timer's colour.
- Label Color: Click on a colour to update the label colour of your timer.
📌NOTE: If you can't find the exact colour you're looking for, you can add a custom colour by typing the colour code into the designated field and clicking on add color.
Float
The Float feature gives you several options for positioning your timer. You can move it to the Left, Center, or Right, or apply spacing options such as space-around, space-evenly, or space-between for better balance and readability.
Typography Type
The Typography Type feature lets you change the font for your text or content. A dropdown is available to further customise typography styles. You can use the heading or content font you've already set, or pick a different font from the dropdown.
End Date and Time
The End Date and Time feature lets you set a specific deadline for your countdown. Choose your date and time using the available options; for example, you could set the countdown to end on July 11th at 6:00 AM. Markdown formatting is also available to customise the display.
Translate
You can set your timer's language by selecting your preferred option from the available languages.
Time Zone
When setting up the countdown timer, you can choose the Time Zone for it to operate in. This ensures the timer counts down correctly for your location and reaches its end at the right time. Select your preferred Time Zone from the available options, which include popular regions and countries. The Time Zone feature supports Markdown formatting for further customisation.
Desktop and Mobile Font Size
To adjust the font size of your countdown timer across desktop and mobile, use the Desktop and Mobile Font Size feature. Drag the size bars to increase or decrease the font size as needed. This feature also supports Markdown formatting for further customisation.
Desktop and Mobile Font Weight
Use the dropdown options to customise the font weight for your timer's text on desktop and mobile.
Desktop and Mobile Sub Text Font Size
To customise the font size for the subtext of your countdown timer on desktop and mobile, use the Desktop and Mobile Subtext Font Size feature. Adjust the font size by dragging the size bars as needed. You can also use Markdown formatting to customise your subtext font style.
Desktop and Mobile Sub Text Font Weight
This feature adjusts the weight of the subtext to keep it readable and consistent with your countdown timer's overall design.
Expire Action
The Expire Action feature lets you decide what happens once your countdown timer reaches zero.
- Redirected URL: Add a Redirected URL to send users to a specific page when the timer expires. You can add the URL to create a clickable link.
- Show & Hide Element: Choose to hide or show a section, column, row, or element.
Spacing Options
A range of spacing options is available for adjusting the top or bottom margin of your content by toggling the bars. The settings apply only to the Edit option you're currently working on. For example, if you're editing a specific Row (the BLUE box), only the content within that Row will follow the settings you apply.
Advanced Settings
Visibility
The Visibility feature lets you choose whether the Edit option appears on mobile devices, desktops, or both. Click the icon that corresponds to your preference.
Custom Class
The Custom Class feature lets you enter your own unique class.
CSS Selector
The CSS Selector feature lets you copy custom CSS code by clicking the Copy icon on the right side of the reference code.
A well-placed countdown timer adds urgency to your promotions and improves conversion rates. By customising colours, fonts, positioning, and expiration actions, you can integrate them into your brand's design. Whether for flash sales, webinars, or product launches, a countdown timer ensures your audience knows exactly how much time they have to act, so they don't miss out.