Customize the countdown timer appearance

Take control of which elements to show, and change countdown timer look and feel to match your site design.

Change elements' visibility
To choose which elements to show, navigate to Appearance > General > Visibility:
 Set custom units labels
To set custom units labels, navigate to Appearance > General > Custom timer labels:
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 you custom CSS, navigate to Appearance > Custom CSS:
IMPORTANT: Add.hurrytimer-campaign before classes and tags you want to target, example: .hurrytimer-campaign .hurrytimer-timer-digit
{ 
   font-size: 2em; 
}
​

Getting Started - Previous

Adding a countdown timer to the product page

Next - Getting Started

Adding headline

Last updated 1 year ago