Setting up a Countdown Timer

Countdown timers can be added to any schedule that has both a start and end date/time. The countdown timer will show on the products included in the schedule between the start and end date/time.

To enable it for a schedule, just check the checkbox show in the screenshot below:

Before a countdown timer can be displayed, you must set it up in your theme customizer. The easiest way to do this is to click the "Open theme editor" button as shown in the screenshot above, which will open your theme editor on the product template page. Alternatively, just open your theme customizer the usual way and go to your product template.

Add a block where you would like the countdown timer to appear:

Then click over to the apps tab and select our Countdown Timer block:

That should then put it in your template. The countdown timer will show in the theme customizer regardless as to whether a schedule currently applies to the product being shown. This is to allow you to customise the countdown timer even if your schedule is not running.

Over on the right you should see all your options to customize the block:

You will notice in the theme customizer that you have a huge amount of flexibility for customising the style of your countdown timer. This includes:

Background style

Single colour - select a single colour for the background

Gradient - use the gradient selector to select a gradient pattern

Border

Colour - the colour of the border

Size - the width of the border in px

Radius - the radius of the corner (i.e. rounded corners)

Typography

Control the font, colour and size of all the text elements.

Select "Theme font" for the font to inherit the same font used on the theme, or select a different one.

Spacing

Padding - the padding in px around the countdown timer block

Margin - the margin in px around the countdown timer block