Countdown timer
Learn how to set up Countdown timer to trigger the FOMO effect to boost conversions and sales.
A countdown clock for promotion/new collection release can bring excitement to customers that have been waiting for the event.
How to add a Countdown timer
Steps
In the theme editor (Customize), click Add section.
Locate Countdown timer.
Make necessary changes.
Save.
How to edit a Countdown timer
Section settings
General
Adjust the Container (Fixed width/Small) and Color scheme for this section.
Moreover, you can also pick a Background image for the timer and set the opacity for it in the Image overlay opacity range.
Content settings
Change the Content alignment (Left/Center/Right) and then align the text inside - Text alignment (Left/Center/Right).
Section padding
You can modify the spacing above and below the section by adjusting the slider to change the values of the Top padding and Bottom padding.
Section divider
This divider line provides a clear boundary between the current section and the above.
To activate the divider line, enable the ✅ Show divider checkbox.
You can choose a suitable Divider width for it (Fixed width/ Full width).
Block settings
You can choose to add more elements to the Countdown timer section by selecting (+) Add block.
Heading
Add the Heading of the event to attract customers' attention.
Leave it blank if you do not want to display it.
You can also change the Heading size to:
Heading xs
Heading sm
Heading md
Heading lg
Heading xl
Heading 2xl
Display md
Display lg
Display xl
Subheading
Add the Subheading of the event.
Leave it blank if you do not want to display it.
Description
Add the Description to describe the event.
Leave it blank if you do not want to display it.
Button
You can also display a call-to-action button to redirect customers to your desired pages.
Add a Label and Link for one or both, then choose a Button style (Primary button/ Secondary button/ Underline button).
Countdown timer
Add a countdown timer and adjust the Ends time of the event.
Date formats accepted:
| Name | Format | Example |
|---|---|---|
24 hour format | YYYY/MM/DD HH:MM | 2023/10/04 23:30 |
12 hour format | YYYY/MM/DD HH:MM aa | 2023/10/04 11:30 PM |
You can also choose a Style for the timer and change the Number size to Small/ Medium/ Large.
Image
You can add multiple Image blocks in the Countdown timer section on both desktop and mobile screens to attract customers' attention.
Adjust the Desktop Image width between 150px and 350px.
Especially, you are able to change the Desktop vertical position and Desktop horizontal position for the Image blocks.
Last updated
