Overview
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 sections that include the timer element can be found in the "Timers" category of the page sections library:
A new timer element can also be added to any existing section on the page by clicking on the "add element" button above/below an existing element and selecting the "Timer" element:
📝A published page can display only one Timer element per Section.
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 sections 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
📝In the Settings > Localization section of the app, you can set a different language for the Days / Hours / Minutes / Seconds text used on countdown timers.
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 Section - This option hides the timer section completely on the published page after the timer runs out. Section(s) above/below the timer will fill the space where the timer section was so there won't be any blank space or gap on your page.
2. Replace Timer with Existing Page Section - With this option you can replace the expired timer with any other section on the page. Just select the existing page section from the "Choose Page Section" dropdown menu:
📝The existing section you select will automatically replace the Timer section 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 section 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:
📝Choose the device type you'd like to edit the Timer styles on from the "Edit on" section, prior to making changes. All settings are available in Desktop edit mode, while only style edits for Spacing, Alignment, Size and Visibility are available in Tablet/Mobile modes.
1. In the "Layout" tab the "Show Label" toggle is available so you can toggle on/off the timer labels (Days / Hours / Minutes / Seconds):
2. In the "Background" tab you can edit the timer's:
Background Color - Set a background color for the timer
Background Image - Set a background image for the timer
3. In the "Shape" tab you can edit the timer's:
Shape - The shape you'd like used for the timer
4. 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
5. 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 coordinatesBlur - 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
6. 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
7. In the "Alignment" tab you can edit the timer's:
Alignment - Left/Center/Right
8. In the "Visibility" tab you can choose which device(s) to show the timer on:
Show on Desktop
Show on Tablet
Show on Mobile
9. In the "Advanced Settings" tab you can:
See the unique Element ID
Set Custom Class Name(s) for additional CSS editing
