Set Up a Countdown Timer

Add a Countdown Timer to any cell in the Point of Sale Layout Editor to visually track time until a future date. Customize the appearance and format to fit your design needs, ensuring users stay informed and engaged.

Create a Countdown Timer

In the Layout Editor, you can create a timer on top of a cell by launching the timer configuration window.

  1. In CMS, go to Apps | All.
  2. Edit a selected app config.
  3. Select a cell.
  4. Expand Cell Overlays in the toolbar on the right.
  5. Select Timer.
    These settings can be customized:
    Expiry Time
    The end time of the countdown.
    iOS Font
    The font style for iOS devices.
    Font Size
    The font size.
    Color
    The color of the countdown.
    Background Color
    The background color of the countdown.
    Display Text Format
    The display text format (e.g., HH:MM:SS).
    Timer is Expired Text
    The text to be displayed when the countdown expires.

Configure the Display Text Format

The display format of the countdown timer is a string that can contain these substitutions:

Variable Substitutions  
%D = number of days
%H = number of hours (0 - XX)
%HH = number of hours (00 - XX)
%M = number of minutes (0 - XX)
%MM = number of minutes (00 - XX)
%S = number of seconds (0 - XX)
%SS = number of seconds (00 - XX)
%DL[plural,singular] = day / days
%HL[plural,singular] = hours / hour
%ML[plural,singular] = minute / minutes
%SL[plural,singular] = second / seconds
%XX = only show the highest granularity label definition
Example 1: Countdown Clock
Example 1: Countdown Clock

Display text format: %HH:%MM:%SS

The countdown clock is the default behavior if no display text format is specified. The clock is updated each second and shows the number of hours, minutes, and seconds remaining. A countdown clock on the a bag of the week offer.

Example 2: Show Highest Timeframe Only

Display text format: Only %XX %DL[days,day]%HL[hours,hour]%ML[minutes,minute]%SL[seconds,second] left

In this use case, the goal is to show the number of days remaining until there is less than one day. Then the number of hours will show until there is less than one hour. Finally, the number of minutes and seconds will be shown until the expiration date is reached. A countdown timer on a bag of the week offer showing the remaining time in days.

Expired Timer Behavior

After the expiration date has passed, if a "Timer is Expired Text" has been configured, then this text string will be shown. Otherwise, the timer will be removed from the UI. Note that in the CMS, "Timer Expired" will be shown so that the user knows that the cell was configured as a timer.