Getting people to take action is one of the biggest struggles for marketers and the Countdown block can be a great way to highlight that there is a limited time frame available for the reader to act.
The Countdown block can be used to countdown to fixed future date and time or can count down for a specified time period that only starts when a page is visited for the first time.
You can also select a product and offer it at a difference price during the countdown period. Combined with the Checkout block plugin, you can create genuine Limited Time Offers.
You can search for the UC Countdown block in the block inserter.
The controls in the Settings panel vary depending on whether you’re creating a Fixed or Evergreen countdown.
You can insert multiple countdowns into a page, but apart from the appearance controls, if you change a setting or option in one countdown, it will automatically apply to all others on the page. When changing the timing settings, you may not instantly see all countdowns update in the editor, but you will see they sync in the front end.
In the Fixed mode, you can select a date using the calendar and input the end time in the 24 hour format. By default the block uses UTC time, but you can switch this to any timezone you prefer and the countdown will end when the date and time in that timezone is reached.
Toggle the Test Mode switch on when you’re creating your page to allow the countdown to reset itself. This allows you to run the countdown multiple times without having to manually delete your cookies.
Be sure to turn this off before going live or else all users will be able to restart the countdown.
Countdown Start Values
You can use the sliders or just input the number of days, hours and minutes you want the countdown to run for. The maximum number of days is 365.
By default, a user will only be able to go through an evergreen countdown once. If you want users to be able to repeat a countdown, toggle the Repeatable switch on. This will then display a field labelled Days before user can re-enter.
The minimum number of days before a countdown can be restarted is one day. If you enter 1 into this field, a user visiting the page more than 24 hours later would see the countdown period start again.
The first control is only of use if you’re using a Checkout block. Click on the number to copy the ID of this page to the pasteboard. In the Checkout block, you can paste the ID into the Countdown Page ID field. The Checkout block will then ensure the offer price is only available while the countdown is running.
If you’re offering a product at a special price during the countdown, complete the Product ID field.
To get the ID, go to the Products screen and hover over the product in the list of products. You’ll see the ID number displayed under the product name.
The Offer Price field allows you to enter a price that will only be available while the countdown is active. If you leave this empty, the normal price will be used.
When the countdown completes, you have two options for what should happen.
The default option is to redirect users to a new page. Enter the full URL of the page you want to redirect users to.
When the countdown ends, the new page will be loaded and if a user revisits the countdown page after it has ended, they’ll be immediately redirected to the new page.
You can also keep users on the same page and show and hide elements when the countdown completes.
The Advanced panel of every block has an Additional CSS class(es) input field. This allows us to apply labels to elements that can be used to style them or identify them. We can use them with the Countdown block to identify which elements should be shown and hidden when it completes.
You need to enter a classname that will be used to identify elements to show and another to identify elements to hide. These names should not start with a number and should only contain letters, numbers and hyphens and underscores. Try and ensure they’re unique so no other elements might already have the same classnames applied.
In my example, I’ve entered the classnames of my-element-show and my-element-hide.
The screenshot above shows a Group block with a Heading block in it. The Group has been selected and the Advanced panel opened. In the Additional CSS class(es) field, I entered the classname my-element-show that I entered into the Countdown block. This will allow the Countdown block to make this appear when the countdown ends.
Of course, we also need to hide this group initially. To that, add a space after the classname you entered into the Additional CSS class(es) field and a second classname, uccd-hide-element. That classname will ensure the group is hidden initially.
The screenshot above shows a second Group block with a Heading block inside. This time I selected the group and entered the classname of the element to hide, my-element-hide into the Additional CSS class(es) field.
The appearance of individual Countdown blocks can be changed independently of others.
Fix When Page Scrolls
This makes most sense if you only have a single Countdown block on the page and what it to remain visible when a reader scrolls past it. When toggled on, the countdown will stick to the top of the screen when a reader scrolls past it.
You can also set a background color that will be displayed behind the counter when stuck to the top of the screen.
If you have multiple countdowns in a page, only switch this on for one of them.
Always Show Hours
When turned on, this ensures the countdown always shows hours, even hours are set to zero. When turned on, an Always Show Days toggle switch will be displayed allowing you force these to display too, even if set to zero.
Color 1 lets you set a color for the background of the countdown and the labels. Color 2 sets the color of the digits on the countdown.