All Collections
Zipify Pages - Tutorials & Documentation
Page Block Elements
The Countdown Timer Element [Zipify Pages]
The Countdown Timer Element [Zipify Pages]
Ezra Firestone avatar
Written by Ezra Firestone
Updated over a week ago

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 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

📝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 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:

📝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 "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

Did this answer your question?