Customize the countdown timer appearance

Set custom units labels

To set custom units labels, navigate to Appearance > Elements > Timer Label:

Customize countdown timer look and feel

You can change countdown timer look and feel and see render live.

Under Appearance > Elements, you can customize every element style:

Timer digits

Timer labels

Timer blocks

Time block provide different set of controls to fully customize the countdown timer look and feel:

Display the timer digit and label horizontally

Navigate to Appearance > Elements > Timer block.

In the option Display, select Inline:

Display the countdown timer on the same line as the content

Navigate to Appearance > Elements > General:

In the option Display, select Inline:

Add custom CSS

To add your custom CSS code, in your campaign settings, go to Appearance  → Custom CSS:

Here're the CSS class selectors you can use to customize the style and size of the campaign's elements:

If you're displaying your campaign in a sticky bar, use these class selectors to target the sticky bar's elements:

• .hurrytimer-sticky: The sticky bar.

• .hurrytimer-sticky-close: The close button.

Apply customization only for mobile devices

Use these media queries to apply CSS to a specific screen size:

For mobile:

@media screen and (max-width: 540px) {
    /* your css code for mobile goes here */
}

Example: Make the countdown timer digits and labels smaller on mobile:

@media screen and (max-width: 540px) {

    .hurrytimer-campaign .hurrytimer-timer-digit{
        font-size: 15px;
    }
    
     .hurrytimer-campaign .hurrytimer-timer-label{
        font-size: 12px;
    }
    
}

For tablets:

@media screen and (min-width: 540px) and (max-width: 780px) {
   /* your css code for tablets goes here */
}

Render countdown timer from right-to-left (RTL)

In order to render the countdown timer units from right to left for languages such Arabic and Hebrew, use the property direction: rtlas below:

.hurrytimer-campaign{
    direction: rtl;
}