Last updated: March 2026 Category: Designing Your App
Overview
The Countdown component displays a live timer that counts down to a specific date and time. It's perfect for building urgency around flash sales, product launches, seasonal events, or limited-time offers. The timer updates in real time on the customer's screen.
How to Use
Adding a Countdown
Drag the Countdown component from the Component Palette into the Phone Preview.
Click on it to open the Inspector Panel.
[Screenshot: Countdown component in the Phone Preview showing days, hours, minutes, and seconds]
Setting the Target Date
In the Content tab:
Click the Target date field to open the date and time picker.
Select the date and time you want the countdown to reach zero.
The Phone Preview immediately shows the live countdown.
[Screenshot: Content tab with the date picker open and a target date selected]
Customizing Labels
Below each time unit, the countdown displays a label. You can customize these:
Days label — Default is "Days." Change it to match your language or style (e.g., "D," "DAYS," "Días").
Hours label — Default is "Hours."
Minutes label — Default is "Minutes."
Seconds label — Default is "Seconds."
Customizing Colors
In the Layout and Settings tabs, adjust the countdown's visual appearance:
Number color — The color of the countdown digits.
Label color — The color of the text labels beneath each number.
Background color — The background color of the entire countdown container.
Separator color — The color of the colon or divider between time units.
[Screenshot: Settings tab showing color pickers for numbers, labels, background, and separators]
Adding a Background Image
For extra visual impact, you can set a background image behind the countdown:
In the Settings tab, find the Background image option.
Click the image picker to open the Media Library.
Upload or select an image.
The countdown numbers overlay on top of the image.
Use a semi-transparent overlay or choose number colors that contrast with your background image to keep the timer readable.
Settings
Font size — Control the size of the countdown digits.
Font weight — Bold or regular digit styling.
Padding — Inner spacing around the countdown content.
Margin — Outer spacing to separate the countdown from other components.
Border radius — Round the corners of the countdown container.
Tips
Place the countdown near the top of your home screen for maximum visibility during time-sensitive promotions.
Pair it with a Button component directly below (e.g., "Shop the Sale") to convert urgency into action.
When the countdown reaches zero, consider swapping the template or updating the component — a timer showing 00:00:00:00 does not create a good impression.
Use a bold, high-contrast background image for sale events. Darker images with light-colored numbers work especially well.
Keep label text short. Single words or abbreviations display cleanly on smaller screens.
Schedule your template's start date and the countdown target date together so the timer appears at the right time.
Related Articles