This element allows you to have a Countdown Timer on your page. Countdown timers can effectively promote limited-time offers, flash sales, pre-order deadlines, and other time-sensitive promotions. By leveraging countdown timers, you can effectively motivate customers to take immediate action, resulting in improved sales, optin rates and customer satisfaction.
Page blocks that include the timer element can be found in the "Timers" section of the page blocks library:
Countdown Timer Modes
The Countdown Timer element has 2 modes you can choose from, depending on your preferences and needs. Both modes are selectable from the "Main" tab in the sidebar of the builder:
Mode 1: The "Evergreen" Countdown Timer
This mode allows you to set an exact number of minutes/hours/days which the timer will count down from for each visitor who visits your page individually. The timer starts to count down once a visitor lands on your page.
It continues to work for the visitor, even if they refresh the page during the same browsing session. However, if a new browsing session is started the countdown timer will reset when the page is visited again by the same visitor.
You can select the timer time from a list of predefined times (24 hours, 12 hours, 6 hours and 1 hour) or you can set an exact Custom time.
Mode 2: The "Specific Date" Countdown Timer
This mode counts down the time to a specific date and time that you set. The time remaining will be the same for all visitors that land on the page.
Select the Year, Month, Day and Time of day that you want the countdown timer to count down to by clicking into the Date field:
📝 The Timezone for the timer is set to your store's time-zone by default. It's used for any/all countdown timer blocks added to the page. If you'd like a different time-zone used instead, click on the "Change timezone" link to set a new one.
You can also set the following Styles for the countdown timer in the "Main" tab:
Font Name - Choose a font from the available dropdown menu
Font Size - Choose a size for the font from the available dropdown menu
Font Styles - Bold / Italic / Underline
Text Color - Choose the color for the text included on the countdown timer
Options for when the Timer Runs Out
Once the timer has run out on your page for a visitor viewing it, there are 3 options available for what happens next:
1. Hide Block - This option hides the timer block completely on the published page after the timer runs out. Block(s) above/below the timer will fill the space where the timer block was so there won't be any blank space or gap on your page:
2. Replace Timer with Existing Page Block - With this option you can replace the expired timer with any other block on the page. Just select the existing page block from the "Choose Existing Block" dropdown menu:
📝The existing block you select will automatically replace the Timer block once it has expired on your published page. Until then, it will not be visible on the published page.
3. Leave run out timer on the page - The timer block will remain on the page even after the timer has fully expired.
Additional Countdown Timer Style Settings
The following Tabs are also available in the sidebar of the builder, allowing for further customization of the countdown timer's styles:
1. In the "Background" tab you can edit the timer's:
Background Color - Set a background color for the timer
Background Image (Coming Soon!) - Set a background image for the timer
2. In the "Shape" tab you can edit the timer's:
Shape - The shape you'd like used for the timer
3. In the "Border" tab you can edit the timer's:
Border Style - None, solid, dotted or dashed
Border Size - How thick you want the border to be
Border Color - The color you'd like used for the border
4. In the "Box Shadow" tab you can edit the timer's:
Color - The color of the shadow
X offset - The horizontal distance of the shadow. You can use positive values to push the shadow rightwards and negative values to push it leftwards
Y offset - The vertical distance of the shadow. Positive values will push the shadow downwards, while negative values will push it upwards
📝 X and Y offsets can also be set using the pin in the square to the right of the offset fields. The pin can be dragged to set coordinates
Blur - The blurriness of the shadow. Higher values create a more blurred shadow, while lower values create a sharper shadow
Spread - The size of the shadow. Range of allowed values is 0 - 20
5. In the "Spacing" tab you can edit the timer's:
Padding - Top/Bottom and Left/Right in px. Padding is the space between the content of the element and its border
Margin - Top/Bottom and Left/Right in px. Margin is the space outside the border of the element
6. In the "Alignment" tab you can edit the timer's:
Alignment - Left/Center/Right
7. In the "Visibility" tab you can choose which device(s) to show the timer on:
Show on Desktop
Show on Tablet
Show on Mobile