Conditional countdown (timer): 60 seconds setup, immediate results!

In this article: About the Countdown Extension | Examples | How to set up | Styling the countdown

This special offer ends in:

Use countdowns to boost sales and conversions

Create a sense of urgency to promote users into action. Count once until specific date and time, or add an ever-green countdown with a recurring start and end time (like your business closing time for example).

Applying the countdown is as simple as copying and pasting a shortcode to your site.

Use Cases

  • Create a sense of urgency with a limited-time offer.
  • Set up recurring timers – Show a “Call now, we’re about to close” one hour before closing time, every working day.
  • One-time offers – start counting down the moment the user encounters the countdown for the first time.

Examples

Limited time offer
Recurring countdown – Business opening hours
Countdown on a top bar across all pages
Create expectations to an upcoming event

Use countdown with other If-So features

  • Pop-ups
  • Top bars
  • Secret discounts
  • Floating messages

How to set up a countdown

Displaying a countdown is done using a simple shortcode:

Shortcode Structure

The simplest form of a countdown includes an ending time, and the time units that will be included in the countdown (years, days, hours, minutes, seconds).

The following shortcode counts down the days until 00:00 o’clock, October 31, 2023:

[ifsoCountdown end="10/31/2022 00:00" format="day-sec" labels="true"]

The end parameter – To create a one-time timer, the format of the value of the end parameter should be mm/dd/yyyy mm:ss (Keep reading for more options).

The format parameter – choose which time units you want to include in your countdown. “day-sec” will show the days, hours, minutes, and seconds. “min” will show only the minutes, etc.

Possible values are: year, month, week, day, min, sec.

Recurring (ever-green) countdowns

While entering a complete timestamp as the value of the end parameter will generate a one-time countdown, you can use a partial value to create a repeating countdown.

Examples:

  • end=”10/31 00:00″ – the countdown will count until the proximate October 31, when the countdown ends, it will count until 31/10 of the next year.
  • end=”18:00″ the countdown will count until 18:00 every day (keep reading to learn how to limit the countdown to specific days of the week).
  • end=”10 15:30″ – count until 15:30 on the 10th day of the month, each month.

Set the countdown’s starting time

Add the parameter start=”” to set a starting time for the countdown. No countdown will be displayed until the set date.

The possible values of the parameter are similar to those of the end parameter.

The shortcode below generates a countdown that starts at 17:00, and counts the minutes until 18:00, every day.

[ifsoCountdown start="17:00" end="18:00" format="min-sec" labels="true"]

Limit the countdown to specific days of the week

Add the parameter show-on=”” to limit the days of the week the countdown will be shown.

Possible values: sun, mon, tue, wed, thu, fri, sat

The shortcode below generates a countdown from Monday to Friday, between 17:00-18:00.

[ifsoCountdown start="17:00" end="18:00" format="min-sec" labels="true" show-on="mon, tue, wed, thu, fri"]


Styling options

Labels position

By default, the labels are positioned below the time values. You can display them to the right or to the left by adding the labels parameter.

Possible values: right, left, false (false=dodon’t display labels)

Translating the labels

Add the time unit name as a parameter and choose the value you want to display instead.

For example, min=”Minutos” ; sec=”Segundos”

Styling the countdown

By default, the countdown is not stylized. Pick one of our pre-built styles or create a completely new style using CSS.

Use one of our pre-built templates

….

Custom CSS

Wrap the countdown with a div and start styling your countdown. Check out the following example:

<div class="countdown2021">
  [ifsoCountdown end="1/1/2023 00:00" format="day-sec" labels="true"]
</div>
<div class="countdown2021">
<div class="year">2023</div>
  [ifsoCountdown end="1/1/2023 00:00" format="day-sec" labels="true"]
</div>

<style>
.countdown2021 {
      font-family: Arial, sans-serif;
      display: flex;
      background: black;
      padding: 1rem;
      align-items: flex-end;
background: #000 url(https://dev.dev.if-so.com/wp-content/uploads/2021/11/abstract-images.jpg) center/cover no-repeat;
margin: 0 auto;
max-width:290px;
    }
    .countdown2021 .year {
      font-size: 70px;
      color: #fff;
      margin-right: 30px;
      font-weight: bold;
    }

    .countdown2021 ifsocountdown {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      height: 62px;
      flex-wrap: wrap;
      width: 265px;
      position: relative !important;
    }
    .countdown2021 .ifso-countdown-counter {
      background: #333332;
      padding: 10px 10px 0 10px;
      color: #fff;
      font-weight: 400;
      font-size: 22px !important;
      width: 56px;
      display: flex;
      justify-content: center;
      border: none !important;
      border-radius: 0 !important;
    }
    .countdown2021 .ifso-countdown-separator {
      display: none;
    }
    .countdown2021 .ifso-countdown-unit-label-wrap {
      text-transform: capitalize;
      font-weight: 400;
      display: flex !important;
      justify-content: center;
      position: static !important;
      padding: 5px 10px 10px 10px;
      background: #75f8fc;
      width: 56px;
    }

    .countdown2021 .ifso-countdown-unit-label {
      color: #353535;
      font-size: 10px !important;
      letter-spacing: 0 !important;
      position: static !important;
    }
 
    @media (max-width: 500px) {
      .countdown2021 {
        flex-wrap: wrap;
        justify-content: center;
      }

      .countdown2021 .year {
        margin-bottom: 20px;
        margin-right: 0;
      }
    }
</style>

Demos

Countdown to a Fixed Date

[ifsoCountdown end="1/1/2023 00:00" format="day-sec" labels="true"]

Countdown to a Recurring Deadline

[ifsoCountdown end="11/31 23:59" format="day-sec" labels="true"]

Options

  • After the countdown expired – select if you want the countdown to disappear or to show “zeros”
  • Create conditional If-So content based on the countdown status

“grey-circle-countdown”

  • Was this Helpful ?
  • YesNo
End Of The Year
  • OLD USE CASES( EXAMPLES)
  • Alert your users to limited-time sales – example
  • Let your customers know your business is closing soon – example

Related – auto local time display

Countdown Extension
Free
Requirements: If-So Pro