Countdown Timer

Available in Whisk v11.0.0 and later

The Countdown Timer can be found as it's own section, or as a block in Main Product and Featured product sections and the Promo popup. The first part of this documentation is for the Timer or Countdown Timer block that is found in all of these places. The second part only relates to the Countdown Timer section.

The timer will count down to the time in your store's time zone, so it will end at the same time everywhere in the world, no matter what time zone the viewer is in. To check your store's time zone or to change it, visit Settings/General in your Shopify store's Admin.

Timer Block settings

End date

Add a date to countdown to. The date must be formatted as YYYY-MM-DD. If the date/time is in the past or if this field is empty, the timer will display all zeros. The timer supports a countdown up to 999 days in the future.

End time

Enter the time for the countdown to end in hours and minutes. The time must be formatted as 00:00. If left blank, the timer will end at midnight on the end date.

Hide the timer once the end time has passed

When this is selected, the timer block or the entire Countdown timer section will disappear when the date/time is in the past.

Message after end time has passed

If the timer is not set to be hidden once the end time has passed, any text added here will show underneath the timer once it has counted down to zero.

Numbers to display

Choose which numbers to display. Days will always be shown in every option.

Numbers font

Choose a font for the numbers to display in.

Numbers font size

The size of the font in relation to the body font size.

Countdown Timer section settings

Layout (desktop)

Timer will always be stacked on mobile.

Stacked

When stacked, the timer block will show in it's block order relative to the other blocks in the section.

Timer on left

Timer on right

Text alignment (desktop or mobile)

Choose left, center, or right text alignment.

Text animation

See the documentation for text animations for more details.

Color scheme

Choose from one of the theme's color schemes as the background for the section.

Borders

See our documentation on Border shapes and Color underneath sections to learn more about how to use the settings in this section.

Section spacing

Adjust top and bottom padding within the section.

Other blocks

Heading

Heading font style will be the heading font chosen in Typography/Theme settings.

Heading

The text for the block.

Heading size

Select the size of the text for the heading.

Subheading

Subheading font style will be the accent font chosen in Typography/Theme settings.

Subheading

The text for the block.

Subheading size

Select the size of the text for the heading.

Make text bold

Check this box to make the subheading text bold.

Text

Text will be the body font chosen in Typography/Theme settings.

Text

The text for the block.

Text size

Select the size of the text.

Make text bold

Check this box to make the text bold, which can be helpful for legibility on a transparent background.

Buttons

Buttons will be automatically colored based on the color scheme chosen as the text box background. The following applies to both Button 1 & Button 2.

Button label

The text for the button. To hide either of the buttons, leave the label for that button blank.

Button link

Add a link to the page you want the button to lead to. If it's a page outside of the store, make sure it's the full URL with "https://".

Image

Image

Upload the image you want to use in the block.

Image max width

This will be the width of the image in px unless it's too wide to fit the screen, then it will default to full width and scale with the screen size so it's never cut off.

Image text

If your image includes imbedded text, add that text here so that it can be picked up by screen readers for accessibility, and by Google for better search results.

Make image text h2 heading

If your image has text and is being used as the title for the section, check this box. This also benefit s accessibility and SEO.

Link

Link text

The text label for the link.

Link URL

The url that the link will go to.