ACF Countdown - Add a Countdown Timer in Joomla

The "ACF - Countdown" custom field allows you to use countdown timers to create anticipation around upcoming events, creating the feeling of scarcity, anticipation, and drive more sales.

The Countdown Field comes built-in with pre-defined layouts that you can use to get started creating your countdown timers as well as provides a plethora of settings that you can use to fine-tune how your countdown timer looks, and feels.

How to add a Countdown Timer Custom Field to Joomla! Articles
The Countdown Field Settings
Countdown Field Previewer
Frequently Asked Questions

How to add a Countdown Timer Custom Field to Joomla! Articles

The Countdown Field can be used with any component that supports the Joomla! Fields such as the Articles (com_content), User (com_user), and the Contact (com_contact) component. Let's see a real-world example of how content authors can add a Countdown Timer to a Joomla article and let website visitors know of an upcoming sale on the front end.

Step 1: Create a new Countdown Field

Go to Content -> Fields, and click New to create a new field. From the Type dropdown, select the "ACF - Countdown" option.

acf countdown field settings

Click to save the field and return to the same page where now, you can see the field customization options.

Step 2: Select the Countdown Type

Under the "TIMER" group, you can define the Countdown Type, Timezone, as well as the action when the countdown expires. In our case, we have decided to use the "Fixed Date" type, use the Client's Timezone as well as hide the timer when it ends.

acf countdown field timer settings

Step 3: Select the Countdown Template

Under the "TEMPLATE SELECTOR" group, you can select the Countdown template, either from a pre-defined list of templates or create your own using HTML and some helpful Smart Tags. In our case, we have selected the second template from the pre-defined templates.

acf countdown field template settings

Step 4: Customize the Countdown Colors

At the bottom of the settings, you can find all color-related settings. You can customize the look of your countdown according to your site's design to make it look and feel as you desire.

acf countdown field color settings

Step 5: Customize the Countdown Units (Optional)

Under the "UNIT DISPLAY" section, you can define which units to display (days, hours, minutes, and seconds). We let the selected template's default settings.

acf countdown field unit display settings

Step 6: Select the Countdown Date in the Joomla Article

Now that we have our Countdown field properly configured, we should see it on the article's editing page. Head over to Joomla Content and click to edit the article you want to add a countdown timer to. In most cases, the Countdown Field should be in the Fields tab. Once there, click the Calendar icon and select a future date.

You’re now done! Once you’ve finished setting your countdown timer's date, save the article and go to your front end to enjoy your countdown.

Note: You can read more below for advanced settings awaiting for you to fine-tune your countdown as per your needs.

The Countdown Field Settings

Below, you can find a list of the available options of the Countdown Field.

Name	Description
Show Advanced Settings	By default, the Countdown field will display only settings related to appearance, such as colors. However, you can toggle between showing all settings and appearance settings.
Timer
Type	The type of the countdown. This can either be static or evergreen. Fixed Date: The default countdowns that require a fixed date to countdown to. Evergreen: This countdown requires a set of days/hours/minutes/seconds to countdown to. Each user that views the countdown will see the same countdown.
Date Timezone	The timezone that will be used in the countdown. Use Joomla Timezone: The given date will be transformed to UTC and then the server (site's) timezone will be applied to it. Use Visitor's Timezone: The given date will automatically be adjusted to the client's (user's) timezone. Note: This will only work for countdown with Fixed Date type.
On Countdown Expire	What action should the countdown perform upon ending? Available values are: keep, hide, restart, message, and redirect No Action: Let the countdown appear with zeroes upon ending. Hide timer: Hide the countdown timer once it ends. Show Message: Show a message once the countdown timer ends. Redirect to URL: Redirect to a URL when the countdown timer ends. Note: When "Evergreen" type is selected, the countdown will always restart when it ends.
Show Message	Enter the text that will appear when the countdown ends and On Countdown Expire is set to Show Message.
Redirect to URL	Enter the URL where the user will be redirected to when the countdown ends and On Countdown Expire is set to Redirect to URL.
Template Selector
Type	Select whether to use a pre-defined countdown template or use a custom format.
Template	The template consists of 8 pre-dfined templates that you can choose from.
Custom Format	Using the Custom Format, you can write your own HTML as well as use the following Smart Tags: {days}: To retrieve the days till the countdown {hours}: To retrieve the hours till the countdown {minutes}: To retrieve the minutes till the countdown {seconds}: To retrieve the seconds till the countdown
Unit Display
Days	Set whether to display the days.
Days Label	Set the days label.
Hours	Set whether to display the hours.
Hours Label	Set the hours label.
Minutes	Set whether to display the minutes.
Minutes Label	Set the minutes label.
Seconds	Set whether to display the seconds.
Seconds Label	Set the seconds label.
Enable Separator	Set whether to include a separator between the countdown items.
Enable 00 Number Format	Set whether to display numbers in 0 or 00 format.
Unit Item
Item Size	Set width and height of each countdown item.
Gap	Set the gap between countdown items.
Item Padding	Set the padding for each countdown item.
Background Color	Set background color of each countdown item.
Border	Set border of each countdown item.
Border Radius	Set border radius of each countdown item.
Unit Digits Container
Padding	Set digits wrapper padding in each countdown item.
Border Radius	Set digits wrapper border radius in each countdown item.
Background Color	Set digits wrapper background color in each countdown item.
Digits Container Custom Width	Set digits wrapper minimum width in each countdown item.
Unit Digit
Font Size	Set each digit font size.
Font Weight	Set each digit font weight.
Padding	Set each digit padding.
Border Radius	Set each digit border radius.
Gap	Set the gap between the digits.
Background Color	Set each digit background color.
Text Color	Set each digit text color.
Digits Custom Width	Set each digit minimum width.
Unit Label
Font Size	Set label font size.
Font Weight	Set label font weight.
Space between label and digits	Set label margin top.
Text Color	Set label text color.

Countdown Field Previewer

The Countdown Field provides a built-in previewer so you can see how the countdown timer will look on your front-end without having to hit save, go to the front end, refresh the page, view the countdown timer, go back to the settings page, edit it and repeat.

On the bottom right of the Countdown field settings, you will notice the Previewer which will automatically update whenever you make changes to field settings.

The previewer can be minimized, or even maximized, where you can toggle between the desktop, tablet, and mobile devices so you can see how your countdown will look like across different devices.